BufferGeometry 是 Three.js 中用于定义几何体顶点数据的核心类，它比 Geometry 更加高效。BufferGeometry 通过使用 BufferAttribute 来存储顶点、法线、颜色、UV 等数据，并将这些数据直接传递给 GPU，从而实现高效的渲染。这在需要处理大量顶点数据时尤其重要。

本文将详细讲解 BufferGeometry 的使用方式，介绍其各种属性和方法，结合多个示例，帮助你在 Three.js 项目中更好地运用 BufferGeometry。

1. 什么是 BufferGeometry

BufferGeometry 是 Three.js 中用于定义 3D 模型顶点和相关数据（如法线、颜色、UV 坐标等）的类。它比传统的 Geometry 类更加高效，因为 BufferGeometry 使用了 TypedArray 来存储顶点数据，能够直接与 WebGL 进行交互。

应用场景：

• 创建自定义几何体
• 在 GPU 中高效存储和处理几何体数据
• 适用于需要处理大量顶点的复杂场景

构造函数

const geometry = new THREE.BufferGeometry();

2. BufferGeometry 的基本使用

BufferGeometry 的使用主要是通过 BufferAttribute 来存储顶点、法线、颜色等数据。我们可以将这些数据设置为 BufferGeometry 的属性，并将其渲染为 3D 场景中的模型。

示例：创建一个包含顶点的简单三角形

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建 BufferGeometry 对象
const geometry = new THREE.BufferGeometry();

// 定义三角形的三个顶点
const vertices = new Float32Array([
    0.0, 1.0, 0.0,  // 顶点1 (x, y, z)
    -1.0, -1.0, 0.0, // 顶点2 (x, y, z)
    1.0, -1.0, 0.0  // 顶点3 (x, y, z)
]);

// 创建 BufferAttribute 并将其添加到几何体中
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide });

// 创建 Mesh 并添加到场景中
const triangle = new THREE.Mesh(geometry, material);
scene.add(triangle);

// 设置相机位置
camera.position.z = 5;

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

在这个例子中，我们通过 Float32Array 定义了三角形的三个顶点，并通过 BufferAttribute 将其赋值给几何体的 position 属性，最终通过 Mesh 进行渲染。

3. BufferGeometry 的核心属性与方法

3.1 setAttribute

setAttribute 方法用于向几何体添加顶点属性，如位置、法线、颜色、UV 坐标等。

geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

• position：顶点位置属性。
• normal：法线，用于计算光照。
• color：顶点颜色，用于颜色插值。
• uv：UV 坐标，用于纹理映射。

3.2 addGroup

addGroup 方法用于定义几何体的绘制组，特别适合在一个几何体上应用多个材质。

geometry.addGroup(start, count, materialIndex);

• start：索引缓冲区中起始顶点的索引。
• count：要渲染的顶点数量。
• materialIndex：要使用的材质索引。

3.3 computeBoundingBox 和 computeBoundingSphere

当你需要几何体的边界时，可以使用这两个方法。computeBoundingBox 计算几何体的轴对齐边界框（AABB），computeBoundingSphere 则计算包围球。

geometry.computeBoundingBox();
geometry.computeBoundingSphere();

3.4 fromGeometry

fromGeometry 方法将 Geometry 对象转换为 BufferGeometry，如果你之前使用的是 Geometry，这个方法可以帮助你无缝地过渡到 BufferGeometry。

geometry.fromGeometry(oldGeometry);

3.5 setIndex

当几何体比较复杂时，使用索引可以减少顶点的重复定义。setIndex 方法允许我们通过索引来定义顶点。

const indices = new Uint16Array([0, 1, 2]);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

4. 使用 BufferGeometry 创建复杂模型

示例：创建一个正方形

在这个示例中，我们将创建一个包含四个顶点的正方形，并使用 setIndex 来定义顶点的连接方式。

// 创建 BufferGeometry 对象
const geometry = new THREE.BufferGeometry();

// 定义正方形的四个顶点
const vertices = new Float32Array([
    -1.0, 1.0, 0.0,   // 顶点1 (x, y, z)
    -1.0, -1.0, 0.0,  // 顶点2 (x, y, z)
    1.0, -1.0, 0.0,   // 顶点3 (x, y, z)
    1.0, 1.0, 0.0     // 顶点4 (x, y, z)
]);

// 创建 BufferAttribute 并添加到几何体中
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

// 定义顶点索引，用于绘制两个三角形组成正方形
const indices = new Uint16Array([
    0, 1, 2,  // 第一个三角形
    0, 2, 3   // 第二个三角形
]);

// 将索引添加到几何体中
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff, side: THREE.DoubleSide });

// 创建 Mesh 并添加到场景中
const square = new THREE.Mesh(geometry, material);
scene.add(square);

在这个例子中，我们通过 setIndex 方法定义了正方形的顶点索引，这样可以避免重复定义顶点。

5. BufferGeometry 与 BufferAttribute 的进阶使用

5.1 动态更新几何体

在一些场景中，我们可能需要动态更新几何体的顶点位置或其他属性。可以通过修改 BufferAttribute 来实现，并且在修改后需要设置 BufferAttribute.needsUpdate = true 来通知 Three.js 更新数据。

// 动态更新顶点位置
geometry.attributes.position.setX(0, Math.random() * 2 - 1);
geometry.attributes.position.needsUpdate = true;

5.2 使用 computeVertexNormals 生成法线

当几何体的法线没有被定义时，我们可以使用 computeVertexNormals 方法自动计算法线。

geometry.computeVertexNormals();

法线用于光照计算，因此在使用具有光照效果的材质时，法线是非常重要的。

5.3 纹理映射与 UV 坐标

我们可以通过 BufferAttribute 定义 UV 坐标，从而为几何体添加纹理映射。

const uvs = new Float32Array([
    0.0, 1.0,  // 顶点1的 UV 坐标
    0.0, 0.0,  // 顶点2的 UV 坐标
    1.0, 0.0,  // 顶点3的 UV 坐标
    1.0, 1.0   // 顶点4的 UV 坐标
]);

geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));

6. 总结

BufferGeometry 是 Three.js 中高效处理几何体数据的核心类。通过结合使用 BufferAttribute，我们可以在 GPU 中高效地存储和操作顶点、法线、颜色、UV 坐标等数据。BufferGeometry 相对于 Geometry 更加灵活

和高效，特别适合处理大量顶点数据的复杂场景。

通过本文的示例，你可以掌握 BufferGeometry 的基本使用方法，并在实际项目中创建自定义几何体。希望这篇博客对你有帮助，助你在 Three.js 的开发过程中取得更多进展！