Three.js - 合并多个几何/网格，删除公共区域 [英] Three.js - Merge multiple geometries/meshes removing common areas

问题描述

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

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

，你可以看到我的意思。结果如下所示：

• 在左侧，您可以看到我们在操作中使用的形状（仅用于可视化）。


• 中间的布尔结果是通过减去从<$ c $转换为BSP的 THREE.PlaneGeometry 创建的。 c> THREE.BoxGeometry 已转换为BSP。


• 右侧的布尔结果是通过从本机BSP框对象中减去本机BSP平面而创建的。

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

如果对此结果执行另一个布尔运算，您将获得更多的点和顶点。你的BSP树会以指数方式增长......！

---

换句话说，你的BSP树会随着每个布尔运算而变大它很慢，最后也可能崩溃。

如果你想做很多布尔运算，尝试使用原生BSP形状以获得更好的结果，而不是使用转换后的three.js几何进行布尔运算。

所以代替：

  myBSP = new ThreeBSP（几何）; 
  

do：

  var polygons = [
 //使用新的ThreeBSP.Polygon（顶点）定义你的多边形
]; 
 
 var node = new ThreeBSP.Node（polygons）; 
 
 myBSP = new ThreeBSP（node）; 
  

然后执行布尔操作......

I´m trying to merge two geometries/meshes (red and blue) into a unique one. But after creating a new geometry and applying geometry.merge() I found that all the inner vertices and faces are still there (the green area).

I would like to remove all that extra information, as it generates visual glitches on the rendered faces and also I cannot calculate the merged volume correctly.. I need something like on the last picture, a single mesh that only includes the minimal external/outer faces and vertices, removing the inner ones.

I tried applying ThreeCSG to subtract meshes but I´m founding that it crashes constantly when trying to load big models. I also tried to apply a raycaster to detect the common faces, but this also has great impact on performance on big models.

Is ThreeCSG the only good option here? But as I cannot use it on every model, I should discard it. I would like to apply something fast that doesn´t depend so much on the number of triangles of the mesh.

解决方案

If you work with ThreeCSG and boolean operations you should try to define your objects as BSP-trees or nodes from the start. It will give more precise results and it might help you to get your bigger geometries working without crashing your browser.

I made a fiddle here where you can see what I mean. The result looks like this:

• On the left you see the shapes we use in the operation (only to visualize).
• The boolean result in the middle was created by subtracting a THREE.PlaneGeometry that was converted to a BSP from a THREE.BoxGeometry which was converted to BSP.
• The boolean result on the right was created by subtracting a native BSP plane from a native BSP box object.

As you can see the middle result has 5 more vertices meaning also more faces (1 extra in the top, both sides and the bottom and 2 more in the diagonal plane).

If you do another boolean operation on this result you will get even more points and vertices. Your BSP tree will grow exponentially...!

---

In other words your BSP tree will get bigger with each boolean operation making it slow and it will possibly also crash in the end.
If you want to do lots of boolean operations try to make native BSP shapes for better results instead doing boolean operations with converted three.js geometries.

So instead of:

myBSP = new ThreeBSP( geometry );

do:

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

var node = new ThreeBSP.Node(polygons);

myBSP = new ThreeBSP(node);

And then do your boolean operations...

这篇关于Three.js - 合并多个几何/网格，删除公共区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！