Blender exports a three.js animation - bones rotate strangely

Question

I'm currently trying to export an animated blender model to three.js using the exporter of three.js (github.com/mrdoob/three.js/tree/dev/utils/exporters/blender/2.66/scripts/addons).

I've created a model including bones and weights and a tiny animation.

The problem I have: The model gets broken. Somehow the bones don't rotate around their origin but around the origin of the root bone. Moving the bones manually does not make a difference.

I followed these tutorials: devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/

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

I have: Deleted the Armature

Checked the Vertex Groups

Keyed all bones in the first and last frame.

I've been to pretty much every thread I could find on github and stack overflow. These seem to be the main issues for these errors. But I guess I still miss any point. :(

I have uploaded all files including the blender files and exported animation. http://www.file-upload.net/download-8068001/forum-files.rar.html Any suggestions? Thanks a lot in advance.

Answer 1

The problem was that the location/rotation/scale were not reset before exporting the model.

Before You export Your model, select the mesh and press CTRL+A and select location. Repeat for rotation and scale, then select the armature and do the same. Now it works.

Answer 2

I've downloaded both the tutorial package and your code. The code aspect looks fine. So looking over the model I see that your vertex groups are not well defined. When I select the Left_collarbone bone, left_upperarm, left_lowerarm I seem to be getting vertices from parts of the torso, head, etc... in the mix. I suspect that what your seeing with your funky shoulder stretch animation is that the collarbone is part of some other groupings and when exported the "weights" of the mesh are confused causing the bone to pull badly on the mesh. Try cleaning up the vertex groups and see if that helps. @lukasz1985 has the right idea, nice one! +1

P.S. Thanks for the link to the cool animation tutorials for Three.js :)

Answer 3

I had an issue where calling THREE.GeometryUtils.center(geometryWithBones) on a the newly imported geometry would make all the skinning look very strange. Getting rid of that fixed things.

Answer 4

Also make absolutely sure, that the three.js blender exporter is not set to to align your model in any way. (I had it set to "center" and it took me 4 hours to figure out why my bones rotate around some spot that was NOT the spot they rotate around in blender.)