Search code examples
javascriptthree.js3daugmented-realitygltf

GLTF 3D model isn't animated when it should be


So the goal is simple , I want to animate a 3D model , imported as .gltf file ( it has only 1 animation ).

I've been following the documentation steps :

https://threejs.org/docs/#manual/en/introduction/Animation-system

And some other examples from the interned , all of them look pretty much the same only few things modified but the idea is everytime the same.

My code ( what is commented are failed attempts ) :

                let loader = new THREE.GLTFLoader();
                loader.load('scene.gltf', function ( gltf ) {
                        GLTF = gltf;
                        let xMesh = gltf.scene.children[0];
                        scene.add(xMesh);//arWorldRoot.add(xMesh);
                        animation = new THREE.AnimationMixer(xMesh);
               animation.clipAction(gltf.animations[0]).setDuration(8).play();
                        //scene.add( gltf.scene );
                        //animation = new THREE.AnimationMixer(gltf.scene);
                        //animation.clipAction(gltf.animations[0]).play();
                        //gltf.animations.forEach(( clip ) => {
                        //animation.clipAction(clip).play();
                        //});
                        //render();
                }, undefined, function ( error ) {
                        console.error( error );
                } );
....
....
....
 function render() {
            requestAnimationFrame(render);
            var delta = new THREE.Clock().getDelta();
            if (animation != null) {
                animation.update(delta);
            };
            renderer.render(scene, camera);
 }

The output I get from all these attempts is the 3D model is displayed but not animated.In devTools no error / warning.

It's pretty weird following the oficial documentation and not work , but I'm sure I'm missing something...


Solution

  • I tried the same code and had the same issue. With mine it was that getDelta() was returning 0 so the animation wasn't moving forward. To check the animation was working I just entered a value manually into the animation.update(), i.e. animation.update(0.01).