Three.js - Merge Multiple Geometries/meshes Removing Common Areas

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

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