和我一起学 Three.js 【初级篇】：2. 掌握几何体

本篇文章共 5090 字，最近更新于 2023 年 04 月 19 日。

0. 系列文章合集

本系列第 6，7，8 章节支持在我的个人公众号「前端乱步」内付费观看，将在全平台文章「点赞数」+「评论数」 >= 500（第 6 章）, 1000（第 7，8 章） 时分别解锁发布。

1. 《和我一起学 Three.js【初级篇】：0. 总论》
2. 《和我一起学 Three.js【初级篇】：1. 搭建 3D 场景》
3. 您当前在这里《和我一起学 Three.js【初级篇】：2. 掌握几何体》
4. 《和我一起学 Three.js【初级篇】：3. 掌握摄影机》
5. 《和我一起学 Three.js【初级篇】：4. 掌握纹理》
6. 《和我一起学 Three.js【初级篇】：5. 掌握材质》
7. 《和我一起学 Three.js【初级篇】：6. 掌握光照》
8. 《和我一起学 Three.js【初级篇】：7. 掌握阴影》
9. 《和我一起学 Three.js【初级篇】：8. 融会贯通》

1. 什么是几何体（Geometry）

在 Three.js 的世界中，几何体（Geometry）由顶点（vertices），线，面组成，被用来定义物体的「形状」和「大小」。

如果您想要在 3D 世界中「创造」某个物体，您需要首先确定这个物体「长什么样」？然后您就可以通过以下三种方式，创造出该物体：

1. 使用 Three.js 提供的几何体对象；
2. 使用 Three.js 提供的 API 创建自定义几何体（例如创建粒子动画）；
3. 通过 3D 软件导入模型；

在本篇文章中，我们将只介绍前两种创建几何体的方式，在后续很多场景中，您会经常通过这两种方式实现您想要的效果。

2. 几何体与 3D 物体的关系

我们在上一篇文章提到过，在 Three.js 中创建一个「3D 物体」必须通过实例化一个「网格对象（Mesh）」实现。几何体（Geometry），材质（Material）和网格对象（Mesh）三者的关系像是一个金字塔。

「几何体」描述物体的形状和大小，「材质」描述物体的外观和质地，「网格对象」则将两者合并在一起，并提供使物体移动，旋转的能力。因此，要想当好 Web 3D 世界的造物主，您需要对这三个概念非常熟悉。

3. 学习几何体

您需要了解，Three.js 提供的所有现成的几何体，都继承自 BufferGeometry 对象，并且该对象也是 Three.js 为我们提供的创建自定义几何体的 API。因此，要学习几何体，我们要先从该对象说起。

3.1 BufferGeometry 对象

顾名思义，BufferGeometry 对象和「缓冲」相关，具体而言，该对象能够将几何体的相关数据（如顶点，UV，法线等）存入 GPU 的缓冲区（即显存），从而极大的提高 GPU 渲染性能与内存使用效率。

在计算机中，CPU 通常拥有更高的时钟速度和更大的缓存容量，但是并行计算的能力较差，难以处理大量的数据。而 GPU 的并行计算能力特别强，因此能够同时处理大量数据，但是缓存容量较小，时钟速度也较低。而针对 3D 渲染场景，大量的顶点数据需要在一次渲染中同时传递给 GPU 处理，因此对于这些数据的读写效率就成为了 GPU 渲染性能的瓶颈。因此，将顶点数据存储在缓冲区是现代 3D 渲染引擎中不可或缺的技术手段。

我们之前提到过，GPU 绘制几何体的过程，实际上是一个「读点」，「连线」和「结面」的过程。这里「读点」的「点」，指的就是几何体的「顶点」，它来源自开发者的输入，输入到哪里呢？在 Three.js 中，输入至 BufferGeometry 对象。

3.2 通过 BufferGeometry 对象绘制自定义几何体

为了绘制几何体，我们需要设定几何体的「顶点（vertices）」，每个顶点都至少由 3 个数字组成，表示其在空间直角坐标系内的位置。在一个颇具规模的 3D 世界中，我们有一定数量的几何体，意味着我们有大量的顶点数据需要 GPU 解析计算。因此，我们需要一种高效的数据结构存储顶点数据，在 JavaScript 世界中，我们通常使用 Float32Array 这一类型数组。

3.2.1 关于 Float32Array

Float32Array 是 JavaScript 提供的一种类型数组，用来存储 32 位浮点数（即表示 3.4028235 * 10 ^ 38 ~ 1.17549435 * 10 ^ -38 之间的任意数）。其函数签名为：

const array = new Float32Array(length | <Array>);

其中，length 参数表示数组的长度，它和普通数组的区别主要有如下两点：

1. 数组中的每个元素的类型固定为采用 IEEE 754 标准表示的 32 位浮点数；
2. 它在实现方式上是一个「真正的数组」，即元素占据连续的内存空间；

因此它是一种非常高效的数据结构，同时，由于其能够表示的数字范围较大，且可以表示的精度为小数点后 6 到 7 位，因此也非常适合用来存储顶点位置等数据。

3.2.2 自定义几何体

创建一个自定义几何体需要以下三个步骤：

1. 使用数组定义几何体的顶点（使用 Float32Array 数据类型）；
2. 将数组转换为一个** BufferAttribute **对象；
3. 设置几何体的属性，并填充对应的值；

代码如下：

const geometry = new THREE.BufferGeometry()
const vertices = new Float32Array([
  -1.0, -1.0, 1.0,
   1.0,