ThreeJS AnimationClip

An AnimationClip is a group of keyframe tracks that may be reused to depict an animation.

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

AnimationClip( name : String, duration : Number, tracks : Array )

name - a name for this clip.

duration - the duration of this clip (in seconds). If a negative value is passed, the duration will be calculated from the passed tracks array.

tracks - an array of KeyframeTracks.

Note: If your model doesn't already hold AnimationClips in its geometry's animations array, you can use one of its static methods to create AnimationClips: from JSON (parse), from morph target sequences (CreateFromMorphTargetSequence, CreateClipsFromMorphTargetSequences), or from animation hierarchies (parseAnimation).

Properties

.duration : Number

The duration of this clip (in seconds). This can be calculated from the tracks array via resetDuration.

.name : String

A name for this clip. A certain clip can be searched via findByName.

.tracks : Array

An array containing a KeyframeTrack for each property that are animated by this clip.

.uuid : String

The UUID of this clip instance. It gets automatically assigned and shouldn't be edited.

.clone () : AnimationClip

Returns a copy of this clip.

.optimize () : this

Optimizes each track by removing equivalent sequential keys (which are common in morph target sequences).

.resetDuration () : this

Sets the duration of the clip to the duration of its longest KeyframeTrack.

.toJSON () : Object

Returns a JSON object representing the serialized animation clip.

.trim () : this

Trims all tracks to the clip's duration.

.validate () : Boolean

Performs minimal validation on each track in the clip. Returns true if all tracks are valid.

Static Methods

.CreateClipsFromMorphTargetSequences ( name : String, morphTargetSequence : Array, fps : Number, noLoop : Boolean ) : Array

Returns an array of new AnimationClips made from a geometry's morph target sequences, attempting to order morph target names into animation-group-based patterns such as "Walk 001, Walk 002, Run 001, Run 002..."

.CreateFromMorphTargetSequence ( name : String, morphTargetSequence : Array, fps : Number, noLoop : Boolean ) : AnimationClip

Returns a new AnimationClip with a name and the number of frames per second from the passed morph targets array of a geometry.

Note that while the fps parameter is essential, animationAction.setDuration can be used to override the animation speed in an AnimationAction.

.findByName ( objectOrClipArray : Object, name : String ) : AnimationClip

Takes either an array of AnimationClips or a mesh or geometry that contains an array named "animations" as its first parameter and searches for an AnimationClip by name.

.parse ( json : Object ) : AnimationClip

Parses a JSON representation of a clip and returns an AnimationClip.

.parseAnimation ( animation : Object, bones : Array ) : AnimationClip

Parses the animation.hierarchy format and returns an AnimationClip.

.toJSON ( clip : AnimationClip ) : Object

Takes an AnimationClip and returns a JSON object.


Related Topics

ThreeJS InterleavedBuffer

The term "interleaved" refers to the packing of multiple attributes, possibly of different types (e.g., position, normal, uv, colour) into a single array buffer. Constructor InterleavedBuffer( array : TypedArray, stride : Integer...

3 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 Testing with npm

This article explains how to install three.js in a node.js environment so that automated tests may be run. Tests can be done manually or with the help of automated CI...

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 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 Tracks and Animation

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. BooleanKeyframeTrack A Track of...

3 minutes read.

ThreeJS Helpers 2

PolarGridHelper The PolarGridHelper is an object to define polar grids. Grids are two-dimensional arrays of lines. Code Example const radius = 10; const radials = 16; const circles = 8; const divisions = 64; const helper =...

4 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 AnimationObjectGroup and Utils

AnimationObjectGroup A group of objects that receives a shared animation state. Usage Add items you'd normally send as 'root' to AnimationMixer's function Object() { [native code] } or clipAction method, and instead pass...

2 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 Managers

DefaultLoadingManager When no custom manager is specified, most loaders use a global instance of the LoadingManager. This will suffice for most purposes, but there may be times when you want separate loading...

4 minutes read.

ThreeJS Material

Abstract base class for materials. Materials describe the appearance of objects. They are defined in a (mostly) renderer-independent way, so you don't have to rewrite materials if you decide to use...

6 minutes read.

ThreeJs Tutorial

What is Three.JS? Three.js is a cross-browser JavaScript library and application programming interface that uses WebGL to create and display animated 3D computer graphics in a web browser. The source code...

6 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 AnimationAction

AnimationActions are used to schedule the playback of animations saved in AnimationClips. Note that the majority of AnimationAction's methods can be chained together. The "Animation System" page in the "Next Steps" part...

6 minutes read.

ThreeJS Using post-processing

Many three.js applications render their 3D objects directly to the screen. Sometimes, however, you want to apply one or more graphical effects like Depth-Of-Field, Bloom, Film Grain or various types...

2 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.

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 Creating VR Content

This article gives a quick introduction of the main components of a three.js-based web-based VR application. Workflow      First, you have to include VRButton.js into your project. import { VRButton } from...

1 minute 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.