Three.js 三角剖分

Question

通过激光等扫描测量技术可以得到一系列的离散点，比如倾斜摄影测量测量地面得到的地面离散点位置数据，如果想把这些非结构的顶点数据，通过一定的算法策略得到可以渲染的三角形网格模型，需要通过 三角剖分 策略来实现。

三角剖分库 Earcut

Three.js 切割多边形算法的实现可以参考官方文档 Earcut，Earcut 的源码可以查看目录 three.js\src\extras\Earcut.js.

• 查看 github 地址：https://github.com/mapbox/earcut
• npm 安装：https://www.npmjs.com/package/earcut

github Earcut.js 使用

//0, 0, 100, 0, 100, 50, 0, 50表示平面上4个顶点的坐标
//返回结果trianglesIndex：[2, 3, 0, 0, 1, 2]
// 一个四边形可以剖分为2个三角形表示，返回结果trianglesIndex是顶点数据索引
var trianglesIndex = earcut([0, 0, 100, 0, 100, 50, 0, 50]);
console.log(`返回结果：三角形对应顶点索引`,trianglesIndex);

// 一个五边形的案例测试:一个五边形剖分为3个三角形
var trianglesIndex2 = earcut([0, 0, 100, 0, 150,25, 100, 50, 0, 50]);
console.log(`返回结果：三角形对应顶点索引`,trianglesIndex2);

// 三维坐标返回顶点索引  可以参照上面的五边形  返回结果是一样的
var trianglesIndex3 = earcut([
0, 0, 0, //顶点1坐标
100, 0, 0, //顶点2坐标
150, 25, 0, //顶点3坐标
100, 50, 0, //顶点4坐标
0, 50, 0, //顶点5坐标
],null,3);
console.log(`返回结果：三角形对应顶点索引`,trianglesIndex3);

通过 Threejs 测试显示 Earcut.js 剖分的结果

// 三维坐标返回顶点索引  可以参照上面的五边形  返回结果是一样的
var trianglesIndex3 = earcut([
  //三维顶点数据
  var arr = [
    0, 0, 0, //顶点1坐标
    100, 0, 0, //顶点2坐标
    150, 25, 0, //顶点3坐标
    100, 50, 0, //顶点4坐标
    0, 50, 0, //顶点5坐标
  ]
  var geometry = new THREE.BufferGeometry();
  //一个五边形多边形的顶点位置数据
  var vertices = new Float32Array(arr);
  // 创建属性缓冲区对象
  var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组
  // 设置几何体attributes属性的位置position属性
  geometry.attributes.position = attribue
  // 三角形顶点索引计算
  var trianglesIndex = earcut(arr,null,3);
  // Uint16Array类型数组创建顶点索引数据
  var indexes = new Uint16Array(trianglesIndex)
  // 索引数据赋值给几何体的index属性
  geometry.index = new THREE.BufferAttribute(indexes, 1); //1个为一组
  // 不执行computeVertexNormals，没有顶点法向量数据
  geometry.computeVertexNormals(); //不计算法线，表面比较暗，计算了比较亮，
  console.log(`查看几何体顶点数据`, geometry);
  //材质对象
  var material = new THREE.MeshLambertMaterial({
   color: 0x0000ff, //三角面颜色
   side: THREE.DoubleSide, //两面可见
   // 查看剖分的三角形效果
   wireframe:true,
  });
  var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
  scene.add(mesh); //网格模型添加到场景中