Three.js AnimationMixer plays and blends AnimationClips on a 3D object by being updated each frame with a delta time

The three.js animation system uses collaborating objects: AnimationClip (a data container for one activity — a walk cycle, a jump — whose per-property data are stored in separate KeyframeTracks), AnimationMixer (the runtime, imagined as a hardware mixer console that can control several animations simultaneously, blending and merging them on a root object), and AnimationAction (a handle that determines when a clip plays, pauses, stops, repeats, fades, or crossfades). To drive the mixer, mixer.update(deltaSeconds) must be called each frame in the render loop. AnimationClips are typically imported from GLTF models (via GLTFLoader), which expose them in loader.animations. OBJ format does not support animations.

Examples

const mixer = new THREE.AnimationMixer(model);
const clip = THREE.AnimationClip.findByName(model.animations, 'Walk');
const action = mixer.clipAction(clip);
action.play();
// In render loop:
const delta = clock.getDelta();
mixer.update(delta);

Assessment

Load a GLTF model with an ‘Idle’ and ‘Walk’ animation. Play ‘Idle’ and crossfade to ‘Walk’ when a key is pressed, using action.crossFadeTo(). Explain why mixer.update(delta) must use delta time rather than a fixed value.