Threejs入门之八：认识缓冲几何体BufferGeometry（一）

前面一节我们介绍了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坐标数据用来表示几何体的顶点坐标。

//创建顶点数据
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

// 创建属性缓冲区对象 
const attribute = new THREE.BufferAttribute(vertices, 3); 

BufferAttribute接收两个参数，第一个是TypedArray.类型的数组，这里就是各个顶点的坐标数据vertices，第二个是itemSize，即几个点代表一个数据，这里是3代表每三个点代表一个坐标
4.设置几何体的坐标，BufferAttribute创建并传参后，我们可以通过geometry.attributes.position设置几何体顶点位置属性的值BufferAttribute。

// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribute;

5.通过上面的设置以后，我们就已经定义了一个几何体形状，在Threejs入门之二:引用Threejs并创建第一个3D图形中我们讲过，一个物体由几何形状和材质组成，现在我们已经在上面定义了几何体形状，下面我们利用之前的MeshBasicMaterial对象创建一个材质

const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00, 
}); 

然后将几何体和材质作为参数传递给mesh，并将mesh添加到场景中

const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

刷新浏览器，查看效果

核心代码如下

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)