9
votes

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?

3

3 Answers

10
votes

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.

3
votes

After a lot of digging I finally found the answer in one of the three.js github discussions:

"Insert a full keyframe for all of the bones at the beginning and end of the animation. I found that without the first keyframe the animation would be subtly distorted, and without the one at the end I would lose parts of the animation toward the end."

Source: https://github.com/mrdoob/three.js/issues/2106

That was exactly what happened to our render. We only hat keyframes set for the bones that were changing and not for the static ones.

2
votes

I've also found that to get the exported model working right the export should be done at frame 0 in Blender.

Another thing that solved a problem I've encountered was not to scale model after exporting it. This means that the model can't be scaled in the JSON file and probably in the code directly.

Using three.js r56