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

Question

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

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

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

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

Answer 1

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

我在这里做了一个小提琴,你可以看到我的意思.结果如下:

• 在左侧,您可以看到我们在操作中使用的形状(仅用于可视化).
• 中间的布尔结果是通过从THREE.PlaneGeometry转换为BSP的THREE.BoxGeometry转换为BSP中减去转换为BSP 而创建的.
• 右侧的布尔结果是通过从本机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);

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