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 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 simplest process to achieve character animations, created from makehuman in Blender is the following:

1. Install makewalk. This is a Blender addon that should be contained in a folder called blendertools in your makehuman folder.

Drag the makewalk folder into your blender addons folder. On windows, it is c:\users*your_name*\appdata\roaming\blender foundation\blender\2.78\scripts\addons

Then, within blender, go to setting, addons, hit the refresh button on the bottom of the window, and search for makewalk, and enable it, then save your settings

2. Install the .mhx2 plugin to export from Makehuman and import into Blender. The addon consists of two seperate parts - one addon for makehuman and one for Blender.

Download information and instruction on how to install can be found here

3. Create your character in Makehuman, add a mocap skeleton, and export as mhx2, taking note of the setting shown below

4. Import the mxh2 model in blender.

5. Download motionbuilder compatible bvh files. Here is a source with thousands of motion capture files https://sites.google.com/a/cgspeed.com/cgspeed/motion-capture/cmu-bvh-conversion

6. In blender, with the makewalk addon, attach the bvh file to your character's armature.

Answer 2

I posted the same on SO: https://stackoverflow.com/a/30050230/3091066, but here is my answer for other users who might be interested:

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.

Answer 3

I had trouble exporting animations to THREE js as shown in the issue here:

https://github.com/mrdoob/three.js/issues/6751

Make sure you follow the troubleshooting steps that are there. Also make sure like above that the rotation/location/scale is applied on both the mesh, and the armature.