GLTFLoader 全局变量未定义

Question

我正在学习三个 js 并尝试在 three.js r98 中为 gltf 对象旋转设置动画。但是我得到一个控制台错误：变量 obj 未定义，但是变量是在初始化脚本之前在顶部声明的，所以它应该是全局的。我不明白为什么这不起作用。如果我使用 scene.rotation.y += 0.01; 它会起作用。但是如果有其他不应该旋转的对象，这就没有用了^^。变量模型具有相同的错误。使用 MLTD 加载程序，这有效：。我尝试了 gltf.asset 而不是 gltf.scene，但出现了同样的错误。

非常感谢您的帮助。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
        <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script src="js/GLTFLoader.js"></script>
        <script src="js/WebGL.js"></script>
        <script src="js/stats.min.js"></script>
        <script src="js/dat.gui.min.js"></script>
        <script>

            if ( WEBGL.isWebGLAvailable() === false ) {
                document.body.appendChild( WEBGL.getWebGLErrorMessage() );
            }
            var stats, clock, mixer;
            var camera, scene, renderer, model;
            var obj;

            init();
            animate();

            function init() {
                container = document.createElement( 'div' );
                document.body.appendChild( container );
                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 100 );
                camera.position.set( 0, 3, 10);
                camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0xf0f0f0f );
                scene.fog = new THREE.Fog( 0xe0e0e0, 20, 100 );
                clock = new THREE.Clock();
                // lights
                var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
                light.position.set( 0, 20, 0 );
                scene.add( light );
                light = new THREE.DirectionalLight( 0xffffff );
                light.position.set( 0, 20, 10 );
                scene.add( light );

                // model
                var loader = new THREE.GLTFLoader();
                loader.load( 'logo1.gltf', function( gltf ) {
                    model = gltf.scene;
                    model.scale.set(1,1,1);
                    obj = model;
                    scene.add( model );
                    //createGUI( model, gltf.animations );
                }, undefined, function( e ) {
                    console.error( e );
                } );


                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.gammaOutput = true;
                renderer.gammaFactor = 2.2;
                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() {

                obj.rotation.y += 0.01;

                requestAnimationFrame( animate );
                renderer.render( scene, camera );
                //stats.update();
            }
        </script>
    </body>
</html>

Answer 1

问题是 obj 仅在 GLTFLoader.load() 的 onLoad() 回调触发时设置。由于这是以异步方式发生的，因此您应该将以下代码行放入 animate() 函数中以解决问题。

if ( obj ) obj.rotation.y += 0.01;

GLTFLoader 全局变量未定义

GLTFLoader global variable undefined

three.js

gltf