Three.js 基础入门

入门"/>

Three.js 基础入门

前一篇，我们讲解了场景的结构和基类 THREE.Object3D，对 Three.js 的结构有了一个大概的了解，我们的代码案例还是停留在显示一个立方体的状态。本文，我们将制作更多的几何体形状。

一个模型是由几何体 Geometry 和材质 Material 组成。Three.js 内置了很多的几何体种类，如立方体、三棱锥、球、八面体、十二面体、二十面体等等，本文我们将介绍这些几何体的模型创建和几何体的通用方法。

Geometry 和 BufferGeometry

当前 Three.js 内置了这两种几何体类型，这两个几何体类型都用于存储模型的顶点位置、面的索引、法向量、颜色、UV 纹理以及一些自定义的属性。

它们两个的区别是：BufferGeometry 存储的都是一些原始的数据，性能比 Geometry 高，很适合存储一些放入场景内不需要再额外操作的模型。而 Geometry 的优势刚好相反，Geometry 比 BufferGeometry 更友好，使用了 Three.js 提供的 THREE.Vector3 或者 THREE.Color 这样的对象来存储数据（顶点位置、面、颜色等），这些对象易于阅读和编辑，但效率低于 BufferGeometry 使用的类型化数组。

所以，我们可以根据项目的大小来使用不同的几何体，小项目可以使用 Geometry 实现，中大型的项目还是推荐 BufferGeometry。

作为入门教程，我们将使用较为简单的 Geometry 来实现案例。

Geometry 和 BufferGeometry 互转

在这里插一点内容，两种几何体类型可以互转，所以，