Search code examples
javascriptanimationthree.jsmixamo

Three.js FBX model animation stuck on first frame


I have an FBX model of a character. I also downloaded a simple walking animation from Mixamo, without skin. Here is how I am loading the character and animation:

const loader = new THREE.FBXLoader();
let mixer;
loader.load( 'Assets/T-Pose.fbx', function ( object ) {

    let anim = new THREE.FBXLoader();
    anim.load('Assets/Walking.fbx', function(anim){
        mixer = new THREE.AnimationMixer(object);
        let walking = mixer.clipAction(anim.animations[0]);
        walking.play();
    })

    scene.add( object );

} );

In my render loop, I just update the mixer.

function render(){
    ...
    if (mixer) mixer.update();
}

When I load up my scene, though this is what I see:

Unexpected

The character is stuck on this frame and is not continuing the rest of the animation. What did I do wrong here?


Solution

  • When calling mixer.update(), you need to give it the time passed in seconds:

    const clock = new THREE.Clock();
    
    function render(){
      ...
      let mixerUpdateDelta = clock.getDelta();
      if (mixer) mixer.update(mixerUpdateDelta);
    }
    

    You can see the three.js documentation about animation: https://threejs.org/docs/?q=animation#manual/en/introduction/Animation-system