Vertex animation not playing correctly in three js

Questions
,
1

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.

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

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…

3

yeah it is as expected in babylon but not in three jsorigami_bowl_animation.glb (1.8 MB)

4

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

Screen Shot 2020-03-04 at 11.04.09 PM
Screen Shot 2020-03-04 at 11.04.09 PM1113×104 27.2 KB

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) since the errors are reported by the official 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.

5

I removed it, but the problem remains :frowning:

6

Ok, the file you uploaded earlier is working in my viewer (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
5D3A323F-FA8F-4BB8-B46B-4920DC6F84A9-53773-000508BC75166EB1800×577 1.16 MB

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.

7

index.html (2.2 KB) that’s a great news

8

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
Screen Shot 2020-03-05 at 7.59.51 PM2184×504 84.3 KB

9

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

10

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).

11

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

12

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

1 Like
13

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?

14

Hi! I found the workflow. :slight_smile:

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/.

Link to the topic:

I hope this can help someone.

2 Likes