前面一节我们介绍了Threejs中常用的几何体，这些几何体都是基于BufferGeometry (opens new window)类构建的，Threejs官方文档中对BufferGeometry 的解释是：BufferGeometry 是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。官方解释太抽象，不要理解，简单点说就是BufferGeometry可以自定义任何几何形状比如点、线、面等；
BufferGeometry 中的数据存储在BufferAttribute中，BufferAttribute这个类用于存储与BufferGeometry相关联的 attribute（例如顶点位置向量，面片索引，法向量，颜色值，UV坐标以及任何自定义 attribute ），BufferAttribute的构造函数如下，其接收三个参数：
BufferAttribute( array : TypedArray, itemSize : Integer, normalized : Boolean )
array – 必须是 TypedArray. 类型，用于实例化缓存。
该队列应该包含：itemSize * numVertices个元素，numVertices 是 BufferGeometry中的顶点数目；
itemSize – 队列中与顶点相关的数据值的大小。比如，如果 attribute 存储的是三元组（例如顶点空间坐标、法向量或颜色值）则itemSize的值应该是3。
normalized – (可选) 指明缓存中的数据如何与GLSL代码中的数据对应。例如，如果array是 UInt16Array类型，且normalized的值是 true，则队列中的值将会从 0 - 65535 映射为 GLSL 中的 0.0f - 1.0f。若 normalized 的值为 false，则数据映射不会归一化，而会直接映射为 float 值，例如，32767 将会映射为 32767.0f.
说了这么多，估计你还是没停明白BufferGeometry具体如何使用，下面我们实际敲下代码来感受下BufferGeometry
1.首先，我们创建一个BufferGeometry
const geometry = new THREE.BufferGeometry(); 2.其次，我们通过javascript中的Float32Array来创建一组xyz坐标数据用来表示几何体的顶点坐标。
代码语言：javascript复制//创建顶点数据
const vertices = new Float32Array([
0, 0, 0, //顶点1坐标
100, 0, 0, //顶点2坐标
0, 100, 0, //顶点3坐标
0, 0, 30, //顶点4坐标
0, 0, 100, //顶点5坐标
60, 0, 20, //顶点6坐标
]);3.上面我们已经介绍过了，BufferGeometry 中的数据存储在BufferAttribute中，所以我们还要创建一个属性缓冲区对象BufferAttribute
代码语言：javascript复制// 创建属性缓冲区对象
const attribute = new THREE.BufferAttribute(vertices, 3); BufferAttribute接收两个参数，第一个是TypedArray.类型的数组，这里就是各个顶点的坐标数据vertices，第二个是itemSize，即几个点代表一个数据，这里是3代表每三个点代表一个坐标 4.设置几何体的坐标，BufferAttribute创建并传参后，我们可以通过geometry.attributes.position设置几何体顶点位置属性的值BufferAttribute。
代码语言：javascript复制// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribute;5.通过上面的设置以后，我们就已经定义了一个几何体形状，在Threejs入门之二:引用Threejs并创建第一个3D图形中我们讲过，一个物体由几何形状和材质组成，现在我们已经在上面定义了几何体形状，下面我们利用之前的MeshBasicMaterial对象创建一个材质
代码语言：javascript复制const material = new THREE.MeshBasicMaterial({
color: 0x00ff00,
}); 然后将几何体和材质作为参数传递给mesh，并将mesh添加到场景中
代码语言：javascript复制const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)刷新浏览器，查看效果
核心代码如下
代码语言：javascript复制const scene = new THREE.Scene()
const geometry = new THREE.BufferGeometry();
//创建顶点数据
const vertices = new Float32Array([
0, 0, 0, //顶点1坐标
100, 0, 0, //顶点2坐标
0, 100, 0, //顶点3坐标
0, 0, 30, //顶点4坐标
0, 0, 100, //顶点5坐标
60, 0, 20, //顶点6坐标
]);
// 创建属性缓冲区对象
const attribute = new THREE.BufferAttribute(vertices, 3);
// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribute;
// 创建材质
const material = new THREE.MeshBasicMaterial({
color: 0x00ff00,
});
// 创建物体
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh)
