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:
The character is stuck on this frame and is not continuing the rest of the animation. What did I do wrong here?
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