Three.js Tutorial

Three.js Tutorial Three.js Installation Compatibility and Running Locally Three.js Lines and Texts Three.js Loading 3D Models Three.js Updating Things Three.js Disposing of an Object Three.js Creating VR Content Three.js Using post-processing Three.js Matrix Transformations Three.js Animation Systems Three.js Testing with NPM Three.js AnimationAction Three.js AnimationClip Three.js AnimationMixer Animation Object Group and Utils Three.js Keyframe Track Property Binding and Mixer Three.js Animation/ Tracks Three.js Audio Three.js Camera Three.js Buffer Attribute Three.js Buffer Geometry Three.js Interleaved Buffer Three.js Layers Three.js Object3D Three.js Raycaster Three.js Uniform Three.js Curves Three.js Geometries- 1 Three.js Helpers- 1 Three.js Helpers- 2 Three.js Lights Three.js Shadows Three.js Loaders- 1 Three.js Loaders- 2 Three.js Managers Three.js Materials Three.js Materials- Mesh Three.js Materials- 3 Three.js Math Three.js Interpolant Three.js Objects Three.js Renderers Three.js Scenes

ThreeJS AnimationClip
2022-04-29 09:56:49

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.