How do I load an animated FBX model with three.js

Questions
,
1

I’m having trouble loading animated .fbx models with three.js. I have two loader methods.

static loader :

loadStaticFBX(path){
        try{
            let loader = new FBXLoader()
            loader.load(path, (fbx) => {
                fbx.scale.setScalar(0.1);
                fbx.traverse(c => {
                  c.castShadow = true;
                })          
                this._scene.add(fbx)
            })
        }
        catch (err) {
            console.log("error loading: " + path + " into the scene")
            if (this._debug) {
                console.log(err)
            }
        }
    }

animated loader:

loadAnimatedFBX(modelPath, animPath){
        try {
            let loader = new FBXLoader()
            loader.load(modelPath, (fbx) => {
                fbx.scale.setScalar(0.1);
                fbx.traverse(c => {
                  c.castShadow = true;
                })          
                try{
                    let anim = new FBXLoader()
                    anim.load(animPath, (anim) => {
                        let m = new THREE.AnimationMixer(fbx)
                        this._mixers.push(m)
                        let idle = m.clipAction(anim.animations[0])
                        idle.play()
                    })
                }
                catch(err){
                    console.log("error loading the animation: " + animpath)
                    if (this._debug) {
                        console.log(err)
                    }
                }
                this._scene.add(fbx)
            })
        }
        catch(err){
            console.log("error loading the animated model: " + modelPath + " into the scene")
            if (this._debug) {
                console.log(err)
            }
        }
    }

the static loader works. For the animated loader there are no error messages logged and the model is loaded, but its static and the animation isnt played.

EDIT:
The problem was that I wasnt updating the animation mixer in my update loop. Here is what I did to solve it:

RAF() {
        requestAnimationFrame((t) => {
            if (this._previousRAF === null) {
                this._previousRAF = t;
              }
        
              this.RAF();
        
              this._threejs.render(this._scene, this._camera);
              this.Step(t - this._previousRAF);
              this._previousRAF = t;
        })
    }
    Step(timeElapsed) {
        const timeElapsedS = timeElapsed * 0.001;
        if (this._mixers) {
          this._mixers.map(m => m.update(timeElapsedS));
        }
    }
2

Are you updating the animation mixers in your animation loop? If so, how does this code look like?

3

I’m not. how do go about doing that?

4

nvm, I figured it out. thanks for the tip

5

For everybody who finds this issue, a single mixer is usually updated in the animation loop like so:

const delta = clock.getDelta();

if ( mixer ) mixer.update( delta );

clock is an instance of THREE.Clock.