Three.js: Blender exported model deforms when animation is applied

[jlaquinte]

I'm encountering a weird issue when loading models from the Blender exporter. When I load the model without applying animation, it looks like this--

but once I apply animation, the model deforms and looks like this--

with the fingers stretched horribly and the body twisted around. The model still performs the animation, but deformed.

Here's the code I'm using to load and animate the model

    var loader = new THREE.JSONLoader();
    loader.load( "js/models/Golfer_SWING.js", function(geometry, materials){

    for ( var i = 0; i < materials.length; i ++ ) {
        var m = materials[ i ];
        m.skinning = true;
    }

    playerObject = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial( materials ) );
    playerObject.position.set( -50, -250, 0 );
    playerObject.scale.set( 100, 100, 100 );
    playerObject.rotation.y = -180 * Math.PI/180;

    scene.add( playerObject );

    playerObject.castShadow = true;
    playerObject.receiveShadow = true;

    helper = new THREE.SkeletonHelper( playerObject );
    helper.material.linewidth = 3;
    helper.visible = false;
    scene.add( helper );
    swingAnimation = new THREE.Animation( playerObject, geometry.animations[0] );
    swingAnimation.play();

    } );

I've tried a bunch of commonly suggested config changes to the blend file, but none of them work. Here's a link to the blend file.

http://cl.ly/3H3M2T3i1o1p

I'm using r68 and the latest blender exporter.

[satori99]

You _must_ export your mesh and animation with the skeleton cleared of all transforms.

I tried with your file and got proper results by selecting every bone in pose mode and then selecting Pose->Clear Transform->All, and then doing a three.js export.

This wont affect your scene or other keyframes, but you have to do it everytime you export.

[satori99]

I made some fixes to your blender file to make it suitable for three.js exporting.

• Reset the scale of the mesh objects (ctrl-A, in object mode)
• Changed the animation to start from frame 1, rather than frame 0. and shifted all other keyframes by one frame.
• Added a rest-pose keyframe at frame 0 ( outside the new animation range)
• Added all vertices of the club mesh to a vertex group named "hand.R" (same as the bone name)

Now you can correctly export the model and animation by selecting frame 0, and then exporting.

https://dl.dropboxusercontent.com/u/46299249/Golfer_FIXED.blend

[jlaquinte]

satori99, thank you so much! I've been wrestling with this for days. And many thanks for providing a fixed file. It's now working for me :)