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

【问题标题】：Three.js - Merge multiple geometries/meshes removing common areasThree.js - 合并多个几何图形/网格，去除公共区域
【发布时间】：2016-05-23 04:34:04
【问题描述】：

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

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

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

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

【问题讨论】：

您可以将 ThreeCSG 代码转换为生成器并为其添加产量，这样浏览器就不会将您排除在外。在stackoverflow.com/questions/34631657/… 上查看我的描述。
@spacorum 我用一个例子更新了我的答案......
@fluffybunny 我仍在尝试了解这个收益概念。这只是几行代码，但对我来说非常先进。我根本无法理解它的作用以及如何将其应用于我当前的问题......
与您尝试通过相交网格进行的操作相比，我的代码很愚蠢，而不是高级。
我的代码是杂乱无章的。 Javascript 是单线程的，如果你的代码在一定时间内没有返回，浏览器会故意让你崩溃。通过在 settimer 中运行一小部分代码，然后执行另一个 settimer 来运行更多代码，您可以逐步完成算法。为了让使用具有大 for 循环的预先存在的代码变得“容易”，您可以使用 javascript 生成器（查找它）将代码变成小块，然后您可以在计时器链中运行。

标签： javascript three.js vertices threecsg face

【解决方案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);

然后进行布尔运算...

【讨论】：

我多么喜欢一个好的 JSFiddle 来玩 :) 感谢您的宝贵时间。我可能很幸运：我从形状构建原始网格，我可以构建它，因为我知道每个顶点的位置。因此，将其更改为多边形，然后遵循您的策略应该很容易！我现在正在处理这个问题。
@spacorum 酷，听起来不错。遗憾的是没有与 BSP 定义更兼容的原生 Three.js 几何。但是一些自定义代码就可以了。
在我第一次尝试之后，我可以说我能够将网格加载为多边形而不是形状（我看到它有点慢！）。但是当应用 .subtract() 时，机器在减去前 20 或 30 个网格后会崩溃。事实上，我想要的是 .union() 而不是减法，但这个动作在这里似乎不起作用（它只保留我的第一个网格）。即使如此，它也可以在您的小提琴中使用。回到它，我必须想办法！
我不得不说，我从来没有对一个对象做超过 10 次布尔运算。 ThreeCSG 没有优化，它可以处理的 BSP 树的大小有一定的限制，并且肯定会使事情变慢。祝你好运！
@spacorum 合并你的几何图形有什么运气吗？