ThreeJS Animation Systems

You may animate many aspects of your models with the three.js animation system, including the bones of a skinned and rigged model, morph targets, multiple material properties (colours, opacity, booleans), visibility, and transforms. Fade in, fade out, crossfaded, and warped animation qualities are all possible. The weight and time scales of separate simultaneous animations on the same item as well as on other objects can be modified individually. It is possible to synchronise many animations on the same and separate objects.

The three.js animation system was fully redesigned in 2015 to achieve all of this in a single homogeneous framework, and it now has an architecture comparable to Unity/Unreal Engine 4. This page provides a quick overview of the system's primary components and how they interact.

Animation Clips

If you successfully imported an animated 3D object (whether it has bones, morph targets, or both) — for example, by exporting it from Blender with the glTF Blender exporter and loading it into a three.js scene with GLTFLoader — one of the response fields should be an array named "animations," which contains the AnimationClips for this model (see a list of possible loaders below).

The data for a certain object action is normally stored in each AnimationClip. For example, if the mesh represents a character, there may be one AnimationClip for walking, another for jumping, a third for sidestepping, and so on.

Keyframe Tracks

Each animated property's data is saved in a single KeyframeTrack within such an AnimationClip. If a character object contains a skeleton, one keyframe track may store data for position changes of the lower arm bone over time, another track could store data for rotation changes of the same bone, a third track could store data for track position, rotation, or scale of another bone, and so on. It should go without saying that an AnimationClip can be made up of multiple such tracks.

If the model has morph targets, each track contains information about how the influence of each morph target varies during the clip's performance.

Animation Mixer

The saved data simply serves as a foundation for the animations; the AnimationMixer is in charge of the actual playing. You might envisage this as more than just an animation player; it may also be a simulation of hardware, such as a real mixer console, that can manage multiple animations at once, blending and merging them.

Animation Actions

Because the AnimationMixer is controlled by the AnimationActions, it only contains a few (generic) properties and methods. By configuring an AnimationAction, you can specify when a specific AnimationClip should be played, paused, or stopped on one of the mixers, as well as whether and how often the clip should be repeated, whether it should be performed with a fade or time scaling, and other options like crossfading and synchronising.

Animation Object Groups

If you want a group of objects to receive a shared animation state, you can use an AnimationObjectGroup.

Example

let mesh;


// Create an AnimationMixer, and get the list of AnimationClip instances
const mixer = new THREE.AnimationMixer( mesh );
const clips = mesh.animations;


// Update the mixer on each frame
function update () {
	mixer.update( deltaSeconds );
}


// Play a specific animation
const clip = THREE.AnimationClip.findByName( clips, 'dance' );
const action = mixer.clipAction( clip );
action.play();


// Play all animations
clips.forEach( function ( clip ) {
	mixer.clipAction( clip ).play();
} );