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

Question

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

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

我尝试应用ThreeCSG来减去网格，但我发现它在尝试加载大型模型时不断崩溃。我还尝试使用raycaster来检测常见的面孔，但这对大型模型的性能也有很大的影响。

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

Answer 1

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

我做了a fiddle here，你可以看到我的意思。结果如下：

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

正如您所看到的，中间结果还有5个顶点意味着更多的面（顶部，两侧和底部都有1个额外，对角线平面还有2个）。

如果对此结果执行另一个布尔运算，您将获得更多的点和顶点。您的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);

然后做你的布尔操作......