三维点的三角测量，每个面有K个顶点

Question

我正在使用Three.js。我有一组三维点（x，y，z）和一组面。一个面由K个点组成，可以是凸的也可以是凹的。

在Three.js文档中我找不到任何能帮助我的东西。一个解决方法可能是对这些形状进行三角剖分，但到目前为止我还没有找到任何简单的三维三角剖分算法。

另一个解决方案是像这样做：

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);

我有很多这些形状，它们构成了一个封闭的表面。

你有什么建议吗？

感谢您的关注。 祝您愉快。

- Swisx

Answer 1

正如您所指出的，实现这一点有两种方法：

1. 使用3D三角测量算法（Three.js没有提供）；
2. 使用通常用于Three.js“形状”对象的2D三角测量算法，并对几何体的每个面应用某些变换。

后者似乎很酷，但不幸的是，正如我所尝试的那样，它并不是那么简单。我想到了与Paul-Jan说的类似的东西：

对于你几何体的每个面：

1. 计算面的质心；
2. 计算面的法线；
3. 计算面的矩阵；
4. 将3D点投影到面的2D平面上；
5. 创建几何体（使用“形状”三角测量算法进行三角测量）；
6. 将面矩阵应用到新创建的几何体上；
7. 创建一个“网格”并将其添加到一个“Object3D”中（我试图将所有几何体合并成一个，但在使用“ShapeBufferGeometry”时失败了）。

请参考此fiddle。

请注意顶点的顺序或将THREE.Material.side设置为THREE.DoubleSide以防止面被剔除。

- neeh

---

我已经知道这些点共面，所以我可以轻松计算出平面的法向量，将平面和点投影到X,Y平面。我已经有了自己的2D三角剖分算法。之后我不需要将点反转回到之前的平面，因为我只需要它们的顺序。通过点的顺序，我可以轻松地形成三角形并将它们发送到three.js中，使用缓冲几何构建对象（看起来我不能标记你），但是谢谢，演示很棒，我将用我的数据测试它并查看它是否适合我的系统 :) - Swisx

Answer 2

我认为您可能需要重新查看Three.js文档，特别是Shape对象。该页面上的示例代码使用了bezierCurveTo，但如果您改用lineTo，则可以将点序列输入其中，并创建凹多边形（包括孔）。

- Paul-Jan

---

OP 需要处理 3D 点，但是 Three.js Shape 的三角化算法（https://github.com/neeh/three.js/blob/dev/src/extras/ShapeUtils.js）只适用于 2D 点。在传递给 Shape 之前，需要对多边形的每个面进行变换。 - neeh

啊，说得好。我之前误以为你只需要输入3D点，然后一切都会自动解决，谢谢你的纠正！现在你需要先将每个面的点投影到它们各自的平面上，然后再将形状转回正确的方向。对于大量的面来说，这样做并不是很实际。 - Paul-Jan

@Paul-Jan 感谢您的回答，是的，很遗憾它不能处理3D点。后来我得出了同样的结论。 - Swisx