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!

Answer 1

I found this one example pretty useful for game dev:

https://threejs.org/examples/webgl_animation_skinning_blending.html

Answer 2

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.