Determining clicked side/face of CSG Mesh

Hello everyone

Two weeks ago I posted a question on this forum about a project, and if anyone had some tips. @Mugen87 made me aware of CSG, which I use now since it is indeed a nifty tool for my use-case.

I need to create objects with certain pieces cut out dynamically, like a notch with a length of X and a depth of X. But before I can program anything like that, I need to know what side of the object needs to be cut. Before CSG I did this with raypicking for determining the clicked face, after that I created a function to determine what side this face was a part of. This was pretty easy knowing that every side only had 2 faces.

Now when I create a Mesh with CSG (which is working perfectly for my use-case) the geometry has a lot more faces, which is normal. But the problem is that there are A LOT of faces now, 188 in stead of the 12 faces that I had before.

This is the kind of object that I am creating:

Now for my question:
Do you guys have any idea how I could “clean up” this geometry so that there are less faces? Because I feel that there are too many faces for the shape that I am created.
And a follow-up question:
How could/should I determine the selected side? When do I ‘know’ when the front, side, top or bottom is selected when my object can change at runtime?

I would post code but I don’t know if it is relevant because it’s more conceptual.

Any help is really appreciated!!

Sounds like you need some sort of SimplifyModifier. three.js does provide such a modifier and a respective example:

However, I’m not sure if it’s very useful to you since I guess you want to retain the shape of the geometry. In other words, you can only merge coplanar faces which is not supported by the modifier.

How could/should I determine the selected side? When do I ‘know’ when the front, side, top or bottom is selected when my object can change at runtime?

If you know the direction the face points to (the face normal) and the view direction and position, you should be able to derive some useful information from these data. The view direction is the camera direction (use Camera.getWorldDirection()) and the view position is the camera position (use Object3D.getWorldPosition()). Both entities are expressed in world space.

Thanks! That really was a huge help. I have been able to correctly find the selected side of my objects, despite the changing nature of it. Unfortunately the simplifier isn’t working for me. There still were a lot of faces, despite me playing with the count value for the simplifier. And on the other side it would change my object too much.

The problem that I’m having with that is my lines that are being drawn ‘bleed’ through:

As you remove rectangular pieces from a rectangular body, maybe makes sense to do it with THREE.Shape() and THREE.ExtrudeBufferGeometry()?
Here is a post with a concept of how to “pierce” a wall to make a window (no CSG): Restrict an object to another?
Saying in general, you create a shape with holes or just change the shape, “biting off” pieces from its sides, then extrude it.

What is, in your experience, more useful for creating objects with pieces “bitten off”? I added CSG now, which is working apart for the “weird” lines that I get. I am wondering if I should go another way, like the way you suggested with ExtrudeBufferGeometry.

If those lines don’t bother you, so using CSG is totally fine, as it seems a natural way of how to subtract things :slight_smile:
But if they do, well, I would try to find an alternative way.

Haha okay :smiley: Thanks for the help!