Logo

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 boolean keyframe values.

Constructor

BooleanKeyframeTrack( name : String, times : Array, values : Array )

name - (required) identifier for the KeyframeTrack.

times - (required) array of keyframe times.

values - values for the keyframes at the times specified.

Properties

It inherits its properties from Keyframe Track, refer to previous lessons. The unique properties are as follows:

.DefaultInterpolation : Constant

The default interpolation type to use, InterpolateDiscrete.

.ValueBufferType : Array

A normal Array (no Float32Array in this case, unlike ValueBufferType of KeyframeTrack).

.ValueTypeName : String

String 'bool'.

Methods

The BooleanKeyframeTrack inherits methods from KeyframeTrack that you can refer in the previous lessons.

.InterpolantFactoryMethodLinear () : undefined

The value of this method here is 'undefined', as it does not make sense for discrete properties.

.InterpolantFactoryMethodSmooth () : undefined

The value of this method here is 'undefined', as it does not make sense for discrete properties.

ColorKeyframeTrack

Color changes are represented via a track of keyframe values.

This subclass's very basic implementation has nothing noteworthy yet. This is, however, the location for colour space parameterization.

Constructor

ColorKeyframeTrack( name : String, times : Array, values : Array )

name - (required) identifier for the KeyframeTrack.

times - (required) array of keyframe times.

values - values for the keyframes at the times specified, a flat array of color components between 0 and 1.

interpolation - the type of interpolation to use.

NumberKeyframeTrack

A Track of numeric keyframe values.

Constructor

NumberKeyframeTrack( name : String, times : Array, values : Array )

name - (required) identifier for the KeyframeTrack.

times - (required) array of keyframe times.

values - values for the keyframes at the times specified.

interpolation - the type of interpolation to use.

QuarterionKeyframeTrack

A Track of quaternion keyframe values.

Constructor

QuaternionKeyframeTrack( name : String, times : Array, values : Array )

name (required) identifier for the KeyframeTrack.

times (required) array of keyframe times.

values for the keyframes at the times specified, a flat array of quaternion components.

interpolation is the type of interpolation to use.

Properties and Methods

It inherits the properties and methods of KeyframTrack. The unique ones are as follows:

.DefaultInterpolation : Constant

The default interpolation type to use, InterpolateLinear.

.ValueTypeName : String

String 'quaternion'.

.InterpolantFactoryMethodLinear () : QuaternionLinearInterpolant

Returns a new QuaternionLinearInterpolant based on the values, times and valueSize of the keyframes.

StringKeyframeTrack

A Track of string keyframe values.

Constructor

StringKeyframeTrack( name : String, times : Array, values : Array )

name - (required) identifier for the KeyframeTrack.

times - (required) array of keyframe times.

values - values for the keyframes at the times specified.

interpolation - the type of interpolation to use.

Properties and Methods

It inherits the properties and methods of KeyframTrack. The unique ones are as follows:

.DefaultInterpolation : Constant

The default interpolation type to use, InterpolateDiscrete.

.ValueBufferType : Array

A normal Array (no Float32Array in this case, unlike ValueBufferType of KeyframeTrack).

.ValueTypeName : String

String 'string'.

.InterpolantFactoryMethodLinear () : undefined

The value of this method here is 'undefined', as it does not make sense for discrete properties.

.InterpolantFactoryMethodSmooth () : undefined

The value of this method here is 'undefined', as it does not make sense for discrete properties.

VectorKeyframeTrack

A Track of vector keyframe values.

Constructor

VectorKeyframeTrack( name : String, times : Array, values : Array )

name - (required) identifier for the KeyframeTrack.

times - (required) array of keyframe times.

Values - values for the keyframes at the times specified a flat array of vector components.

Interpolation - the type of interpolation to use.

Related Topics

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 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),...

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 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 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 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 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 Math

Box2 Represents an axis-aligned bounding box (AABB) in 2D space. Constructor Box2( min : Vector2, max : Vector2 ) min - (optional) Vector2 representing the lower (x, y) boundary of the box. Default is...

48 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 Installation

You can use npm and modern build tools to install three.js, or you can get started quickly with static hosting or a CDN. Installing from npm is the best option...

4 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 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 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 Objects

Bone A bone that is part of a Skeleton. The skeleton in turn is used by the SkinnedMesh. Bones are almost identical to a blank Object3D. Code Example const root = new THREE.Bone(); const...

12 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 Interpolant

CubicInterpolant Code Example const interpolant = new THREE.CubicInterpolant(new Float32Array( 2 ),new Float32Array( 2 ),1,new Float32Array( 1 ));interpolant.evaluate( 0.5 ); Constructor CubicInterpolant( parameterPositions, sampleValues, sampleSize, resultBuffer ) parameterPositions -- array of positions sampleValues -- array of samples sampleSize...

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

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