# Vertex animation not playing correctly in three js

**URL:** <https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309>\
**Category:** Questions\
**Tags:** gltf-loader, animation\
**Created:** [March 5, 2020, 5:56am UTC](https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309 "2020-03-05T05:56:27Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Click\_Clock\_Boom](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/click_clock_boom/32/9687_2.png) [@Click\_Clock\_Boom](https://discourse.threejs.org/u/Click_Clock_Boom)\
**Post date:** [March 5, 2020, 5:56am UTC](https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309/1 "2020-03-05T05:56:27Z")

</div>

I make a origami paper folding animation in blender using AnimAll extension to animate the vertices. I exported the gltf to contain the vertex animations using the method told by @domncurdy and it got exported fine with all the animations (i tested running the file on babylon’s viewer). It is not working fine on three js though. The animations are showing entirely different result. See the attached video.

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

```
let object = (gltf.scene || gltf.scenes[0]).children[0];
scene.add(object);
mixer = new THREE.AnimationMixer(object);
mixer.clipAction(gltf.animations[0]).play();
```

---

<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:** [March 5, 2020, 6:29am UTC](https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309/2 "2020-03-05T06:29:51Z")

</div>

Just to confirm – it looks like you expect in BabylonJS, but not in ThreeJS?

Could you share the new `.gltf` or `.glb` file? This one may be a bug…

---

<div class="post-metadata">

**Author:** ![Click\_Clock\_Boom](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/click_clock_boom/32/9687_2.png) [@Click\_Clock\_Boom](https://discourse.threejs.org/u/Click_Clock_Boom)\
**Post date:** [March 5, 2020, 6:49am UTC](https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309/3 "2020-03-05T06:49:46Z")

</div>

yeah it is as expected in babylon but not in three js[origami\_bowl\_animation.glb](https://discourse.threejs.org/uploads/short-url/5nkN34j3skISDBiTWErMQbRM9An.glb) (1.8 MB)

---

<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:** [March 5, 2020, 7:06am UTC](https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309/4 "2020-03-05T07:06:24Z")

</div>

I see one problem in the model, which is a few negative keyframe times:

 ![Screen Shot 2020-03-04 at 11.04.09 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d4a6b1583a418e5422d92bea8c818f9bfc9b2702.png)

Do you see any negative keyframe times in Blender? If so, it may be worth trying to delete those. If not, I would report a bug on the exporter ([https://github.com/KhronosGroup/glTF-Blender-IO](https://github.com/KhronosGroup/glTF-Blender-IO)) since the errors are reported by the official glTF validator ([https://github.com/KhronosGroup/glTF-Validator](https://github.com/KhronosGroup/glTF-Validator)).

But I don’t know for sure if that’s why threejs can’t render it… i’m surprised it would break it entirely, and BabylonJS seems to render it OK. So I’ll have to keep looking at that.

---

<div class="post-metadata">

**Author:** ![Click\_Clock\_Boom](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/click_clock_boom/32/9687_2.png) [@Click\_Clock\_Boom](https://discourse.threejs.org/u/Click_Clock_Boom)\
**Post date:** [March 5, 2020, 7:20am UTC](https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309/5 "2020-03-05T07:20:10Z")

</div>

I removed it, but the problem remains ☹

---

<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:** [March 6, 2020, 3:36am UTC](https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309/6 "2020-03-06T03:36:14Z")

</div>

Ok, the file you uploaded earlier is working in my viewer ([https://gltf-viewer.donmccurdy.com/](https://gltf-viewer.donmccurdy.com/)) except for one bug: the viewer thinks the object is much bigger than it is, and so the camera projection settings basically make it invisible. If I fix that (note I didn’t deploy the fix yet), I get a good result:

 ![5D3A323F-FA8F-4BB8-B46B-4920DC6F84A9-53773-000508BC75166EB1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/bd0473d8254ff40f253fde4ca1138474cb2c4107.gif)

I do think there is a bug worth fixing in threejs here, but it _shouldn’t_ block your demo from working… Can you share the code you’re using to view the model and play the animation? I’m wondering if there’s a mistake there, or if you made the same mistake I did.

---

<div class="post-metadata">

**Author:** ![Click\_Clock\_Boom](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/click_clock_boom/32/9687_2.png) [@Click\_Clock\_Boom](https://discourse.threejs.org/u/Click_Clock_Boom)\
**Post date:** [March 6, 2020, 3:39am UTC](https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309/7 "2020-03-06T03:39:50Z")

</div>

[index.html](https://discourse.threejs.org/uploads/short-url/6jTttCabpKDZUIoJyW2MJqgeIdv.html) (2.2 KB) that’s a great news

---

<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:** [March 6, 2020, 4:00am UTC](https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309/8 "2020-03-06T04:00:04Z")

</div>

I don’t have the exact `bowl.glb` model that is referenced in your code, but the file you attached above does seem to work if I drop it into that example. I tested with three.js r114.

 ![Screen Shot 2020-03-05 at 7.59.51 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/2e75a70ccd3b96cb7138d1a6291fb7e8ee88d7f1.png)

---

<div class="post-metadata">

**Author:** ![Click\_Clock\_Boom](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/click_clock_boom/32/9687_2.png) [@Click\_Clock\_Boom](https://discourse.threejs.org/u/Click_Clock_Boom)\
**Post date:** [March 8, 2020, 5:18pm UTC](https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309/9 "2020-03-08T17:18:55Z")

</div>

does the problem exist with all the loaders or just gltf loader?

---

<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:** [March 8, 2020, 6:40pm UTC](https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309/10 "2020-03-08T18:40:33Z")

</div>

Your code is working for me, the problem I mentioned doesn’t affect it.

The problem in my viewer would be the same for any loader (although not so many loaders support morph targets).

---

<div class="post-metadata">

**Author:** ![Click\_Clock\_Boom](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/click_clock_boom/32/9687_2.png) [@Click\_Clock\_Boom](https://discourse.threejs.org/u/Click_Clock_Boom)\
**Post date:** [March 9, 2020, 9:20am UTC](https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309/11 "2020-03-09T09:20:34Z")

</div>

wait what…? my code and the glb file i sent are working on your side without any modifications?

---

<div class="post-metadata">

**Author:** ![Click\_Clock\_Boom](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/click_clock_boom/32/9687_2.png) [@Click\_Clock\_Boom](https://discourse.threejs.org/u/Click_Clock_Boom)\
**Post date:** [March 9, 2020, 9:24am UTC](https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309/12 "2020-03-09T09:24:36Z")

</div>

ohh it is working absolutely fine in the newer build. thanks a lot 🙂

---

<div class="post-metadata">

**Author:** ![janderson099](https://avatars.discourse-cdn.com/v4/letter/j/eb8c5e/32.png) [@janderson099](https://discourse.threejs.org/u/janderson099)\
**Post date:** [June 5, 2021, 9:07pm UTC](https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309/13 "2021-06-05T21:07:34Z")

</div>

> [@Click\_Clock\_Boom](#):
>
> I make a origami paper folding animation in blender using AnimAll extension to animate the vertices. I exported the gltf to contain the vertex animations using the method told by @domncurdy and it got exported fine with all the animations (i tested running the file on babylon’s viewer).

Hi, @Click_Clock_Boom . I searched a lot but I can’t find this method to export from Blender using AnimAll (I’m animating vertices). Can you post here how, please?

---

<div class="post-metadata">

**Author:** ![janderson099](https://avatars.discourse-cdn.com/v4/letter/j/eb8c5e/32.png) [@janderson099](https://discourse.threejs.org/u/janderson099)\
**Post date:** [June 6, 2021, 11:03pm UTC](https://discourse.threejs.org/t/vertex-animation-not-playing-correctly-in-three-js/13309/14 "2021-06-06T23:03:42Z")

</div>

Hi! I found the workflow. 🙂

> Vertex animation isn’t supported by engines, or by glTF, so you’ll need to bake the animation into a series of morph targets. You can do this by:
> 
> ```
> Enable the MDD addon in Blender (Edit -> Preferences -> Add-ons).
> Export to MDD (point cache).
> Import the MDD file back into Blender.
> Export to glTF again.
> 
> ```
> 
> The result should work, but feel free to ask for help on the forums if you get stuck: [https://discourse.threejs.org/](https://discourse.threejs.org/).

Link to the topic:

> <https://github.com/mrdoob/three.js/issues/18809#issuecomment-594629778>
>
> I exported origami paper folding animation which was made using the extension An…imAll in blender to three.js and the materials wont show up and the animations array would be empty. 
> 
> The problem is similar to this: https://blender.stackexchange.com/questions/49815/blender-scene-animation-exported-to-three-js-without-bones-or-skinning

I hope this can help someone.