Logo

ThreeJS AnimationMixer

The AnimationMixer is a player that allows you to play animations on a specific object in the scene. When many items in a scene are animated individually, each object may have its own AnimationMixer.

The "Animation System" page in the "Next Steps" part of the handbook provides an overview of the various elements of the three.js animation system.

Constructor

AnimationMixer( rootObject : Object3D )

rootObject - the object whose animations shall be played by this mixer.

Properties

.time : Number

The global mixer time (in seconds; starting with 0 on the mixer's creation).

.timeScale : Number

A scaling factor for the global mixer time.

Note: You can pause/unpause all activities controlled by this mixer by setting the mixer's timeScale to 0 and then back to 1.

Methods

.clipAction (clip : AnimationClip, optionalRoot : Object3D) : AnimationAction

Returns an AnimationAction for the provided clip, with the option to use a different root object than the mixer's default root. An AnimationClip object or the name of an AnimationClip can be used as the first parameter.

This method will build an action that fits the clip and root parameters if one doesn't already exist. When this method is called multiple times with the same clip and root arguments, the result is always the same clip instance.

.existingAction (clip : AnimationClip, optionalRoot : Object3D) : AnimationAction

Returns an existing AnimationAction for the provided clip, with the option of selecting a different root object than the mixer's default root.

An AnimationClip object or the name of an AnimationClip can be used as the first parameter.

.getRoot () : Object3D

Returns this mixer's root object.

.stopAllAction () : this

Deactivates all previously scheduled actions on this mixer.

.update (deltaTimeInSeconds : Number) : this

Advances the global mixer time and updates the animation.

This is usually done in the render loop, passing clock.getDelta scaled by the mixer's timeScale).

.setTime (timeInSeconds : Number) : this

The global mixer is set to a specified time and the animation is updated accordingly.

This comes in handy when you need to jump to a specific point in an animation. The timeScale of the mixer will scale the input parameter.

.uncacheClip (clip : AnimationClip) : undefined

All memory resources for a clip are released. Make sure to call AnimationAction.stop() for all connected actions before utilising this function.

.uncacheRoot (root : Object3D) : undefined

All memory resources for a root item are released. Make sure to call AnimationAction.stop() for all connected actions before utilising this function.

.uncacheAction (clip : AnimationClip, optionalRoot : Object3D) : undefined

All memory resources for an action are released. Make sure to call AnimationAction before utilising this function. To deactivate the action, use stop().

Related Topics

ThreeJS Raycaster

This class is intended to help with raycasting. Raycasting is used for a variety of purposes, including mouse picking (determining which objects in 3D space the mouse is over). Code Example const...

4 minutes read.

ThreeJS Loading 3D Models

There are hundreds of file formats for 3D models, each with its own purpose, set of features, and level of complexity. Although three.js has a lot of loaders, choosing the...

2 minutes read.

ThreeJS Matrix Transformations

Three.js encodes 3D transformations using matrices for translations (position), rotations, and scaling. Every Object3D instance has a matrix that records the location, rotation, and scale of the object. This page...

2 minutes read.

ThreeJS Curve

An abstract base class for creating a Curve object with interpolation methods. CurvePath is an array of Curves. Constructor Curve() This constructor creates a new Curve. Properties .arcLengthDivisions : Integer This value determines the amount of...

13 minutes read.

ThreeJS Renderers

WebGLMultipleRenderTargets A special render target that enables a fragment shader to write to several textures. This approach is useful for advanced rendering techniques like post-processing or deferred rendering. Heads up: WebGLMultipleRenderTargets...

15 minutes read.

ThreeJS Keyframe Track

A KeyframeTrack is a timed series of keyframes that are made up of lists of times and related values and are used to animate an object's unique property. The "Animation System"...

4 minutes read.

ThreeJS Lights

Light Abstract base class for lights - all other light types inherit the properties and methods described here. Constructor Light( color : Integer, intensity : Float ) color - (optional) hexadecimal color of the...

10 minutes read.

ThreeJS Lines and Texts

Drawing Lines Let's say you want to draw a line or a circle, not a wireframe Mesh. First, we need to set up the renderer, scene, and camera. Here is the...

3 minutes read.

ThreeJS Property Binding and Mixer

PropertyBinding Internally, this holds a reference to real property in the scene graph. Constructor PropertyBinding( rootNode : Object3D, path, parsedPath ) -- rootNode: -- path -- parsedPath (optional) Properties The properties are as follows: .path : Number.parsedPath...

2 minutes read.

ThreeJS BufferAttribute

This class stores data for an attribute associated with a BufferGeometry (such as vertex positions, face indices, normals, colours, UVs, and any custom attributes), allowing for more efficient data passing...

4 minutes read.

ThreeJS Geometries-1

BoxGeometry BoxGeometry is a geometry class for a rectangular cuboid with a given 'width', 'height', and 'depth'. On creation, the cuboid is centered on the origin, with each edge parallel to...

7 minutes read.

ThreeJS Audio

It is used to create a non-positional (global ) audio object. Code Example: // create an AudioListener and add it to the camera const listener = new THREE.AudioListener(); camera.add( listener ); // create a global...

6 minutes read.

ThreeJS Compatibiliy Check and Running Locally

Even though this is becoming less of an issue, some devices or browsers may still be incompatible with WebGL. The method below enables you to check if it is supported...

3 minutes read.

ThreeJS Layers

A Layers object assigns an Object3D to one or more of the 32 layers numbered 0 to 31 - the layers are internally stored as a bit mask, and all...

1 minute read.

ThreeJS Uniform

Uniforms are global GLSL variables. They are passed to shader programs. Code Example When declaring a uniform of a ShaderMaterial, it is declared by value or by object. uniforms: { time: { value: 1.0...

2 minutes read.

ThreeJS Object3D

This is the base class for most three.js objects, and it provides a set of properties and methods for manipulating objects in 3D space. It should be noted that this can...

9 minutes read.

ThreeJS Loader 1

AnimationLoader Class for loading AnimationClips in JSON format. This uses the FileLoader internally for loading files. Code Example // instantiate a loader const loader = new THREE.AnimationLoader(); // load a resource loader.load( // resource URL 'animations/animation.js', // onLoad callback function...

8 minutes read.

ThreeJS Cameras

ArrayCamera ArrayCamera can be used to render a scene using a preset group of cameras quickly. This is an important feature of VR scene rendering performance. An array of sub cameras is...

6 minutes read.

ThreeJS Shadows

LightShadow Serves as a base class for the other shadow classes. Constructor LightShadow( camera : Camera ) camera - the light's view of the world. Create a new LightShadow. This is not intended to be...

7 minutes read.

ThreeJS Updating Things

If an item has been added to the scene with the specified code, it will immediately update its matrices. const object = new THREE.Object3D(); scene.add( object ); or, if they are the child...

4 minutes read.