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 to the GPU.

Data is stored as vectors of any length (defined by itemSize), and in general, if an index is passed in, it is automatically multiplied by the vector length in the methods outlined below.

Constructor

BufferAttribute( array : TypedArray, itemSize : Integer, normalized : Boolean )

array -- Must be a TypedArray. Used to instantiate the buffer.

This array should have

itemSize * numVertices

elements, where numVertices is the number of vertices in the associated BufferGeometry.

itemSize -- the number of values of the array that should be associated with a particular vertex.

normalized -- (optional) Applies to integer data only. Indicates how the underlying data in the buffer maps to the values in the GLSL code.

Properties

.array : TypedArray

The array holding data stored in the buffer.

.count : Integer

Stores the array's length divided by the itemSize.

If the buffer is storing a 3-component vector (such as a position, normal, or color), then this will count the number of such vectors stored.

.itemSize : Integer

The length of vectors that are being stored in the array.

.name : String

Optional name for this attribute instance. Default is an empty string.

.needsUpdate : Boolean

Flag to indicate that this attribute has changed and should be re-sent to the GPU. Set this to true when you modify the value of the array.

Setting this to true also increments the version.

.normalized : Boolean

Indicates how the underlying data in the buffer maps to the values in the GLSL shader code. See the constructor above for details.

.onUploadCallback : Function

A callback function that is executed after the Renderer has transferred the attribute array data to the GPU.

.updateRange : Object

Object containing:

offset: Default is 0. Position at which to start update.

count: Default is -1, which means don't use update ranges.

This can be used to only update some components of stored vectors (for example, just the component related to color).

.usage : Usage

Defines the intended usage pattern of the data store for optimization purposes. Corresponds to the usage parameter of WebGLRenderingContext.bufferData(). Default is StaticDrawUsage. See usage constants for all possible values.

.version : Integer

A version number, incremented every time the needsUpdate property is set to true.

Methods

.applyMatrix3 ( m : Matrix3 ) : this

Applies matrix m to every Vector3 element of this BufferAttribute.

.applyMatrix4 ( m : Matrix4 ) : this

Applies matrix m to every Vector3 element of this BufferAttribute.

.applyNormalMatrix ( m : Matrix3 ) : this

Applies normal matrix m to every Vector3 element of this BufferAttribute.

.transformDirection ( m : Matrix4 ) : this

Applies matrix m to every Vector3 element of this BufferAttribute, interpreting the elements as a direction vectors.

.clone () : BufferAttribute

Return a copy of this bufferAttribute.

.copy ( bufferAttribute : BufferAttribute ) : this

Copies another BufferAttribute to this BufferAttribute.

.copyArray ( array ) : this

Copy the array given here (which can be a normal array or TypedArray) into array.

See TypedArray.set for notes on requirements if copying a TypedArray.

.copyAt ( index1 : Integer, bufferAttribute : BufferAttribute, index2 : Integer ) : this

Copy a vector from bufferAttribute[index2] to array[index1].

.copyColorsArray ( colors : Array ) : this

Copy an array representing RGB color values into array.

.copyVector2sArray ( vectors : Array ) : this

Copy an array representing Vector2s into array.

.copyVector3sArray ( vectors : Array ) : this

Copy an array representing Vector3s into array.

.copyVector4sArray ( vectors : Array ) : this

Copy an array representing Vector4s into array.

.getX ( index : Integer ) : Number

Returns the x component of the vector at the given index.

.getY ( index : Integer ) : Number

Returns the y component of the vector at the given index.

.getZ ( index : Integer ) : Number

Returns the z component of the vector at the given index.

.getW ( index : Integer ) : Number

Returns the w component of the vector at the given index.

.onUpload ( callback : Function ) : this

Sets the value of the onUploadCallback property.

In the WebGL / Buffergeometry this is used to free memory after the buffer has been transferred to the GPU.

.set ( value : Array, offset : Integer ) : this

value -- an Array or TypedArray from which to copy values.

offset -- (optional) index of the array at which to start copying.

Calls TypedArray.set( value, offset ) on the array.

In particular, see that page for requirements on value being a TypedArray.

.setUsage ( value : Usage ) : this

Set usage to value. See usage constants for all possible input values.

.setX ( index : Integer, x : Float ) : this

Sets the x component of the vector at the given index.

.setY ( index : Integer, y : Float ) : this

Sets the y component of the vector at the given index.

.setZ ( index : Integer, z : Float ) : this

Sets the z component of the vector at the given index.

.setW ( index : Integer, w : Float ) : this

Sets the w component of the vector at the given index.

.setXY ( index : Integer, x : Float, y : Float ) : this

Sets the x and y components of the vector at the given index.

.setXYZ ( index : Integer, x : Float, y : Float, z : Float ) : this

Sets the x, y and z components of the vector at the given index.

.setXYZW ( index : Integer, x : Float, y : Float, z : Float, w : Float ) : this

Sets the x, y, z and w components of the vector at the given index.


Related Topics

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

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