In the previous sections, we've explored basic animation techniques like interpolating properties over time. While effective for simple movements, real-world 3D applications often require more sophisticated animation systems. This is where Three.js's Animation Mixers come into play. They provide a powerful framework for managing and playing back complex animations, especially those exported from 3D modeling software like Blender.
Think of an Animation Mixer as a conductor for your 3D character's or object's animations. It takes an 'AnimationClip' (which is essentially a description of how properties change over time) and applies it to a 'skinned mesh' or another object. A single model can have multiple animations (e.g., 'walk', 'run', 'jump'), and the mixer allows you to seamlessly switch between them, blend them, and control their playback speed and looping.
To use Animation Mixers, you typically follow these steps:
- Load your animated model: This is usually done using a loader like
GLTFLoaderwhich can handle models with embedded animations. The loaded object will often contain ananimationsarray and potentially asceneorgetObjectByName()method to access the mesh.
const loader = new GLTFLoader();
loader.load('path/to/your/animated_model.glb', (gltf) => {
const model = gltf.scene;
const animations = gltf.animations;
// ... proceed to setup animation mixer
});- Create an Animation Mixer: Instantiate an
AnimationMixerand pass in the loaded scene or mesh that you want to animate. This mixer will be responsible for managing all animations applied to that object.
const mixer = new AnimationMixer(model);
// or if you have a specific skinned mesh:
// const skinnedMesh = model.getObjectByName('yourMeshName');
// const mixer = new AnimationMixer(skinnedMesh);- Create an Animation Action: For each animation you want to play, you need to create an 'Action' from the mixer using an
AnimationClip. Actions represent the playback of a specific animation and provide methods for controlling it.
const animationClip = animations[0]; // Assuming the first animation is the one we want
const action = mixer.clipAction(animationClip);- Configure and Play the Action: You can set properties like
loop,timeScale,weight, andrepetitionsfor each action. Then, youplay()the action to start the animation.
action.loop = LoopRepeat;
action.timeScale = 1;
action.play();- Update the Mixer in the Animation Loop: This is crucial! In your main animation loop (e.g.,
requestAnimationFrame), you must call theupdate()method of the mixer, passing in the elapsed time since the last frame. This tells the mixer to advance all its active animations.
let lastTime = 0;
function animate(currentTime) {
const deltaTime = (currentTime - lastTime) / 1000;
mixer.update(deltaTime);
lastTime = currentTime;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate(0);graph TD
A[Load Model with Animations] --> B(Create AnimationMixer)
B --> C{For each AnimationClip}
C --> D(Create AnimationAction)
D --> E{Configure Action (Loop, Playback)}
E --> F(Play Action)
F --> G[Animation Loop]
G --> H(Update Mixer with Delta Time)
H --> I(Render Scene)
I --> G
By mastering Animation Mixers, you unlock the ability to bring highly detailed and realistic animations to your Three.js projects, transforming static scenes into dynamic and engaging experiences.