Three.js animation mixer not playing?

Question

Ok I have an fbx successfully loaded into Three.js exported from blender with all animation boxes checked. Ive tried all export settings from blender so that's not it.

This is how I bring the model in, and I am able to accurately determine whether the fbx has animations or not:

var geoFromScene = new THREE.Geometry();
var FBXLoader = require('three-fbx-loader');
var loader = new FBXLoader();
                loader.load(string, function ( object ) {

                    object.traverse( function ( child ) {
                        if ( child.isMesh ) {
                            child.castShadow = true;
                            child.receiveShadow = true;

              geoFromScene = (new THREE.Geometry()).fromBufferGeometry(child.geometry);

                        }


                    } );

          var theModel = new THREE.Mesh();
          theModel.geometry = geoFromScene;
          theModel.material = material;
          theModel.position.set(5,5,-8);
          //theModel.rotation.set(new THREE.Vector3( 0, MATH.pi/2, 0));
          theModel.scale.set(0.1, 0.1, 0.1);
                    localThis.scene.add(theModel);

          localThis.mixer = new THREE.AnimationMixer(theModel);

          if(theModel.animations[0])
          {
            var action = localThis.mixer.clipAction(theModel.animations[0]);
                    action.play();
          } else {
            console.log("No animations");
          }

                } );

In update (which does work, because I can print the animation.time):

this.mixer.update(this.clock.getDelta());

And yet the model is just static. Whats wrong here?

UPDATE:

code from example copy pasted-

var geoFromScene = new THREE.Geometry();
var FBXLoader = require('three-fbx-loader');
var loader = new FBXLoader();
loader.load( string, function ( object ) {
                    localThis.mixer = new THREE.AnimationMixer( object );
                    var action = localThis.mixer.clipAction( object.animations[ 0 ] );
                    action.play();

                    object.traverse( function ( child ) {
                        if ( child.isMesh ) {
                            child.castShadow = true;
                            child.receiveShadow = true;
                        }
                    } );

          object.position.set(5,5,-8)
          object.scale.set(0.1, 0.1, 0.1);
                    localThis.scene.add( object );


                } );

in animate-

this.mixer.update(this.clock.getDelta());

All I get is the model armature it seems -

New approach:

var FBXLoader = require('wge-three-fbx-loader'); //https://www.npmjs.com/package/wge-three-fbx-loader
var loader = new FBXLoader();
loader.load( string, function ( object ) {

Why do you convert the loaded geometry to THREE.Geometry? Besides, it should not be necessary to create a custom mesh (if anything, you would have to create an instance of THREE.SkinnedMesh). Anyway, it's best to stick to the official example. Please write your code similar to threejs.org/examples/webgl_loader_fbx — Mugen87
@Mugen87 ok, Ive copied the example code verbatim AND am using their model - still no animations. Ive updated my question — skyguy

Alex Ray Dotte Alex Ray Dotte · Accepted Answer · 2019-09-24T16:10:13

I had the same problem using the NPM package three-fbx-loader, which hasn't been updated in a couple years. If you examine any of the AnimationClip objects in object.animations after loading your FBX, you'll notice the duration of all the clips is 0 and the tracks are empty arrays.

I finally got the animations to load & play properly by using wge-three-fbx-loader instead.

Three.js animation mixer not playing?

1 Answers