Three.js

Question

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

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

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

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

Answer 1

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

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

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

然后进行布尔运算...

Three.js - 合并多个 geometries/meshes 删除公共区域

Three.js - Merge multiple geometries/meshes removing common areas

javascript

vertices

threecsg

face