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

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

• javascript
• three.js
• vertices
• threecsg
• face

• 1 You can convert the ThreeCSG code into a generator and add yields to it so the browser doesnt dump you out. See my description at stackoverflow./questions/34631657/…. – fluffybunny Commented Feb 12, 2016 at 7:37
• @spacorum I updated my answer with an example... – Wilt Commented Feb 12, 2016 at 13:56
• @fluffybunny I´m still trying to get this yield concept. This are only a few code lines but extremely advanced for me. I simply cannot understand what this does and how to apply it to my current problem... – spacorum Commented Feb 12, 2016 at 16:17
• Compared to what you are trying to do by intersecting meshes, my code is silly, not advanced. – fluffybunny Commented Feb 12, 2016 at 22:40
• My coded is a kludge of sorts. Javascript is single threaded, and if your code doesnt return withing a set amount of time, the browser will crash you on purpose. By running little bits of your code in a settimer and then doing another settimer to run some more, you can inch your way through your algorithm. To make it 'easy' to use pre-existing code that has big for-loops, you can use a javascript generator (look it up) to turn the code into bite sized pieces you can then run in the timer chain. – fluffybunny Commented Feb 12, 2016 at 22:48

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