推荐：将NSDT场景编辑器加到你的3D工具链

工具集：NSDT简石数字孪生

几何体顶点索引数据

网格模型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个为一组

3D建模学习工作室

专注数字孪生、3D建模、3D仿真、虚拟现实

3D建模学习工作室

上一篇：Three.js教程：构建矩形平面几何体 (mvrlink.com)

下一篇：Three.js教程：顶点法线数据 (mvrlink.com)