网格模型 Mesh 对应的几何体 BufferGeometry,拆分为多个三角后,很多三角形重合的顶点位置坐标是相同的,这时候如果你想减少顶点坐标数据量,可以借助几何体顶点索引 geometry.index 来实现.

定义顶点位置坐标数据

每个三角形 3 个顶点坐标,矩形平面可以拆分为两个三角形,也就是 6 个顶点坐标.

const 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坐标
]);

如果几何体有顶点索引 geometry.index,那么你可以吧三角形重复的顶点位置坐标删除.

const vertices = new Float32Array([
  0,
  0,
  0, //顶点1坐标
  80,
  0,
  0, //顶点2坐标
  80,
  80,
  0, //顶点3坐标
  0,
  80,
  0, //顶点4坐标
]);

BufferAttribute 定义顶点索引.index 数据

通过 javascript 类型化数组 Uint16Array 创建顶点索引.index 数据

// Uint16Array类型数组创建顶点索引数据
const indexes = new Uint16Array([
  // 下面索引值对应顶点位置数据中的顶点坐标
  0, 1, 2, 0, 2, 3,
]);

通过 threejs 的属性缓冲区对象 BufferAttribute 表示几何体顶点索引.index 数据

// 索引数据赋值给几何体的index属性
geometry.index = new THREE.BufferAttribute(indexes, 1); //1个为一组