Three.js多边形三角剖分在伪重复点中失败

其中有一个函数

triangulateShape（）

。现在，我遇到了一个使用Javascript裁剪器简化多边形三角化的失败。Clipper中的简化是使用联合来完成的。将联合确定为查找简单多边形或包含两个简单多边形内部区域的多边形。同一篇文章说，在简单多边形中，“每个顶点正好有两条边相交”，还确定了一个弱简单多边形，其中边可以相交，但没有提到边不相交，但一些或多个顶点相交的边情况。所以这类情况是简单多边形还是弱简单多边形还不清楚

Clipper选择了一种允许的方法：简单多边形可以有类似于接触（或伪重复）顶点的顶点。导致生成的简单多边形不是three.js:s

triangulateShape（）

所期望的简单多边形

下图显示了此边缘情况的两个示例。左侧多边形是一个“简单”多边形，红色圆点是一个“重复”多边形。右边的那个也是一个“简单”多边形，但红点是一个“重复”多边形

triangulateShape（）

在这些情况下失败，因为它跟踪数组中的点

allPointsMap

，并从此处检查点是否重复。要删除这些重复项，我有两个选项：

---

选项1.

更改Javascript裁剪器内部代码以使用额外参数处理这些问题，例如

breakPolygonByWeakDuplicates

的

SimplePolygon（）

和

SimplePolygons（）

。正如安格斯·约翰逊（Angus Johnson）所描述的那样，这种变化可能是：

在IntersectEdges（）方法中，将下列内容从

if ( e1Contributing && e2contributing ) { if ( e1stops || e2stops || (e1Wc != 0 && e1Wc != 1) || (e2Wc != 0 && e2Wc != 1) || (e1->polyType != e2->polyType && m_ClipType != ctXor) ) AddLocalMaxPoly(e1, e2, pt); else DoBothEdges( e1, e2, pt ); }

---

更新：我制作了一个SVG，其中有一个多边形示例，该多边形的点（150150）是弱重复或伪重复。以下显示了表示此多边形的各种方法：

var weakDuplicate1 = [{"X":100,"Y":200},{"X":150,"Y":150},{"X":100,"Y":100},{"X":200,"Y":100},{"X":150,"Y":150},{"X":200,"Y":200}]; var weakDuplicate2 = [100,200, 150,150, 100,100, 200,100, 150,150, 200,200]; var weakDuplicate3 = "M100,200 L150,150 L100,100 L200,100 L150,150 L200,200Z"; var weakDuplicate1=[{“X”：100，“Y”：200}，{“X”：150，“Y”：150}，{“X”：100，“Y”：100}，{“X”：200，“Y”：100}，{“X”：150，“Y”：150}，{“X”：200，“Y”：200}]； var weakDuplicate2=[100200150150100100200100150200200]； var weakDuplicate3=“m100200 l150150 l00100 l200100 l150150 l200200z”；

---

更新：如果有人已经设法找到了一个解决方案，也三角剖分多边形有这样的弱重复点，这将是非常有帮助的，如果你能公布你的发现

---

更新：已测试选项1，但未成功：。多边形仍然是一个整体，尽管它应该分为两部分。也许安格斯·约翰逊（克利伯的创始人）有更好的解决方案

---

更新：这里是一个更复杂的“简单”多边形（在Clipper中简化后）。所有看起来在一起的点都完全相同。要将其划分为真正简单的多边形，需要将其划分为多个部分。我的眼睛说这里有4个底部多边形和一个（更大的）上部多边形有一个洞，所以总的来说，简化后会产生5个外部多边形和1个洞。或者一个具有5个孔的外部多边形。或者可能是外层和孔洞的其他组合。它可以用许多不同的方式简化

小提琴位于（也是多边形的JSON版本）

以下是编号为0到25的点：

在图像中，顶点2、11、14、25是相同的坐标，因此它是“伪多重垂直”。顶点3不是重复的，但它与边6-7接触

---

更新：

基于移动重复点的方法似乎有效。如果复制点被位于复制坐标特定距离上的两个点替换，从而产生“断笔笔尖”效果，则三角剖分有效，因为生成的多边形是真正的简单多边形，这是三角剖分器的要求。此外，轮廓和孔之间以及孔和孔之间不允许重复。下图显示了此方法的效果。这里的距离是10px以显示效果，但实际上，0.001足以使多边形变得简单。另外，Three.js r58中的默认三角剖分器也未按预期工作，但如果它更改为Poly2tri，则一切正常。此相当长的错误报告中描述了此过程：

---

您可以编写一个函数，检测重复的顶点并将其向后移动1px以使其离散（它们不再共享公共边）。这样就不会有更多的公共边，也不会产生错误，但视觉效果看起来仍然一样

---

这是一种粗糙的解决方案，但可能有效。

在

three.js

中使用的三角剖分解决方案存在几个问题。还有其他几个javascript三角剖分库可用，将来很可能会将当前库替换为其他库，例如

earcut.js

。对此有一个讨论

正如所演示的那样，自相交边的问题对于耳切来说不是问题

---

如果你已经想在你的项目中使用不同的三角测量解决方案，我想参考我做的一个例子。适配器允许将其他三个三角测量库无缝连接到three.js项目：

• -耳切三角测量库
• -poly2tri三角测量库
• -libtess细分库

您只需包含

triangulation.js

文件：

<script src="triangulation.js"></script>

根据您选择的库，您显然需要为库本身嵌入文件。目前，对于

libtess

，需要额外的

tessy.js

，可以在存储库中找到

---

阅读有关该项目的更多信息

谢谢您的回答！这个解决方案听起来确实不错。你的意思是向后=朝前一个方向吗？是的，我为没有服用他汀类药物而道歉 var weakDuplicate1 = [{"X":100,"Y":200},{"X":150,"Y":150},{"X":100,"Y":100},{"X":200,"Y":100},{"X":150,"Y":150},{"X":200,"Y":200}]; var weakDuplicate2 = [100,200, 150,150, 100,100, 200,100, 150,150, 200,200]; var weakDuplicate3 = "M100,200 L150,150 L100,100 L200,100 L150,150 L200,200Z";

<script src="triangulation.js"></script>

THREE.Triangulation.setLibrary('earcut');