使用 Three.js 高效创建与优化 3D 几何体 #

本技能旨在指导开发者在 Three.js 中快速构建 3D 形状，涵盖从简单的内置几何体到复杂的自定义 BufferGeometry 以及高性能的实例化渲染方案。

为什么需要这个技能 #

在 3D 网页开发中，几何体（Geometry）决定了物体的形状和结构。初学者往往依赖内置的简单形状，但在面对复杂模型、动态生成的地形或需要渲染数千个相同物体（如森林、粒子群）的场景时，简单的 API 无法满足性能要求。

掌握 BufferGeometry 和 InstancedMesh 能够让你直接操作 GPU 缓冲区，大幅减少内存占用并提升帧率，实现从“能跑起来”到“丝滑运行”的跨越。

适用场景 #

• 快速原型开发：使用 BoxGeometry、SphereGeometry 等快速搭建场景。
• 自定义模型构建：通过顶点坐标、索引和 UV 映射创建独特的 3D 形状。
• 大规模物体渲染：在场景中部署成千上万个相同模型且不导致掉帧。
• 动态几何体修改：在运行时实时更新顶点的位置、颜色或法线。

核心工作流 #

1. 使用内置几何体 #

对于标准形状，直接调用内置类。例如创建球体或圆环：

const sphere = new THREE.SphereGeometry(1, 32, 32);
const torus = new THREE.TorusGeometry(1, 0.4, 16, 100);

2. 构建自定义 BufferGeometry #

当内置形状无法满足需求时，通过 Float32Array 定义顶点数据：

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
  -1, -1, 0, // vertex 0
   1, -1, 0, // vertex 1
   1,  1, 0, // vertex 2
]);
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));

3. 性能优化：实例化渲染 (InstancedMesh) #

如果要渲染大量相同物体，不要创建多个 Mesh，而应使用 InstancedMesh：

const instancedMesh = new THREE.InstancedMesh(geometry, material, 1000);
const dummy = new THREE.Object3D();

for (let i = 0; i < 1000; i++) {
  dummy.position.set(Math.random() * 10, Math.random() * 10, Math.random() * 10);
  dummy.updateMatrix();
  instancedMesh.setMatrixAt(i, dummy.matrix);
}
instancedMesh.instanceMatrix.needsUpdate = true;

4. 几何体工具处理 #

利用 BufferGeometryUtils 进行几何体合并（Merge）以减少 Draw Call，或计算切线（Tangents）以支持法线贴图。

下载和安装 #

下载 threejs-geometry 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐