每个面具有K个顶点的三维点的三角剖分

Question

我正在使用Three.js。我有一个 3D点（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);

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

有什么建议吗？

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

Answer 1

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

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

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

对于几何体的每个面：

1. 计算脸部的质心;
2. 计算面部正常;
3. 计算面部矩阵;
4. 将3D点投影到脸部的2D平面上;
5. 创建几何体（使用Shape三角剖分算法进行三角化处理）;
6. 将面部矩阵应用于新创建的几何体
7. 创建一个Mesh并将其添加到Object3D（我尝试将所有几何图形合并为1，但它会因ShapeBufferGeometry而失败）

检查this fiddle。

小心点winding order或将THREE.Material.side放到THREE.DoubleSide以防止脸被剔除。

Answer 2

我想你可能想重新访问Three.js文档，特别是Shape对象。该页面上的示例代码使用bezierCurveTo，但如果您使用lineTo，则可以将其提供给您的点序列并创建凹多边形（包括孔）。