BufferGeometry

BufferGeometry

3D虚拟工厂在线体验

描述

• BufferGeometry 是 Three.js 中用于描述面（Mesh）、线（Line）或点（Point）几何体的高效数据结构。它通过缓存属性（Buffer Attributes）存储以下几何数据：顶点位置（Position）、面索引（Index）、法向量（Normal）、颜色值（Color）、UV 坐标（UV）、自定义属性（Custom Attributes）
• 与传统的 Geometry 相比，BufferGeometry 直接以二进制缓冲形式（如 Float32Array）存储数据，显著减少了向 GPU 传输数据时的性能开销，适用于处理大规模或动态几何体。

构造函数

语法	描述
BufferGeometry()	创建一个新的 BufferGeometry，预置属性设置为默认值。

属性

属性	类型	描述
.attributes	Object	存储几何体相关属性的哈希表，键为属性名，值为对应的 BufferAttribute。
.boundingBox	Box3	几何体的外边界矩形，通过 .computeBoundingBox() 计算，默认 null。
.boundingSphere	Sphere	几何体的外边界球形，通过 .computeBoundingSphere() 计算，默认 null。
.drawRange	Object	控制渲染范围，格式为 { start: 0, count: Infinity }。非索引几何体为顶点数，索引几何体为索引数。
.groups	Array	分割几何体为多个渲染组，每组格式为 { start, count, materialIndex }。
.id	Integer	几何体的唯一编号。
.index	BufferAttribute	顶点索引数据（用于重用顶点），默认 null。
.isBufferGeometry	Boolean	只读标记，判断对象是否为 BufferGeometry。
.morphAttributes	Object	存储 morph targets 的 BufferAttribute 哈希表。注意：渲染后不可修改。
.morphTargetsRelative	Boolean	控制 morph target 数据是否为相对偏移（默认 false）。
.name	String	几何体别名（默认空字符串）。
.userData	Object	存储自定义数据的对象（避免包含函数引用）。
.uuid	String	自动生成的实例 UUID（不可修改）。

方法

方法	参数	返回	描述
.addGroup(start, count, materialIndex)	start: 起始索引 count: 元素数量 materialIndex: 材质索引	undefined	添加一个渲染组。
.applyMatrix4(matrix)	matrix: 变换矩阵	this	应用矩阵变换到顶点坐标。
.applyQuaternion(quaternion)	quaternion: 旋转四元数	this	应用四元数旋转到顶点坐标。
.center()	-	this	根据边界矩形将几何体居中。
.clearGroups()	-	undefined	清空所有渲染组。
.clone()	-	BufferGeometry	克隆当前几何体。
.computeBoundingBox()	-	undefined	计算几何体的边界矩形（更新 .boundingBox）。
.computeBoundingSphere()	-	undefined	计算几何体的边界球形（更新 .boundingSphere）。
.computeTangents()	-	undefined	计算切线属性（需索引化且含 position/normal/uv）。
.computeVertexNormals()	-	undefined	通过面法线平均值计算顶点法线。
.copy(bufferGeometry)	bufferGeometry: 源几何体	this	拷贝参数几何体的值到当前几何体。
.deleteAttribute(name)	name: 属性名	BufferAttribute	删除指定属性。
.dispose()	-	undefined	释放内存。
.getAttribute(name)	name: 属性名	BufferAttribute	返回指定属性。
.getIndex()	-	BufferAttribute	返回索引数据。
.hasAttribute(name)	name: 属性名	Boolean	检查属性是否存在。
.lookAt(vector)	vector: 目标世界坐标	this	旋转几何体朝向指定点。
.normalizeNormals()	-	undefined	归一化法向量（长度为 1）。
.rotateX(radians)	radians: 旋转弧度	this	绕 X 轴旋转几何体。
.rotateY(radians)	radians: 旋转弧度	this	绕 Y 轴旋转几何体。
.rotateZ(radians)	radians: 旋转弧度	this	绕 Z 轴旋转几何体。
.scale(x, y, z)	x, y, z: 缩放因子	this	缩放几何体。
.setAttribute(name, attribute)	name: 属性名 attribute: 属性值	this	设置几何体属性。
.setDrawRange(start, count)	start: 起始索引 count: 元素数量	undefined	设置渲染范围。
.setFromPoints(points)	points: Vector2/Vector3 数组	this	从点数组设置位置属性。
.setIndex(index)	index: 索引数据	this	设置索引数据。
.toJSON()	-	Object	返回符合 JSON 规范的几何体数据。
.toNonIndexed()	-	BufferGeometry	返回非索引版本的几何体。
.translate(x, y, z)	x, y, z: 移动距离	this	平移几何体。

代码

const geometry = new THREE.BufferGeometry();
// 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
// 因为在两个三角面片里，这两个顶点都需要被用到。
const vertices = new Float32Array( [
	-1.0, -1.0,  1.0,
	 1.0, -1.0,  1.0,
	 1.0,  1.0,  1.0,

	 1.0,  1.0,  1.0,
	-1.0,  1.0,  1.0,
	-1.0, -1.0,  1.0
] );
// itemSize = 3 因为每个顶点都是一个三元组。
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const mesh = new THREE.Mesh( geometry, material );

//-----------------索引Index例子----------------------
const geometry = new THREE.BufferGeometry();
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
] );
const indices = [
	0, 1, 2,
	2, 3, 0,
];
geometry.setIndex( indices );
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const mesh = new THREE.Mesh( geometry, material );