Capítulo 23 de 859

Chapter 23: BufferGeometry

Core Idea

A representation of mesh, line, or point geometry. Includes vertex positions, face indices, normals, colors, UVs, and custom attributes within buffers, reducing the cost of passing all this data to the GPU.

Key Concepts

  • attributes : Object.<string, (BufferAttribute|InterleavedBufferAttribute)>: This dictionary has as id the name of the attribute to be set and as value the buffer attribute to set it to. Rather than accessing this pr…
  • boundingBox : Box3: Bounding box for the geometry which can be calculated with computeBoundingBox().
  • boundingSphere : Sphere: Bounding sphere for the geometry which can be calculated with computeBoundingSphere().
  • drawRange : Object: Determines the part of the geometry to render. This should not be set directly, instead use setDrawRange().
  • groups : Array.<Object>: Split the geometry into groups, each of which will be rendered in a separate draw call. This allows an array of materials to be used with t…
  • id : number (readonly): The ID of the geometry.
  • index : BufferAttribute: Allows for vertices to be re-used across multiple triangles; this is called using "indexed triangles". Each triangle is associated with the…
  • indirect : BufferAttribute: A (storage) buffer attribute which was generated with a compute shader and now defines indirect draw calls.
  • indirectOffset : number | Array.<number>: The offset, in bytes, into the indirect drawing buffer where the value data begins. If an array is provided, multiple indirect draw calls w…
  • isBufferGeometry : boolean (readonly): This flag can be used for type testing.

Code Examples

const geometry = new THREE.BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
const vertices = new Float32Array( [
	-1.0, -1.0,  1.0, // v0
	 1.0, -1.0,  1.0, // v1
	 1.0,  1.0,  1.0, // v2
	 1.0,  1.0,  1.0, // v3
	-1.0,  1.0,  1.0, // v4
	-1.0, -1.0,  1.0  // v5
] );
// itemSize = 3 because there are 3 values (components) per vertex
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const mesh = new THREE.Mesh( geometry, material );
  • What it demonstrates: Typical usage of BufferGeometry.

Reference Tables

Constructor

Signature
new BufferGeometry()

Properties

PropertyDescription
`.attributes : Object.<string, (BufferAttributeInterleavedBufferAttribute)>`
.boundingBox : Box3Bounding box for the geometry which can be calculated with computeBoundingBox().
.boundingSphere : SphereBounding sphere for the geometry which can be calculated with computeBoundingSphere().
.drawRange : ObjectDetermines the part of the geometry to render. This should not be set directly, instead use setDrawRange().
.groups : Array.<Object>Split the geometry into groups, each of which will be rendered in a separate draw call. This allows an array of materials to be used with the geometry.
.id : number (readonly)The ID of the geometry.
.index : BufferAttributeAllows for vertices to be re-used across multiple triangles; this is called using "indexed triangles". Each triangle is associated with the indices of three vertices. This attribute therefore stores …
.indirect : BufferAttributeA (storage) buffer attribute which was generated with a compute shader and now defines indirect draw calls.
`.indirectOffset : numberArray.<number>`
.isBufferGeometry : boolean (readonly)This flag can be used for type testing.
.morphAttributes : ObjectThis dictionary holds the morph targets of the geometry.
.morphTargetsRelative : booleanUsed to control the morph target behavior; when set to true, the morph target data is treated as relative offsets, rather than as absolute positions/normals.
.name : stringThe name of the geometry.
.userData : ObjectAn object that can be used to store custom data about the geometry. It should not hold references to functions as these will not be cloned.
.uuid : string (readonly)The UUID of the geometry.

Methods

MethodDescription
.addGroup( start : number, count : number, materialIndex : number )Adds a group to this geometry.
.applyMatrix4( matrix : Matrix4 ) : BufferGeometryApplies the given 4x4 transformation matrix to the geometry.
.applyQuaternion( q : Quaternion ) : BufferGeometryApplies the rotation represented by the Quaternion to the geometry.
.center() : BufferGeometryCenter the geometry based on its bounding box.
.clearGroups()Clears all groups.
.clone() : BufferGeometryReturns a new geometry with copied values from this instance.
.computeBoundingBox()Computes the bounding box of the geometry, and updates the boundingBox member. The bounding box is not computed by the engine; it must be computed by your app. You may need to recompute the boundin…
.computeBoundingSphere()Computes the bounding sphere of the geometry, and updates the boundingSphere member. The engine automatically computes the bounding sphere when it is needed, e.g., for ray casting or view frustum c…
.computeTangents()Calculates and adds a tangent attribute to this geometry.
.computeVertexNormals()Computes vertex normals for the given vertex data. For indexed geometries, the method sets each vertex normal to be the average of the face normals of the faces that share that vertex. For non-indexe…
.copy( source : BufferGeometry ) : BufferGeometryCopies the values of the given geometry to this instance.
.deleteAttribute( name : string ) : BufferGeometryDeletes the attribute for the given name.
.dispose()Frees the GPU-related resources allocated by this instance. Call this method whenever this instance is no longer used in your app.
`.getAttribute( name : string ) : BufferAttributeInterleavedBufferAttribute
.getIndex() : BufferAttributeReturns the index of this geometry.
.getIndirect() : BufferAttributeReturns the indirect attribute of this geometry.
.hasAttribute( name : string ) : booleanReturns true if this geometry has an attribute for the given name.
.lookAt( vector : Vector3 ) : BufferGeometryRotates the geometry to face a point in 3D space. This is typically done as a one time operation, and not during a loop. Use Object3D#lookAt for typical real-time mesh rotatio…
.normalizeNormals()Ensures every normal vector in a geometry will have a magnitude of 1. This will correct lighting on the geometry surfaces.
.rotateX( angle : number ) : BufferGeometryRotates the geometry about the X axis. This is typically done as a one time operation, and not during a loop. Use Object3D#rotation for typical real-time mesh rotation.
.rotateY( angle : number ) : BufferGeometryRotates the geometry about the Y axis. This is typically done as a one time operation, and not during a loop. Use Object3D#rotation for typical real-time mesh rotation.
.rotateZ( angle : number ) : BufferGeometryRotates the geometry about the Z axis. This is typically done as a one time operation, and not during a loop. Use Object3D#rotation for typical real-time mesh rotation.
.scale( x : number, y : number, z : number ) : BufferGeometryScales the geometry. This is typically done as a one time operation, and not during a loop. Use Object3D#scale for typical real-time mesh rotation.
`.setAttribute( name : string, attribute : BufferAttributeInterleavedBufferAttribute ) : BufferGeometry`
.setDrawRange( start : number, count : number )Sets the draw range for this geometry.
`.setFromPoints( points : Array.<Vector2>Array.<Vector3> ) : BufferGeometry`
`.setIndex( index : Array.<number>BufferAttribute ) : BufferGeometry`
`.setIndirect( indirect : BufferAttribute, indirectOffset : numberArray.<number> ) : BufferGeometry`
.toJSON() : ObjectSerializes the geometry into JSON.
.toNonIndexed() : BufferGeometryReturn a new non-index version of this indexed geometry. If the geometry is already non-indexed, the method is a NOOP.
.translate( x : number, y : number, z : number ) : BufferGeometryTranslates the geometry. This is typically done as a one time operation, and not during a loop. Use Object3D#position for typical real-time mesh rotation.

Key Takeaways

  1. BufferGeometry extends: EventDispatcher
  2. Most relevant properties: attributes, boundingBox, boundingSphere, drawRange.
  3. Key methods: addGroup, applyMatrix4, applyQuaternion, center.

Connects To