【Three.js】知识梳理三：Three.js几何体Geometry

本文主要是介绍【Three.js】知识梳理三：Three.js几何体Geometry，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.什么是几何体Geometry？

在 Three.js 中，几何体（Geometry）是一个数据结构，包含了用于描述三维物体的基本信息，如顶点（vertices）、面（faces）和它们的关联属性（例如颜色、法线、纹理坐标等）。将几何体与材质（Material）相结合，我们可以创建出形状丰富、颜色各异的三维物体。

1.1缓冲类型几何体（BufferGeometry）

BufferGeometry 是 Three.js 提供的一种高效几何体表示方法，特别适用于大型场景和高性能要求的应用。与常规几何体（Geometry）相比，BufferGeometry 使用类型化数组（Typed Arrays）存储顶点、面和其他属性，可以显著减少内存占用和渲染时间。

2.几何体的主要属性

在 Three.js 中，几何体（Geometry）是一个数据结构，用于描述三维物体的基本信息。Geometry 的主要属性如下：

1. vertices： 顶点数组，用于存储几何体的顶点。顶点是由 THREE.Vector3 对象表示的三维空间中的点，它们定义了物体的形状。
2. faces： 面数组，用于存储几何体的面。面是由顶点组成的多边形，它们共同定义了几何体的表面。在 Three.js 中，面通常由 THREE.Face3 对象表示，表示一个由三个顶点组成的三角形。
3. faceVertexUvs： 一个二维数组，用于存储每个面的纹理坐标。纹理坐标是每个顶点在纹理图像上的二维坐标，由 THREE.Vector2 对象表示。纹理坐标用于将纹理映射到几何体的表面。
4. vertexNormals： 顶点法线数组。顶点法线是由 THREE.Vector3 对象表示的单位向量，指向顶点表面的法线方向。顶点法线用于光照计算和平滑着色。
5. boundingBox： 几何体的轴对齐边界框（Axis-Aligned Bounding Box，AABB）。边界框是一个由最小和最大点组成的立方体，它紧密包围几何体。边界框用于快速剔除和碰撞检测等场景优化。
6. boundingSphere： 几何体的包围球。包围球是一个半径最小的球体，它完全包含几何体。包围球同样用于快速剔除和碰撞检测等场景优化。
7. colors： 顶点颜色数组。顶点颜色用于为每个顶点分配颜色值，它们可以在着色器中用于插值计算。顶点颜色由 THREE.Color 对象表示。
8. 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套精选项目源码

源码截图

 源码获取：关注公众号「码农园区」，回复 【源码】，即可获取全套源码下载链接

这篇关于【Three.js】知识梳理三：Three.js几何体Geometry的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---