Three.js -合并多个几何图形/网格删除公共区域

Question

我试图把两个几何/网格(红色和蓝色)合并成一个独特的。但是在创建一个新的几何图形并应用geometry.merge()之后，我发现所有内部顶点和面仍然存在(绿色区域)。

我想删除所有这些额外的信息，因为它会在呈现的人脸上产生视觉故障，而且我也无法正确计算合并的卷。我需要一些东西，在最后的图片，一个单一的网格，只包括最小的外部/外部面和顶点，删除内部的。

​

​

我尝试使用ThreeCSG来减去网格，但我发现它在加载大型模型时不断崩溃。我也试着用一个光机来检测普通的面孔，但是这也会对大模型的性能产生很大的影响。

ThreeCSG是这里唯一的好选择吗？但是，由于我不能在每种型号上使用它，所以我应该放弃它。我想应用一些快速的东西，不太依赖于网格的三角形数目。

Answer 1

如果您使用ThreeCSG和布尔操作，您应该尝试从一开始就将对象定义为BSP或节点。它将提供更精确的结果，并可能帮助您使您的更大的几何图形工作，而不破坏您的浏览器。

我做了这里的小提琴，你可以在那里看到我的意思。结果如下：

​

​

• 在左边，您可以看到我们在操作中使用的形状(仅用于可视化)。
• 中间的布尔结果是通过从转换为BSP的THREE.PlaneGeometry中减去一个转换为BSP的THREE.BoxGeometry来创建的。
• 右边的布尔值是通过从本地BSP框对象中减去本机BSP平面来创建的。

正如你所看到的，中间的结果有5个更多的顶点，也意味着更多的面(在顶部，两边和底部多一个，在对角线平面上多两个)。

如果您对这个结果执行另一个布尔运算，您将得到更多的点和顶点。你的BSP树会成倍增长…！

换句话说，你的BSP树会随着每一个布尔运算变得更大，使它变慢，最后它可能也会崩溃。

如果您想要做大量的布尔操作，尝试使本地BSP形状获得更好的结果，而不是使用转换后的three.js几何图形执行布尔操作。

因此，与其：

myBSP = new ThreeBSP( geometry );

做：

var polygons = [
    // define your polygons using new ThreeBSP.Polygon( vertices )
];

var node = new ThreeBSP.Node(polygons);

myBSP = new ThreeBSP(node);

然后做你的布尔运算。