Three-js 学习笔记（4）——顶点复用及数据类型

1，顶点索引复用顶点数据

不使用顶点索引的情况，每个面单元三角形需要定义三个点信息，使用顶点索引的情况面衔接处复用的顶点可以不用定义。

不使用顶点索引

var geometry = new THREE.BufferGeometry(); //声明一个空几何体对象
//类型数组创建顶点位置position数据
var vertices = new Float32Array([
  0, 0, 0, //顶点1坐标
  80, 0, 0, //顶点2坐标
  80, 80, 0, //顶点3坐标
 
  0, 0, 0, //顶点4坐标   和顶点1位置相同
  80, 80, 0, //顶点5坐标  和顶点3位置相同
  0, 80, 0, //顶点6坐标
]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组
// 设置几何体attributes属性的位置position属性
geometry.attributes.position = attribue
var normals = new Float32Array([
  0, 0, 1, //顶点1法向量
  0, 0, 1, //顶点2法向量
  0, 0, 1, //顶点3法向量
 
  0, 0, 1, //顶点4法向量
  0, 0, 1, //顶点5法向量
  0, 0, 1, //顶点6法向量
]);
// 设置几何体attributes属性的位置normal属性
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的xyz坐标

顶点索引

      var geometry = new THREE.BufferGeometry(); //声明一个空几何体对象
      //类型数组创建顶点位置position数据
      var vertices = new Float32Array([
        0, 0, 0, //顶点1坐标
        0, 80, 0, //顶点2坐标
        0, 0, 80, //顶点3坐标
        80, 0, 0, //顶点6坐标
      ]);
      // 创建属性缓冲区对象
      var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组
      // 设置几何体attributes属性的位置position属性
      geometry.attributes.position = attribue
      var normals = new Float32Array([
        0, 0, 1, //顶点1法向量
        0, 0, 1, //顶点2法向量
        0, 0, 1, //顶点3法向量
        0, 0, 1, //顶点4法向量
      ]);
      // 设置几何体attributes属性的位置normal属性
      geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的xyz坐标
 
      // Uint16Array类型数组创建顶点索引数据
      var indexes = new Uint16Array([
        // 0对应第1个顶点位置数据、第1个顶点法向量数据
        // 1对应第2个顶点位置数据、第2个顶点法向量数据
        // 索引值3个为一组，表示一个三角形的3个顶点
        0, 1, 2,
        0, 2, 3,
      ])
      // 索引数据赋值给几何体的index属性
      geometry.index = new THREE.BufferAttribute(indexes, 1); //1个为一组

2，类型数组

创建顶点索引数组的时候，可以根据顶点的数量选择类型数组Uint8Array、Uint16Array、Uint32Array。对于顶点索引而言选择整型类型数组，对于非索引的顶点数据，需要使用浮点类型数组Float32Array等。

类型数组	位数	字节	类型描述	C语言等价类型
Int8Array	8	1	有符号8位整型	int8_t
Uint8Array	8	1	无符号8位整型	uint8_t
Int16Array	16	2	有符号16位整型	int16_t
Uint16Array	16	2	无符号16位整型	int16_t
Int32Array	32	4	有符号32位整型	int32_t
Uint32Array	32	4	无符号32位整型	uint32_t
Float32Array	32	4	单精度(32位)浮点数	float
Float64Array	64	8	双精度(64位)浮点数	double