javascript - 每个面有 K 个顶点的 3D 点的三 Angular 剖分

Question

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

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

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 三 Angular 剖分算法(Three.js 未提供)；
• 使用通常用于 Three.js Shape 对象的 2D 三 Angular 剖分算法，并对几何体的每个面应用一些变换。

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

对于几何体的每个面:

1. 计算人脸的质心；
2. 计算人脸法线；
3. 计算人脸矩阵；
4. 将 3D 点投影到面部的 2D 平面上；
5. 创建几何体(使用 Shape 三 Angular 剖分算法进行三 Angular 剖分)；
6. 将面矩阵应用于新创建的几何体
7. 创建一个 Mesh 并将其添加到 Object3D(我试图将所有几何体合并为 1，但它因 ShapeBufferGeometry 而失败)

检查 this fiddle .

注意winding order您的顶点或将 THREE.Material.side 放到 THREE.DoubleSide 以防止面被剔除。