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

Created on 7 Sep 2014  ·  3Comments  ·  Source: mrdoob/three.js

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--

screen shot 2014-09-07 at 1 26 00 am

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

screen shot 2014-09-07 at 1 24 25 am

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.

Help (please use the forum)

Most helpful comment

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

All 3 comments

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.

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

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 :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

seep picture seep  ·  3Comments

danieljack picture danieljack  ·  3Comments

boyravikumar picture boyravikumar  ·  3Comments

Horray picture Horray  ·  3Comments

zsitro picture zsitro  ·  3Comments