第八章 Three.js 高级几何体

在本章中，我们将探讨Three.js中更高级的几何体创建方法。Three.js提供了多种工具来创建复杂的几何体，并对几何体进行自定义和变形。掌握这些技巧，可以让你在项目中创建更加复杂和精细的三维模型。

8.1 自定义几何体
Three.js 提供了 THREE.Geometry 和 THREE.BufferGeometry 来创建自定义几何体。THREE.Geometry 是一个较为简单和直观的方式，而 THREE.BufferGeometry 更为高效，适用于更复杂的几何体。

示例代码：
// 创建一个自定义几何体
const customGeometry = new THREE.Geometry();
// 添加顶点
customGeometry.vertices.push(
    new THREE.Vector3(-1, -1, 0),
    new THREE.Vector3(1, -1, 0),
    new THREE.Vector3(1, 1, 0),
    new THREE.Vector3(-1, 1, 0)
);
// 添加面
customGeometry.faces.push(
    new THREE.Face3(0, 1, 2),
    new THREE.Face3(0, 2, 3)
);
// 创建一个材质
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
// 使用几何体和材质创建一个网格
const customMesh = new THREE.Mesh(customGeometry, material);
// 将网格添加到场景中
scene.add(customMesh);

8.2 使用 BufferGeometry
BufferGeometry 是 THREE.Geometry 的更高效的替代方案，适用于更复杂和性能要求更高的场景。它直接操作缓冲区，减少了内存占用和计算开销。

示例代码：
// 创建一个 BufferGeometry
const bufferGeometry = new THREE.BufferGeometry();
// 创建顶点数据
const vertices = new Float32Array([
    -1.0, -1.0, 0.0,
     1.0, -1.0, 0.0,
     1.0,  1.0, 0.0,
    -1.0,  1.0, 0.0
]);
// 创建索引数据
const indices = new Uint16Array([
    0, 1, 2,
    0, 2, 3
]);
// 设置顶点缓冲区
bufferGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
// 设置索引缓冲区
bufferGeometry.setIndex(new THREE.BufferAttribute(indices, 1));
// 创建一个材质
const bufferMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
// 使用 BufferGeometry 和材质创建一个网格
const bufferMesh = new THREE.Mesh(bufferGeometry, bufferMaterial);
// 将网格添加到场景中
scene.add(bufferMesh);

8.3 几何体变形
几何体变形可以让你对现有几何体进行修改和操作，实现更为复杂的效果。我们可以通过修改几何体的顶点来实现几何体的变形。

示例代码：
// 创建一个球体几何体
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
// 遍历几何体的顶点并进行修改
sphereGeometry.vertices.forEach(vertex => {
    const offset = vertex.clone().normalize().multiplyScalar(0.2);
    vertex.add(offset);
});
// 更新几何体
sphereGeometry.verticesNeedUpdate = true;
// 创建一个材质
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true });
// 使用几何体和材质创建一个网格
const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
// 将网格添加到场景中
scene.add(sphereMesh);

8.4 几何体合并
几何体合并可以减少绘制调用次数，提高渲染性能。我们可以使用 THREE.Geometry.merge 或 THREE.BufferGeometry.mergeBufferGeometries 方法来合并多个几何体。

示例代码：
// 创建两个几何体
const geometry1 = new THREE.BoxGeometry(1, 1, 1);
const geometry2 = new THREE.SphereGeometry(0.5, 32, 32);
// 移动第二个几何体的位置
geometry2.translate(1.5, 0, 0);
// 合并几何体
geometry1.merge(geometry2);
// 创建一个材质
const mergedMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true });
// 使用合并后的几何体和材质创建一个网格
const mergedMesh = new THREE.Mesh(geometry1, mergedMaterial);
// 将网格添加到场景中
scene.add(mergedMesh);

8.5 高级几何体操作
除了基本的几何体创建和变形，Three.js 还提供了一些高级的几何体操作方法，比如布尔运算、细分曲面等。以下是一个使用 CSG（Constructive Solid Geometry）库实现布尔运算的示例。

示例代码：
// 引入 ThreeCSG 库
import * as CSG from 'three-csg';
// 创建两个几何体
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);
sphereGeometry.translate(0.5, 0.5, 0.5);
// 创建 CSG 对象
const boxCSG = CSG.fromGeometry(boxGeometry);
const sphereCSG = CSG.fromGeometry(sphereGeometry);
// 进行布尔运算
const subtractedCSG = boxCSG.subtract(sphereCSG);
// 将结果转换回几何体
const resultGeometry = CSG.toGeometry(subtractedCSG);
// 创建一个材质
const resultMaterial = new THREE.MeshBasicMaterial({ color: 0xff00ff, wireframe: true });
// 使用布尔运算后的几何体和材质创建一个网格
const resultMesh = new THREE.Mesh(resultGeometry, resultMaterial);
// 将网格添加到场景中
scene.add(resultMesh);

通过这一章的学习，读者应该能够创建和操作各种复杂的几何体，并理解如何在 Three.js 中应用高级几何体操作技术。这些技能将帮助你在项目中实现更为复杂和精细的三维模型。
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                        
原文链接：https://blog.csdn.net/imdeity/article/details/139636883