Глобальная переменная GLTFLoader не определена

Я изучаю три js и пытаюсь анимировать поворот объекта gltf в three.js r98. Но я получаю консольную ошибку: переменная obj undefined, но переменная объявляется сверху перед сценарием инициализации, поэтому она должна быть глобальной. Я не понимаю, почему это не должно работать. Если я использую scene.rotation.y += 0.01;, он работает. Но это бесполезно, если есть другой объект, который не должен вращаться ^^. у переменной модели такая же ошибка. С MLTD Loader это работает: Поворот петли на любом ось для 3D-объекта Three js. Вместо gltf.scene я попробовал gltf.asset, но с той же ошибкой.

Большое спасибо за помощь.

<!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>

gltf three.js
person Community    schedule 04.11.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что obj устанавливается только тогда, когда срабатывает обратный вызов onLoad() для GLTFLoader.load(). Поскольку это происходит асинхронно, вы должны поместить следующую строку кода в свою animate() функцию, чтобы решить проблему.

if ( obj ) obj.rotation.y += 0.01;
person Mugen87    schedule 04.11.2018
comment
Огромное спасибо за ваш быстрый ответ. То, что я только что обнаружил, если объявить переменную как var obj = new THREE.Object3D();, ошибки тоже не появятся. - person ; 04.11.2018
comment
@notsureiscorrect Этот подход из вашего комментария действительно работает, однако вы создаете неиспользуемый пустой объект и вращаете его во время загрузки файла glTF. Для одного объекта память и производительность, вероятно, не имеют значения, но этот подход не будет масштабироваться так же хорошо, как другие. Рассмотрите возможность использования ответа, предоставленного здесь Mugen87. - person emackey; 05.11.2018