1.什么是几何体Geometry？
在 Three.js 中，几何体（Geometry）是一个数据结构，包含了用于描述三维物体的基本信息，如顶点（vertices）、面（faces）和它们的关联属性（例如颜色、法线、纹理坐标等）。将几何体与材质（Material）相结合，我们可以创建出形状丰富、颜色各异的三维物体。
1.1缓冲类型几何体（BufferGeometry）
BufferGeometry 是 Three.js 提供的一种高效几何体表示方法，特别适用于大型场景和高性能要求的应用。与常规几何体（Geometry）相比，BufferGeometry 使用类型化数组（Typed Arrays）存储顶点、面和其他属性，可以显著减少内存占用和渲染时间。
2.几何体的主要属性
在 Three.js 中，几何体（Geometry）是一个数据结构，用于描述三维物体的基本信息。Geometry 的主要属性如下：
- vertices： 顶点数组，用于存储几何体的顶点。顶点是由
THREE.Vector3对象表示的三维空间中的点，它们定义了物体的形状。 - faces： 面数组，用于存储几何体的面。面是由顶点组成的多边形，它们共同定义了几何体的表面。在 Three.js 中，面通常由
THREE.Face3对象表示，表示一个由三个顶点组成的三角形。 - faceVertexUvs： 一个二维数组，用于存储每个面的纹理坐标。纹理坐标是每个顶点在纹理图像上的二维坐标，由
THREE.Vector2对象表示。纹理坐标用于将纹理映射到几何体的表面。 - vertexNormals： 顶点法线数组。顶点法线是由
THREE.Vector3对象表示的单位向量，指向顶点表面的法线方向。顶点法线用于光照计算和平滑着色。 - boundingBox： 几何体的轴对齐边界框（Axis-Aligned Bounding Box，AABB）。边界框是一个由最小和最大点组成的立方体，它紧密包围几何体。边界框用于快速剔除和碰撞检测等场景优化。
- boundingSphere： 几何体的包围球。包围球是一个半径最小的球体，它完全包含几何体。包围球同样用于快速剔除和碰撞检测等场景优化。
- colors： 顶点颜色数组。顶点颜色用于为每个顶点分配颜色值，它们可以在着色器中用于插值计算。顶点颜色由
THREE.Color对象表示。 - morphTargets： 几何体的形状目标（Morph Targets）数组。形状目标是一组与原始几何体具有相同顶点数量的几何体，它们用于实现形状变形动画。
3.使用内置的几何体类型
Three.js 提供了许多内置的几何体类型。要使用内置的几何体类型，只需创建一个相应类型的实例，并将其与材质组合在一起，形成一个网格对象（Mesh）。
例如，创建一个简单的立方体：
// 创建一个立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建一个材质
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
// 创建一个网格对象
const cube = new THREE.Mesh(geometry, material);
// 添加到场景中
scene.add(cube);
4.创建自定义几何体
除了使用内置的几何体类型，您还可以通过组合顶点和面来创建自定义几何体。以下是一个创建自定义三角形几何体的示例:
// 创建一个空的几何体对象
const geometry = new THREE.Geometry();
// 定义三个顶点
const v1 = new THREE.Vector3(0, 0, 0);
const v2 = new THREE.Vector3(1, 0, 0);
const v3 = new THREE.Vector3(0, 1, 0);
// 将顶点添加到几何体中
geometry.vertices.push(v1);
geometry.vertices.push(v2);
geometry.vertices.push(v3);
// 创建一个面，使用顶点的索引定义
const face = new THREE.Face3(0, 1, 2);
// 将面添加到几何体中
geometry.faces.push(face);
// 更新法线（这对于渲染和光照计算非常重要）
geometry.computeFaceNormals();
// 创建一个材质
const material = new THREE.MeshBasicMaterial({color: 0xff0000, side: THREE.DoubleSide});
// 创建一个网格对象
const triangle = new THREE.Mesh(geometry, material);
// 添加到场景中
scene.add(triangle);
5.旋转、缩放、平移、居中几何体
Three.js 提供了丰富的 API，让我们可以轻松地对几何体进行变换，这些方法本质上都是改变几何体的顶点数据。如平移、旋转和缩放等。要对网格对象进行变换，可以直接修改其 position、rotation 和 scale 属性。例如：
5.1 缩放.scale()
// 几何体xyz三个方向都放大2倍
geometry.scale(2, 2, 2);
// 几何体旋转、缩放或平移之后，查看几何体顶点位置坐标的变化
// BufferGeometry的旋转、缩放、平移等方法本质上就是改变顶点的位置坐标
console.log('顶点位置数据', geometry.attributes.position);
5.2 平移.translate()
// 几何体沿着x轴平移50
geometry.translate(50, 0, 0);
5.3 旋转.rotateX()、.rotateY()、.rotateZ()
// 几何体绕着x轴旋转45度
geometry.rotateX(Math.PI / 4);
5.4 居中.center()
geometry.translate(50, 0, 0);//偏移
// 居中：已经偏移的几何体居中，执行.center()，你可以看到几何体重新与坐标原点重合
geometry.center();
附送250套精选项目源码
源码截图
源码获取：关注公众号「码农园区」，回复 【源码】，即可获取全套源码下载链接
