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

Question

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.

Answer 1

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...