# Gltf not animated properly

**URL:** <https://discourse.threejs.org/t/gltf-not-animated-properly/14765>\
**Category:** Questions\
**Tags:** gltf-loader\
**Created:** [April 29, 2020, 2:07pm UTC](https://discourse.threejs.org/t/gltf-not-animated-properly/14765 "2020-04-29T14:07:55Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Topcio](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/topcio/32/10539_2.png) [@Topcio](https://discourse.threejs.org/u/Topcio)\
**Post date:** [April 29, 2020, 2:07pm UTC](https://discourse.threejs.org/t/gltf-not-animated-properly/14765/1 "2020-04-29T14:07:55Z")

</div>

Hello again.

Can you take a look on those videos. In blender animation is OK, but when i export it to glb animation is not properly.  
What can i do with that.

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d0e39d14c8ed4aecb5d8201dc5274cbadf255f7b.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d0e39d14c8ed4aecb5d8201dc5274cbadf255f7b.mp4)

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/fe9710f1c6668d2a0392b7c2fad2971d1e5b9d45.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/fe9710f1c6668d2a0392b7c2fad2971d1e5b9d45.mp4)

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [April 29, 2020, 5:14pm UTC](https://discourse.threejs.org/t/gltf-not-animated-properly/14765/2 "2020-04-29T17:14:04Z")

</div>

Please see the [Loading 3D Models • Troubleshooting](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models) section in the docs:

1. if the model works in one or more of the 3D viewers but not in your code, you will need to share enough information about your code for someone to debug and reproduce the issue.
2. If the model does not work correctly in any 3D viewer, please report a bug to the [blender addon](https://github.com/KhronosGroup/glTF-Blender-IO), including an example `.blend` so that they can debug and reproduce the issue.

In either case, you’ll need to provide more information for others to help.

---

<div class="post-metadata">

**Author:** ![Topcio](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/topcio/32/10539_2.png) [@Topcio](https://discourse.threejs.org/u/Topcio)\
**Post date:** [April 29, 2020, 6:40pm UTC](https://discourse.threejs.org/t/gltf-not-animated-properly/14765/3 "2020-04-29T18:40:19Z")

</div>

same animation recorded from glb file from 3D viewer for Windows - played correctly

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/377f34151c21a8287c71a8153e24c892b2d79568.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/377f34151c21a8287c71a8153e24c892b2d79568.mp4)

something seems to be wrong in GLTFLoader

Below my code

{  
var animationCanvas = function (where, hero, type) {

```
            var clock, mixer, camera, scene, renderer, model, GLBFile;
    
            clock = new THREE.Clock();
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(25, 300 / 300, 0.01, 10);
            camera.position.set(-0.25, 0, 0.5);
    
            renderer = new THREE.WebGLRenderer({
                antialias: true,
                alpha: true,
            });
    
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(300, 300);
            renderer.shadowMap.enabled = true;

            renderer.outputEncoding = THREE.sRGBEncoding;

            container = document.createElement('div');
            container.classList.add(`animation_canvas`);
            where.innerHTML = null;
            where.append(container);
            container.appendChild(renderer.domElement);
    
            window.addEventListener('resize', () => {
    
                renderer.setSize(300, 300);
                camera.aspect = 300 / 300;
                camera.updateProjectionMatrix();
    
            });
    
            var controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = false; // an animation loop is required when either damping or auto-rotation are enabled
            controls.dampingFactor = 10.5;
            controls.screenSpacePanning = false;
    
            controls.maxPolarAngle = Math.PI / 2;
            controls.target.set(0, 0.03, 0);
    
            if (existsFile('./animations/' + hero + '_new.glb')) {
                GLBFile = './animations/' + hero + '_new.glb';
                controls.maxDistance = 0.15;
                controls.minDistance = 0.15;
            } else {
                GLBFile = './animations/' + hero + '.glb';
                controls.maxDistance = 0.25;
                controls.minDistance = 0.25;
            };
    
            var loader = new THREE.GLTFLoader();
            loader.load(GLBFile, async (gltf) => {
    
                    model = gltf.scene;
                    gltf.scene.traverse(function (node) {
                        if (node.isMesh) {
                            node.castShadow = true;
                            node.receiveShadow = true;
                            node.material.metalness = 0; // undo this change if you apply an env map
                        }
    
                    });
    
                    var myArray = [];
                    var debut, idle, reply, sp;
                    var attack, daze, die, hurt, moving, skill_1, skill_2, skill_3, victory;
                    var escape, goal, lie, scared_1, scared_2, scared_3;
    
                    var action;
    
                    if (gltf.animations.filter(e => e.name == `debut`).length > 0) {
                        debut = true;
                        myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('debut')])
                    };
                    if (debut) {
                        if (gltf.animations.filter(e => e.name == `idle`).length > 0) {
                            idle = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('idle')])
                        };
                        if (gltf.animations.filter(e => e.name == `reply`).length > 0) {
                            reply = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('reply')])
                        };
                        if (gltf.animations.filter(e => e.name == `sp`).length > 0) {
                            sp = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('sp')])
                        };
                    } else {
                        if (gltf.animations.filter(e => e.name == `idle`).length > 0) {
                            idle = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('idle')])
                        };
                        if (gltf.animations.filter(e => e.name == `attack`).length > 0) {
                            attack = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('attack')])
                        };
                        if (gltf.animations.filter(e => e.name == `daze`).length > 0) {
                            daze = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('daze')])
                        };
                        if (gltf.animations.filter(e => e.name == `die`).length > 0) {
                            die = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('die')])
                        };
                        if (gltf.animations.filter(e => e.name == `hurt`).length > 0) {
                            hurt = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('hurt')])
                        };
                        if (gltf.animations.filter(e => e.name == `moving`).length > 0) {
                            moving = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('moving')])
                        };
                        if (gltf.animations.filter(e => e.name == `skill_1`).length > 0) {
                            skill_1 = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('skill_1')])
                        };
                        if (gltf.animations.filter(e => e.name == `skill_2`).length > 0) {
                            skill_2 = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('skill_2')])
                        };
                        if (gltf.animations.filter(e => e.name == `skill_3`).length > 0) {
                            skill_3 = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('skill_3')])
                        };
                        if (gltf.animations.filter(e => e.name == `victory`).length > 0) {
                            victory = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('victory')])
                        };
                        if (gltf.animations.filter(e => e.name == `escape`).length > 0) {
                            escape = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('escape')])
                        };
                        if (gltf.animations.filter(e => e.name == `goal`).length > 0) {
                            goal = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('goal')])
                        };
                        if (gltf.animations.filter(e => e.name == `lie`).length > 0) {
                            lie = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('lie')])
                        };
                        if (gltf.animations.filter(e => e.name == `scared_1`).length > 0) {
                            scared_1 = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('scared_1')])
                        };
                        if (gltf.animations.filter(e => e.name == `scared_2`).length > 0) {
                            scared_2 = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('scared_2')])
                        };
                        if (gltf.animations.filter(e => e.name == `scared_3`).length > 0) {
                            scared_3 = true;
                            myArray.push(gltf.animations[gltf.animations.map(e => e.name).indexOf('scared_3')])
                        };
                    };
    
                    mixer = new THREE.AnimationMixer(gltf.scene);
    
                    if (debut) {
                        action = mixer.clipAction(myArray[myArray.map(e => e.name).indexOf('debut')])
                        action.setLoop(THREE.LoopOnce);
                        action.play();
                        mixer.addEventListener('finished', ( /*event*/ ) => {
                            action = mixer.clipAction(myArray[myArray.map(e => e.name).indexOf('idle')]);
                            action.play();
                        });
    
                    } else {
                        action = mixer.clipAction(myArray[myArray.map(e => e.name).indexOf('idle')]);
                        action.play();
    
                        var set = null
    
                        function onClick(event) {
    
                            if (!set) {
                                set = true;
                                event.preventDefault();
                                var randomItem = myArray.filter(e => e.name !== `idle`)[Math.floor(Math.random() * (myArray.length - 1))];

                                action = mixer.clipAction(randomItem);
    
                                action.setLoop(THREE.LoopOnce);
                                action.play();
                                mixer.addEventListener('finished', ( /*event*/ ) => {
                                    action.stop()
                                    set = null;
                                    return;
                                })
                            }
                        }
                        document.querySelector(`canvas`).addEventListener('click', onClick, false);
                    }
    
                    scene.add(model);
                    animate();
    
                },
                function (xhr) {
    
                    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    
                },
                function (error) {
    
                    console.error('An error happened', error);
    
                });
    
            // lights
    
            var hemiLight = new THREE.HemisphereLight(0xffffff, 0x666666);
            hemiLight.position.set(0, 1, 0);
            scene.add(hemiLight);
    
            var dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
            dirLight.position.set(0, 1, 1);
            dirLight.castShadow = true;
            dirLight.shadow.camera.top = 0.2;
            dirLight.shadow.camera.bottom = -0.2;
            dirLight.shadow.camera.left = -0.2;
            dirLight.shadow.camera.right = 0.2;
            dirLight.shadow.camera.near = 0.1;
            dirLight.shadow.camera.far = 2;
            dirLight.shadow.mapSize.set(300, 300);
            scene.add(dirLight);
    
            var material = new THREE.ShadowMaterial();
            material.opacity = 0.4;

            var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(0, 0), material );
            mesh.rotation.x = -Math.PI / 2;
            mesh.receiveShadow = true;
            mesh.castShadow = true;
            scene.add( mesh );
    
            function animate() {
    
                requestAnimationFrame(animate);
                var delta = clock.getDelta();
                if (mixer) mixer.update(delta);
                render();
                controls.update();
            }
    
            function render() {
                renderer.render(scene, camera);
            }

        };

```

}

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [April 29, 2020, 10:49pm UTC](https://discourse.threejs.org/t/gltf-not-animated-properly/14765/4 "2020-04-29T22:49:04Z")

</div>

Hm, there’s quite a bit of animation-related stuff happening in that code. 🙂 Am I correct in understanding that your model has a lot of animations, and they’re meant to be played one at a time? And, what version of three.js do you have installed?

Just to check that it works in _some_ three.js renderer, does [gltf-viewer.donmccurdy.com/](http://gltf-viewer.donmccurdy.com/) work for you?

---

<div class="post-metadata">

**Author:** ![Topcio](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/topcio/32/10539_2.png) [@Topcio](https://discourse.threejs.org/u/Topcio)\
**Post date:** [April 30, 2020, 11:14am UTC](https://discourse.threejs.org/t/gltf-not-animated-properly/14765/5 "2020-04-30T11:14:24Z")

</div>

Three.js varsion latest

“and they’re meant to be played one at a time?”  
yup  
primary animation playimg in loop, but when you click on canvas animation will change, and after finish go back to primary animation

OMG the object showing for a sec and then hundreds of bugs  
[glTF 2.0 validation report.pdf](https://discourse.threejs.org/uploads/short-url/5WvhMd4IU0CbFJ8i0yHzMx8y8Ri.pdf) (387.6 KB)

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [April 30, 2020, 4:25pm UTC](https://discourse.threejs.org/t/gltf-not-animated-properly/14765/6 "2020-04-30T16:25:09Z")

</div>

> [@Topcio](#):
>
> OMG the object showing for a sec and then hundreds of bugs

I’m not sure what you mean here — the validation report aside, is the model appearing and animating correctly? It would be much easier for others to debug this if you’re able to share the model, or the `.blend`, or a subset of the model that reproduces the problem.

---

<div class="post-metadata">

**Author:** ![Topcio](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/topcio/32/10539_2.png) [@Topcio](https://discourse.threejs.org/u/Topcio)\
**Post date:** [April 30, 2020, 5:07pm UTC](https://discourse.threejs.org/t/gltf-not-animated-properly/14765/7 "2020-04-30T17:07:36Z")

</div>

i think i found the problem.  
So it looks like that.  
When i export to glt only one animation, then that animation is perfect, no matter whitch one i export.  
But when i tryed to export couple animation, then no one playig good.  
But idk what to do, how to fix it

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [April 30, 2020, 5:27pm UTC](https://discourse.threejs.org/t/gltf-not-animated-properly/14765/8 "2020-04-30T17:27:29Z")

</div>

> [@Topcio](#):
>
> But idk what to do, how to fix it

We can’t help you without some way to reproduce the problem. A video demonstrates that there is a problem but rarely gives clues into why it is happening. There are many demos on the three.js site showing models with animation working correctly, and the reason yours is broken will have to do with the model (which we can’t see) and the code (which we can’t run without a model).

Please confirm whether your model appears correctly in [https://gltf-viewer.donmccurdy.com/](https://gltf-viewer.donmccurdy.com/) and/or [https://sandbox.babylonjs.com/](https://sandbox.babylonjs.com/).

---

<div class="post-metadata">

**Author:** ![Topcio](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/topcio/32/10539_2.png) [@Topcio](https://discourse.threejs.org/u/Topcio)\
**Post date:** [April 30, 2020, 10:02pm UTC](https://discourse.threejs.org/t/gltf-not-animated-properly/14765/9 "2020-04-30T22:02:29Z")

</div>

[mecha\_trojan.glb](https://discourse.threejs.org/uploads/short-url/9tVAawa3P26Dj2gPCHFbQeI7s4U.glb) (771.6 KB)  
here is my glb file  
it works properly on babylon  
but on [https://gltf-viewer.donmccurdy.com/](https://gltf-viewer.donmccurdy.com/) dont work properly[mecha\_trojan.blend](https://discourse.threejs.org/uploads/short-url/pWAGnT2BSVvNKiTAaUEX4PvXFkX.blend) (4.0 MB)  
alos blender file

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [May 1, 2020, 12:51am UTC](https://discourse.threejs.org/t/gltf-not-animated-properly/14765/10 "2020-05-01T00:51:49Z")

</div>

The issue I see on [https://gltf-viewer.donmccurdy.com/](https://gltf-viewer.donmccurdy.com/) is that the model is huge, and won’t let you zoom out far enough to see the whole thing:

 ![Screen Shot 2020-04-30 at 5.48.56 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d7367ed97fe91f31d8ed1f10931d37ba3009fadb.jpeg)

The animation and textures appear to be intact, though. When I open the `.blend` file, I don’t see any textures included there (that’s fine, maybe they’re not embedded in the file) but I also notice that the armature is scaled by 0.01. If you fix that (change the Armature’s scale to `1, 1, 1`) it appears at the right scale in the three.js viewer.

What result do you get when exporting with the Armature scaled to 1 first, when opening it on [gltf-viewer.donmccurdy.com/](http://gltf-viewer.donmccurdy.com/)?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [May 1, 2020, 12:53am UTC](https://discourse.threejs.org/t/gltf-not-animated-properly/14765/11 "2020-05-01T00:53:23Z")

</div>

More specifically, try changing these values to 1, not 0.010:

 ![Screen Shot 2020-04-30 at 5.52.36 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/3f48550329bf0a1c26a172d2f479ed4e29c255e6.jpeg)

---

<div class="post-metadata">

**Author:** ![Topcio](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/topcio/32/10539_2.png) [@Topcio](https://discourse.threejs.org/u/Topcio)\
**Post date:** [May 1, 2020, 2:50am UTC](https://discourse.threejs.org/t/gltf-not-animated-properly/14765/12 "2020-05-01T02:50:42Z")

</div>

In Scale 1

| Warning | Message | Pointer |
| --- | --- | --- |
| NODE\_SKINNED\_MESH\_NON\_ROOT | Node with a skinned mesh is not root. Parent transforms will not affect a skinned mesh. | /nodes/17 |

I will try more tomorow, i have to go sleep 😛 it’s almost moring in here

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [May 1, 2020, 4:00pm UTC](https://discourse.threejs.org/t/gltf-not-animated-properly/14765/13 "2020-05-01T16:00:09Z")

</div>

Keep in mind that I cannot guess what you are seeing. It is time consuming to keep asking “what result do you get”, and your `.blend` file does not include textures so I cannot reproduce any of this. Please fully describe what you are seeing — an isolated validation warning doesn’t mean much.

---

<div class="post-metadata">

**Author:** ![David\_Dufour](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/david_dufour/32/14062_2.png) [@David\_Dufour](https://discourse.threejs.org/u/David_Dufour)\
**Post date:** [December 19, 2021, 9:47am UTC](https://discourse.threejs.org/t/gltf-not-animated-properly/14765/14 "2021-12-19T09:47:47Z")

</div>

Hi @donmccurdy I believe I am having a similar issue where exporting multiple animations causes corruption of the animations. I have no idea how the information from each animation is bleeding into other animations but I was hoping you might have some thoughts.

Edit (I was able to make a change to the exporter to solve the issue):

> <https://github.com/KhronosGroup/glTF-Blender-IO/issues/1386#issuecomment-997301573>
>
> \*\*Describe the bug\*\*
> When exporting my animated mesh, my character's right leg …is rotated in both the exported file and in the editor after exporting. (Note: Changes are immediate in the editor, no re-import required.) The changes are apparent across all of the Actions in the file.
> 
> \*\*To Reproduce\*\*
> Steps to reproduce the behavior:
> 1. Open File (Generic Character.zip is linked below)
> 2. Click on File -\> Export -\> gltf
> 3. Use default export settings
> 4. Wait for export to complete
> 5. Observe right leg's rotation after export completes
> 
> \*\*Expected behavior\*\*
> Exporting an animated mesh should not make changes to the scene
> 
> \*\*Screenshots\*\*
> https://i.stack.imgur.com/rLKpW.gif
> 
> \*\*Version\*\*
> - OS: Windows 10
> - Blender Version 2.92.0
> 
> \*\*Additional context\*\*
> I'm new to animation and am using Rigify. I posted the following question to the Blender Stack Exchange and was told to report this as a bug by a commenter.
> https://blender.stackexchange.com/questions/221035/exporting-to-gltf-causes-leg-to-twist-how-can-this-be-prevented
> It is entirely possible that I'm doing things in the wrong way, but I still wouldn't expect an export to change the contents of my file, no matter how egregious my mistake is. 
> \[Generic Character.zip\](https://github.com/KhronosGroup/glTF-Blender-IO/files/6401200/Generic.Character.zip)