每个面有 K 个顶点的 3D 点的三角剖分

Question

我正在与 Three.js 合作。我有一组 3D 点 (x, y, z) 和一组面孔。一张脸由K点组成。它既可以是凸的也可以是凹的。我在 Three.js 文档中找不到任何可以帮助我的东西。一种解决方案可能是对这些形状进行三角剖分，但到目前为止我还没有找到任何简单的 3D 三角剖分算法。

另一个解决方案是做类似的事情：

var pointsGeometry = new THREE.Geometry();

pointsGeometry.vertices.push(new THREE.Vector3(10, 0, 0));
pointsGeometry.vertices.push(new THREE.Vector3(10, 10, 0));
pointsGeometry.vertices.push(new THREE.Vector3(0, 10, 0));
pointsGeometry.vertices.push(new THREE.Vector3(1, 3, 0));
pointsGeometry.vertices.push(new THREE.Vector3(-1, 3, 0));
pointsGeometry.vertices.push(new THREE.Vector3(10, 0, 0));

var material = new THREE.MeshBasicMaterial({color: 0x00ff00});

var mesh = new THREE.Shape/ShapeGeometry/Something(pointsGeometry, material);
group.add(mesh);

scene.add(group);

我有很多这样的形状一起构建一个封闭的表面。

有什么建议吗？

感谢您的关注。祝你有个愉快的一天。

Answer 1

我认为您可能想重新访问 Three.js 文档，而 Shape object in particular. The sample code on that page uses bezierCurveTo, but if you use lineTo 您可以将点序列输入它并创建凹多边形（包括孔）。

Answer 2

正如您所指出的，有两种方法可以实现：

使用 3D 三角测量算法（Three.js 未提供）；
使用通常用于 Three.js Shape 对象的 2D 三角剖分算法，并对几何体的每个面应用一些变换。

最后一个看起来很酷，但不幸的是，当我尝试时，我意识到它并不是那么微不足道。我想出了类似于 Paul-Jan 所说的东西：

对于几何体的每个面：

计算人脸的质心；
计算人脸法线；
计算人脸矩阵；
将 3D 点投影到面部的 2D 平面上；
创建几何体（使用 Shape 三角剖分算法进行三角剖分）；
将面矩阵应用于新创建的几何体
创建一个 Mesh 并将其添加到一个 Object3D（我试图将所有几何图形合并为 1，但失败并显示 ShapeBufferGeometry）

检查this fiddle。

注意顶点的 winding order 或将 THREE.Material.side 置于 THREE.DoubleSide 以防止面部被剔除。

每个面有 K 个顶点的 3D 点的三角剖分

Triangulation of 3D points with K vertices per face

javascript

three.js

geometry

shape

triangulation