Animate MakeHuman character with BVH using Three.js

Question

I'm trying to animate a mesh via it's skeleton on a webpage using a BVH. Here's the overall process of what I'm trying to do:

1. Make a character using MakeHuman and export (mhx format? seems to work best).
2. Import the character into Blender.
3. Retarget to a BVH using the MakeWalk plugin for Blender.
4. Export the character to json using the Three.js exporter.
5. Export the BVH (not sure if this is necessary, but I figured I might have better luck getting the BVH to match up with the skeleton after retargeting)
6. Load the character into a web page using Three.js
7. Animate the character using a BVH.

The animation looks great in blender. I'm trying to use the JavaScript BVH viewer code from here modified to use the skeleton created by MakeHuman instead of it creating a skeleton from the BVH data. Whenever I try to animate the character, it gets very distorted.

Here's the desired result (more or less) rendered from Blender:

And this is what is happening on the webpage:

As you can see, it's getting totally messed up. I also had to zoom way out in order to see the whole image.

I've tried using different rigs, different file formats, resaving the BVH after retargeting, you name it. I also tried to follow the example here (scroll down to see the instructions), but it says to delete the armature modifiers and when I do that, no bones get exported and Three.js throws an error.

I am at a loss. Is there an up-to-date example somewhere that shows how to do what I'm trying to do?

Answer 1

The same thing happened to me when I exported from Blender to Three.js. The solution that worked for me was (after step 3 in your list) to ensure in Blender that there were no object rotations still that hadnt been applied (ctrl-a). In other word the skeleton and the mesh must have no additional rotations or scaling.