如何在 ThreeJS 中旋转 gltf 模型答案

【问题标题】：How to rotate a gltf model in ThreeJS如何在 ThreeJS 中旋转 gltf 模型
【发布时间】：2019-01-31 17:06:17
【问题描述】：

这里是大菜鸟。我试图让这个模型自行旋转，在尝试了其他帖子的答案后，我不知所措。我最近的尝试给了我一个错误，声称引用未定义。请帮忙。

我一直在改编的代码来自一个 three.js 示例。我读到您可以在动画函数中使用3dobject.rotation.x =+ 0.01 或if (3dobject) 3dobject.rotation.x =+ 0.01 之类的东西，但没有运气。在这个项目中，我定义model = gltf.scene，然后在我的动画函数中使用model.rotation.x =+ 0.01。

任何有帮助的，谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - glTF loader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
    body {
        font-family: Monospace;
        background-color: #000;
        color: #fff;
        margin: 0px;
        overflow: hidden;
    }
    #info {
        color: #fff;
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: center;
        z-index: 100;
        display:block;
    }
    #info a {
        color: #75ddc1;
        font-weight: bold;
    }
</style>
</head>

<body>
    <div id="info">
        <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader<br />
        Test fo 
        <a href="" target="_blank" rel="noopener">stuff</a><br />
    </div>
    
    <script src="js/three.js"></script>
    
    <script src="js/controls/OrbitControls.js"></script>
    <script src="js/loaders/GLTFLoader.js"></script>
    
    <script src="js/Detector.js"></script>
    <script src="js/libs/stats.min.js"></script>
    
    <div>
        <script>
        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
        var container, stats;
        var controls
        var camera, scene, renderer, light;
        init();
        animate();
        function init() {
            container = document.createElement( 'div' );
            document.body.appendChild( container );
            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
            camera.position.set( -1.8, 0.9, 2.7 );
            
            
            
            controls = new THREE.OrbitControls( camera );
            controls.target.set( 0, -0.2, -0.2 );
            controls.update();
            
            scene = new THREE.Scene();
            
            light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
            light.position.set( 0, 1, 0 );
            scene.add( light );
            // model
            var model;
            var loader = new THREE.GLTFLoader();
            loader.load( 'models/gltf/Cube1.gltf', function ( gltf ) {
                gltf.scene.traverse( function ( child ) {
                    
                } );
                model = gltf.scene;
                scene.add( model );
                
            } );
            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
            renderer.gammaOutput = true;
            container.appendChild( renderer.domElement );
            window.addEventListener( 'resize', onWindowResize, false );
            // stats
            stats = new Stats();
            container.appendChild( stats.dom );
        }
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        }
        //
        function animate() {
            requestAnimationFrame( animate );
            
            //****** this is where im trying to make it rotate
            
            model.rotation.x =+ 0.01;
            
            renderer.render( scene, camera );
            stats.update();
            
        }
    </script>
</div>

</body>
</html>

【问题讨论】：

此代码不会在 Stack Overflow sn-p 中运行，因为它依赖于 <script/> 标签中引用的其他文件。如果您在本地运行它，“引用未定义”是什么意思？什么是完整的错误？但我认为你的错误可能就是这样：使用+= 添加数字，而不是=+。后者与 x = (+0.1) 相同，只是重复地将 X 设置为相同的值。
@DonMcCurdy 这是控制台中显示的错误：untitled.html:103 Uncaught ReferenceError: model is not defined at animate (untitled.html:103) animate @ untitled.html:103
第 103 行是这样的：model.rotation.x += 0.01;
你需要等待模型加载后再旋转它，试试if ( model) model.rotation.x += 0.01;

标签： javascript three.js rotation gltf

【解决方案1】：

除了 Don 的建议之外，我还发现了一个问题 - 您的 模型没有在全局范围内定义，以便在动画函数中使用。

添加模型和其他变量（全局）：

var camera, scene, renderer, light, model;

然后等待模型实际加载：

if (model) {
    model.rotation.x += 0.01;
}

【讨论】：