GLTFLoader global variable undefined

2516 views three.js
1

i'm learning three js and try to animate an gltf object rotation in three.js r98. But I get a Console Error: Variable obj undefined, but the variable is declared on top before the init script, so it should be global right. I don't see why this shouldn't work. If I use scene.rotation.y += 0.01; it works. But this is not usefull if there are other object which should not rotate^^. the variable model has the same error. With MLTD Loader this works: Loop Rotation on any axis for a 3D obj Three js. Instead of gltf.scene i tried gltf.asset but with same error.

Many Thanks for help.

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

answered question

1 Answer

9

The problem is that obj is only set when the onLoad() callback of GLTFLoader.load() fires. Since this happens in an asynchronous way, you should put the following line of code in your animate() function in order to solve the problem.

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

posted this

Have an answer?

JD

Please login first before posting an answer.