Blender-exported JSON model shows wrong animations in THREE.js

Question

I have a basic walk animation in Blender that I´m trying to export to THREE.js. It looks nice in Blender playback:

Now, after being exported with the THREE.js exporter, it looks like this on the browser:

The geometry is broken, not in all the body parts, but certainly has some problems. I´m not sure what to do now, I tried exporting with several options checked/unchecked, with no luck.

I also read the explanations in this posts, I think I followed all the required steps but still getting this weird animations:

http://unboring.net/workflows/animation.html#preview

https://github.com/mrdoob/three.js/pull/8412#issuecomment-210675561

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

The code I´m currently using to load the JSON model/animations is like this:

        var loader = new THREE.JSONLoader();
        var action = {}, mixer;

        loader.load(path + '/dino.json', function (geometry, materials) {
            materials.forEach(function (material) {
                material.skinning = true;
            });

            character = new THREE.SkinnedMesh(
              geometry,
              new THREE.MeshFaceMaterial(materials)
            );

            scene.add(character);

            /* ANIMATION */
            mixer = new THREE.AnimationMixer(character);                
            action.walk = mixer.clipAction(geometry.animations[ 3 ]);               
            action.walk.setEffectiveWeight(1);
            action.walk.enabled = true;

            /* Update/render functions */
            onUpdateFcts.push(function(delta, now){
                mixer.update(delta);
            });

            action.walk.play();
        });

I´m using Blender 2.78c and THREE.js r84, with the Blender exporter tool including in this revision.

spacorum spacorum · Accepted Answer · 2017-03-19T20:16:08

I found some interesting links about similar animation problems:

Model with bones animation (blender export) animating incorrectly in three.js

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

Blender exports a three.js animation - bones rotate strangely

After reading all of these advices, I had successfully exported the animated mesh without visual artifacts following this workflow:

Create the armature bone by bone around the mesh. When done and in object mode, select first the mesh, then the armature, press CTRL+P > With automatic weights. This generates an armature modifier on the mesh. Against what I read, the armature modifier doesn´t need to be deleted before exporting.
You must have a default pose like the rest position. This must be the one selected on Blender. Also, the playback frame 0 must be selected in that default pose.
I created keyframes at the start and end of every pose for all the bones involved, this seems important.
You must unselect everything and only select the mesh, not the armature. This must be done in object mode.
My export settings:

Note: I must say that this is the same workflow I was following with no luck. This time the difference was that I first deleted every vertex group, also the armature modifier (not the armature itself) and recreated all the steps from the first one. Now, once exported the animated mesh worked fine enough!

Blender-exported JSON model shows wrong animations in THREE.js

1 Answers