My goal is to animate a mesh through its skeleton using a BVH file on a webpage. Here's my process:
- Create a character in MakeHuman and export it (I find mhx format works best).
- Import the character into Blender.
- Retarget the character to a BVH using the MakeWalk plugin for Blender.
- Export the character to JSON using the Three.js exporter.
- Export the BVH file (not sure if this step is necessary, but I want to ensure the BVH matches the retargeted skeleton).
- Load the character onto a webpage using Three.js
- Animate the character using a BVH file.
The animation looks great in Blender. My issue arises when I try to utilize the JavaScript BVH viewer code mentioned here. I modified the code to use the MakeHuman skeleton instead of creating one from the BVH data, but when I attempt to animate the character on the webpage, it becomes distorted.
Here is how the animation should look (more or less) as rendered from Blender:
And here is the distorted result displayed on the webpage:
Clearly, the animation is completely off. I even had to zoom out significantly to view the entire image.
I have tried various rigs, file formats, resaving the BVH after retargeting, among other solutions. I also attempted to follow the example provided here, but encountered issues when deleting armature modifiers as instructed - this resulted in no bones being exported and Three.js throwing an error.
I am stuck at this point. Is there an updated example available that demonstrates how to achieve what I am attempting to do?