javascript - Three.js - 合并多个几何体/网格移除公共(public)区域

Question

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

我想删除所有这些额外的信息，因为它会在渲染的面上产生视觉故障，而且我无法正确计算合并的体积。我需要像最后一张图片那样的东西，一个只包含最小的网格外部/外面的面和顶点，移除内部的。

我尝试应用 ThreeCSG 来减去网格，但我发现它在尝试加载大模型时不断崩溃。我还尝试应用光线转换器来检测普通面孔，但这对大型模型的性能也有很大影响。

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

Answer 1

如果您使用 ThreeCSG和 bool 运算，您应该从一开始就尝试将您的对象定义为 BSP 树或节点。它将提供更精确的结果，并且可以帮助您在不使浏览器崩溃的情况下使更大的几何图形正常工作。

我做了 a fiddle here你在哪里可以明白我的意思。结果如下所示:

• 在左侧，您可以看到我们在操作中使用的形状(仅用于可视化)。
• 中间的 bool 结果是通过减去 THREE.PlaneGeometry 得到的从 THREE.BoxGeometry 转换为 BSP已转换为 BSP。
• 右侧的 bool 结果是通过从原生 BSP 框对象减去原生 BSP 平面创建的。

如您所见，中间的结果多了 5 个顶点，这意味着面也多了(顶部、两侧和底部多了 1 个，对 Angular 平面多了 2 个)。

如果你对这个结果做另一个 bool 运算，你会得到更多的点和顶点。您的 BSP 树将呈指数级增长...!

---

换句话说，您的 BSP 树会随着每个 bool 运算而变大，使其变慢，最终也可能崩溃。
如果您想进行大量 bool 运算，请尝试制作原生 BSP 形状以获得更好的结果，而不是使用转换后的 three.js 几何图形进行 bool 运算。

所以代替:

myBSP = new ThreeBSP( geometry );

做:

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

var node = new ThreeBSP.Node(polygons);

myBSP = new ThreeBSP(node);

然后进行 bool 运算...