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 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 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 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 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 Helper 1

ArrowHelper A 3D arrow object for visualizing directions. Code Example const dir = new THREE.Vector3( 1, 2, 0 ); //normalize the direction vector (convert to vector of length 1) dir.normalize(); const origin = new THREE.Vector3( 0,...

5 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 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 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 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 Scenes

Fog This class contains the parameters that define linear fog, i.e., that grows linearly denser with the distance. Constructor Fog( color : Integer, near : Float, far : Float ) The color parameter is...

3 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 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 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 BufferGeometry

A mesh, line, or point geometry representation. Included within buffers are vertex positions, face indices, normals, colours, UVs, and custom attributes, lowering the cost of passing all of this data...

5 minutes read.

ThreeJS Material - Mesh

MeshBasicMaterial A material for drawing geometries in a simple shaded (flat or wireframe) way. This material is not affected by lights. Constructor MeshBasicMaterial( parameters : Object ) parameters - (optional) an object with one or...

24 minutes read.

ThreeJS Materials 3

RawShaderMaterial This class works just like ShaderMaterial, except that definitions of built-in uniforms and attributes are not automatically prepended to the GLSL shader code. Code Example const material = new THREE.RawShaderMaterial( {    ...

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

ImageBitmapLoader A loader that converts an image to an ImageBitmap. An ImageBitmap provides an asynchronous and resource-efficient path for preparing textures for WebGL rendering. ImageBitmapLoader, unlike FileLoader, does not prevent multiple concurrent...

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