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 this object as 'root.'

Because the mixer sees all objects of this class as one, cache control of the individual objects must be done on the group.

Limitations

All of the items in the group must have the same animation attributes.

A single attribute can be controlled directly or through a target group, but not both.

Constructor

AnimationObjectGroup( obj1 : Object, obj2 : Object, obj3 : Object, ... )

obj - an abitrary number of meshes that share the same animation state.

Properties

.stats : Object

An object that holds some of the AnimationObjectGroup's information (total number, number in use, number of bindings per object)

.uuid : String

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

Methods

.add ( obj1 : Object, obj2 : Object, obj3 : Object, ... ) : undefined

Adds an arbitrary number of objects to this AnimationObjectGroup.

.remove ( obj1 : Object, obj2 : Object, obj3 : Object, ... ) : undefined

Removes an arbitrary number of objects from this AnimationObjectGroup.

.uncache ( obj1 : Object, obj2 : Object, obj3 : Object, ... ) : undefined

Deallocates all memory resources for the passed objects of this AnimationObjectGroup.

AnimationUtils

Internally, an object has several capabilities to aid with animations.

Methods

.arraySlice ( array, from, to ) : Array

This is the same as Array.prototype.slice, but also works on typed arrays.

.convertArray ( array, type, forceClone ) : Array

Converts an array to a specific type.

.flattenJSON ( jsonKeys, times, values, valuePropertyName ) : Array

Used for parsing AOS keyframe formats.

.getKeyframeOrder ( times ) : Array

Returns an array by which times and values can be sorted.

.isTypedArray ( object ) : Boolean

Returns true if the object is a typed array.

.makeClipAdditive ( targetClip : AnimationClip, referenceFrame : Number, referenceClip : AnimationClip, fps : Number ) : AnimationClip

Converts the keyframes of the given animation clip to an additive format.

.sortedArray ( values, stride, order ) : Array

Sorts the array previously returned by getKeyframeOrder.

.subclip ( clip : AnimationClip, name : String, startFrame : Number, endFrame : Number, fps : Number ) : AnimationClip

Creates a new clip that only contains the section of the original clip that occurs between the specified frames.


Related Topics

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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Disposing an Object

The disposal of unwanted library entities is a crucial component of improving performance and avoiding memory leaks in your programme. When you create a three.js type instance, you set aside...

4 minutes read.