Model with bones animation (blender export) animating incorrectly in three.js

Question

I am currently working on skeletal animation tests in three.js. I have a simple model which animates just fine in blender. Basically it consists of three stacked, bending cubes.

When I export the blender file to the three.js using the blender export plugin with Blender V2.64, the animation in the webGl context appears different as if the skinweighting is wrong.

WebGL-Demo: http://rainbowrangers.de/threejs/animation_test01/

Blender-File: http://rainbowrangers.de/threejs/animation_test01/model/animation_test01.blend

What do I have to do to get the correct result in three.js?

Answer 1

I am the person you quoted from the github discussion. I have recently been experimenting with this pipeline, ( ie Blender bone animations into threejs,) and have found that it is very very difficulty to find a reliable process that will work every time.

On my blog, I have compiled a list of 'tips' that allowed me to achieve success on some occasions:

http://dev.mothteeth.com/2012/10/threejs-blender-exporting-skeletal-animations/

To summarise, the most important things I found were:

Delete the Armature Modifier before exporting, or the animation will be all messed up.

Check that your Vertex Groups are properly assigned to the bones. ( In Blender, you can use automatic bone weights. )

Key all bones in the first and last frames of your animation. ( As you discovered, if you only have keys for the bones you have changed, ThreeJS won't infer anything about the other ones, and things will be broken. )

Even following these guidelines, I can't get things to work consistently, and have been considering using morph targets until the library matures a bit more. The file sizes for morph targets are much larger but they seem to be a more reliable option at this point, in my experience.