Chapter 801: Animation System (Manual)

Core Idea

Overview of how three.js's animation system (clips, tracks, mixer, actions) is organized, modeled after engines like Unity/Unreal, so you can play, blend, and control skeletal or morph-target animations.

Key Concepts

• AnimationClip: a named chunk of animation data for one activity (e.g. "walk", "jump") loaded from a model.
• KeyframeTrack: within a clip, the timeline of values for one animated property (a bone's position, a material color, etc.).
• AnimationMixer: plays back and blends clips on a target object, similar to a hardware mixing console.
• AnimationAction: controls playback of one clip on a mixer — play/pause/stop, looping, fading, and time scaling.
• AnimationObjectGroup: lets multiple objects share the same animation state.
• Format support: not all model formats or loaders carry multiple AnimationClips (OBJ notably doesn't); glTF via GLTFLoader is a reliable source.

Code Examples

let mesh;

const mixer = new THREE.AnimationMixer(mesh);
const clips = mesh.animations;

function update() {
  mixer.update(deltaSeconds);
}

const clip = THREE.AnimationClip.findByName(clips, "dance");
const action = mixer.clipAction(clip);
action.play();

• What it demonstrates: creating a mixer from a loaded object's clips and playing a specific animation by name.

Key Takeaways

1. Import an animated model (e.g. via GLTFLoader) to get an animations array of AnimationClips.
2. Create one AnimationMixer per animated object and call mixer.update(delta) every frame.
3. Use AnimationAction to control play/pause/loop/fade of individual clips on a mixer, including crossfading between them.
4. Confirm your source format and loader actually support multiple animation clips before relying on this system.

Connects To

• GLTFLoader: the most common way to bring in models with multiple animation clips.
• AnimationObjectGroup: referenced in this manual lesson for sharing animation state across objects.