Three.js 三角剖分 - 文章教程

Three.js 三角剖分

发布于 2021-10-04 字数 3063 浏览 793 评论 0

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

三角剖分库 Earcut

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

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); //网格模型添加到场景中

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

上一篇:

下一篇:

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

浮生未歇

这个人比较懒,什么都没有填写!

11 文章
5 评论
18046 人气
更多

推荐作者

瑾兮

文章 11 评论 2

carlo_sn

文章 0 评论 0

15867725375

文章 0 评论 0

a3576419

文章 0 评论 0

wendy

文章 0 评论 0