How do I handle animated models in Three.js?

Question

I have a basic question about Three.js. I've googled but didn't find anything useful... How do I handle animated models in Three.js? I know how to import .js files, and I have an animated cube exported from blender to .js format. I've imported it with the JSONLoader, but the animation wont play by itself. So that's where I am, I don't know how to play it.

I've checked the documentation but I don't know what I should use... Tried the MorphAnimationMesh, and when I log the length, it finds 250 frames. So I guess the export went well.

I'm using WebMatrix and it doesn't seem to recognize dae-files, so I haven't tried with them yet. And for them as well I do not know how to handle animations.

Please help!

Solution

There are plenty of examples in the three.js sources. You can also view them online, e.g.

• http://threejs.org/examples/webgl_morphnormals.html
• http://threejs.org/examples/webgl_morphtargets_horse.html

There's also another style of animation, called skeleton animation or "skinning". However, if you found 250 frames of morphs, then you don't need to worry about it at this point, but it's good to be aware of it. Blender can export both - morphs are more foolproof but skinning takes less space.

Comments

[user1066278]

Thank you! I got the animation playing now. I also tried to export multiple obj files and convert them to json with the python script. It worked good, actually that's the only way to get smoothing groups... So I'm going to try out skinned animation too, will it be any different?

[Tapio]

@user1066278: Yes, look at the examples. Also, the python script won't support skinning, since that would require e.g. bone information that obj files cannot hold.

[user1066278]

Alright, good to know! I'll try it out though, because isn't the animation baked anyway if there's an obj for each frame? Then it doesn't matter if obj doesn't support skinning

[Tapio]

Morph animation is "baking", i.e. there's a separate object for each frame of animation. That takes a lot of space as each vertex is present in each frame. In skinning, there's a separate skeleton which is animated. Vertices are parented to the bones and move with them, so it's very efficient to only have animation frames for, say 10 bones, instead of potentially thousands of vertices.