Three.js高效几何体创建指南：BufferGeometry深度解析

1. 为什么选择BufferGeometry？

在Three.js开发中，几何体创建是3D建模的基础。相比传统Geometry，BufferGeometry具有显著优势：

‌内存效率‌：采用TypedArray存储顶点数据，内存占用减少40%
‌渲染性能‌：直接对接WebGL缓冲区，减少CPU-GPU数据传输
‌灵活性‌：支持动态更新顶点数据
‌扩展性‌：可处理百万级顶点的复杂模型

2. 基础创建流程

2.1 创建空几何体

javascript 复制代码

const geometry = new THREE.BufferGeometry();

2.2 定义顶点数据

js 复制代码

// 创建包含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 定义索引数据（可选优化）

javascript 复制代码

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 添加法线向量

javascript 复制代码

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坐标

javascript 复制代码

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 内存复用策略

javascript 复制代码

// 创建可复用数组
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 几何体合并

javascript 复制代码

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. 动态几何体示例：波浪平面

javascript 复制代码

// 初始化平面
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 内存管理

javascript 复制代码

// 正确释放内存
function disposeGeometry(geometry) {
  geometry.dispose();
  geometry.attributes.position.array = null;
  geometry = null;
}

6.2 顶点更新优化

javascript 复制代码

// 使用共享ArrayBuffer
const sharedBuffer = new ArrayBuffer(1024 * 1024);
const positions = new Float32Array(sharedBuffer);
const normals = new Float32Array(sharedBuffer);

7. 完整应用案例

javascript 复制代码

// 创建参数化圆柱体
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等高性能要求场景

建议通过实际项目加深理解，可以先从修改现有几何体参数开始，逐步尝试完整几何体创建流程。