登录
Three.js高效几何体创建指南：BufferGeometry深度解析
2025年4月1日 18:08
1. 为什么选择BufferGeometry？
在Three.js开发中，几何体创建是3D建模的基础。相比传统Geometry，BufferGeometry具有显著优势：
- 内存效率：采用TypedArray存储顶点数据，内存占用减少40%
- 渲染性能：直接对接WebGL缓冲区，减少CPU-GPU数据传输
- 灵活性：支持动态更新顶点数据
- 扩展性：可处理百万级顶点的复杂模型
2. 基础创建流程
2.1 创建空几何体
const geometry = new THREE.BufferGeometry();
2.2 定义顶点数据
// 创建包含12个顶点的立方体（每个面2个三角形）
const vertices = new Float32Array([
// 前表面
-1, -1, 1, // 0
1, -1, 1, // 1
1, 1, 1, // 2
-1, 1, 1, // 3
// 后表面
-1, -1, -1, // 4
1, -1, -1, // 5
// ...（完整顶点数据）
]);
// 创建并设置顶点属性
geometry.setAttribute(
'position',
new THREE.BufferAttribute(vertices, 3)
);
2.3 定义索引数据（可选优化）
const indices = new Uint16Array([
// 前表面
0, 1, 2, 2, 3, 0,
// 顶部表面
2, 3, 7, 7, 6, 2,
// ...（完整索引数据）
]);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
3. 高级属性配置
3.1 添加法线向量
const normals = new Float32Array(vertices.length);
for (let i = 0; i < vertices.length; i += 9) {
// 计算三角形法线
const vA = new THREE.Vector3(...vertices.slice(i, i+3));
const vB = new THREE.Vector3(...vertices.slice(i+3, i+6));
const vC = new THREE.Vector3(...vertices.slice(i+6, i+9));
const cb = new THREE.Vector3().subVectors(vC, vB);
const ab = new THREE.Vector3().subVectors(vA, vB);
const normal = new THREE.Vector3()
.crossVectors(cb, ab)
.normalize();
// 为每个顶点设置法线
normals.set([...normal.toArray()], i);
normals.set([...normal.toArray()], i+3);
normals.set([...normal.toArray()], i+6);
}
geometry.setAttribute(
'normal',
new THREE.BufferAttribute(normals, 3)
);
3.2 添加UV坐标
const uvs = new Float32Array([
// 前表面UV
0, 0,
1, 0,
1, 1,
0, 1,
// 其他面UV坐标...
]);
geometry.setAttribute(
'uv',
new THREE.BufferAttribute(uvs, 2)
);
4. 性能优化技巧
4.1 内存复用策略
// 创建可复用数组
const vertexPool = new Float32Array(300000); // 预分配内存
function updateGeometry(geometry) {
const positions = geometry.attributes.position;
// 直接修改已存在的BufferAttribute
for (let i = 0; i < positions.count; i++) {
positions.array[i * 3] += Math.random() * 0.1; // X坐标
positions.array[i * 3 + 1] *= 0.95; // Y坐标
}
positions.needsUpdate = true;
}
4.2 几何体合并
const geometries = [];
const material = new THREE.MeshStandardMaterial();
// 生成多个几何体
for (let i = 0; i < 100; i++) {
const geom = new THREE.BufferGeometry();
// ...配置几何体
geometries.push(geom);
}
// 合并几何体
const mergedGeometry = THREE.BufferGeometryUtils.mergeBufferGeometries(
geometries
);
const mesh = new THREE.Mesh(mergedGeometry, material);
scene.add(mesh);
5. 动态几何体示例：波浪平面
// 初始化平面
const WIDTH_SEGMENTS = 128;
const SIZE = 20;
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(
(WIDTH_SEGMENTS + 1) ** 2 * 3
);
const uvs = new Float32Array(
(WIDTH_SEGMENTS + 1) ** 2 * 2
);
// 生成初始顶点
let vertexIndex = 0;
for (let y = 0; y <= WIDTH_SEGMENTS; y++) {
for (let x = 0; x <= WIDTH_SEGMENTS; x++) {
positions[vertexIndex * 3] =
(x / WIDTH_SEGMENTS) * SIZE - SIZE/2;
positions[vertexIndex * 3 + 1] = 0;
positions[vertexIndex * 3 + 2] =
(y / WIDTH_SEGMENTS) * SIZE - SIZE/2;
uvs[vertexIndex * 2] = x / WIDTH_SEGMENTS;
uvs[vertexIndex * 2 + 1] = y / WIDTH_SEGMENTS;
vertexIndex++;
}
}
// 设置几何体属性
geometry.setAttribute(
'position',
new THREE.BufferAttribute(positions, 3)
);
geometry.setAttribute(
'uv',
new THREE.BufferAttribute(uvs, 2)
);
// 创建动画效果
function animate() {
const positions = geometry.attributes.position.array;
const time = performance.now() * 0.001;
for (let i = 0; i < positions.length; i += 3) {
positions[i + 1] = Math.sin(
positions[i] * 0.5 + positions[i+2] * 0.3 + time
) * 1.5;
}
geometry.attributes.position.needsUpdate = true;
}
6. 常见问题解决方案
6.1 内存管理
// 正确释放内存
function disposeGeometry(geometry) {
geometry.dispose();
geometry.attributes.position.array = null;
geometry = null;
}
6.2 顶点更新优化
// 使用共享ArrayBuffer
const sharedBuffer = new ArrayBuffer(1024 * 1024);
const positions = new Float32Array(sharedBuffer);
const normals = new Float32Array(sharedBuffer);
7. 完整应用案例
// 创建参数化圆柱体
function createCylinder(radiusTop, radiusBottom, height, radialSegments) {
const geometry = new THREE.BufferGeometry();
const vertices = [];
const uvs = [];
// 生成侧面顶点
for (let y = 0; y <= 1; y++) {
const radius = y ? radiusTop : radiusBottom;
for (let i = 0; i <= radialSegments; i++) {
const angle = (i / radialSegments) * Math.PI * 2;
vertices.push(
Math.cos(angle) * radius,
height * (y - 0.5),
Math.sin(angle) * radius
);
uvs.push(i / radialSegments, y);
}
}
// 设置几何属性
geometry.setAttribute(
'position',
new THREE.BufferAttribute(new Float32Array(vertices), 3)
);
geometry.setAttribute(
'uv',
new THREE.BufferAttribute(new Float32Array(uvs), 2)
);
return geometry;
}
掌握BufferGeometry的使用可以显著提升Three.js应用的性能表现，特别适用于以下场景：
- 大数据量可视化（如地图、分子模型）
- 动态几何体（实时变形、粒子系统）
- 程序化生成模型（参数化建模）
- WebXR等高性能要求场景
建议通过实际项目加深理解，可以先从修改现有几何体参数开始，逐步尝试完整几何体创建流程。
