CSG subtraction fills inner mesh instead of creating through-hole

Hi all,

I’m working on a kitchen countertop model in Three.js where I need to cut a hole for a sink using CSG operations.
The basic setup:

  • Countertop mesh (box geometry)

  • Sink mesh (loaded from GLB)

  • Using THREE-CSGMesh for subtraction

Expected:
The sink’s outer edge should cut through the countertop, leaving a clean through-hole.

Actual:
The subtraction seems to fill the inner mesh faces instead of cutting all the way through, so I end up with a filled “cap” instead of a hole.

Example image:

Code snippet:

TopMesh.updateMatrixWorld(true);

convexMesh.updateMatrixWorld(true);

// Create brushes with geometry + world transform

const TopBrush = new Brush(TopMesh.geometry.clone(), TopMesh.matrixWorld);

const SinkBrush = new Brush(convexMesh.geometry.clone(), convexMesh.matrixWorld);

// Perform subtraction

const result = new Evaluator().evaluate(TopBrush, SinkBrush, SUBTRACTION);

// Add the new result mesh

resultMesh = new THREE.Mesh(

    result.geometry,

new THREE.MeshStandardMaterial({ color: 0x00ff00 })

);

scene.add(resultMesh);

This is exactly what any CSG would do by design. See the illustration - the subtraction removes segments B and D, because they belong to the sink basin. Segment C remains, because it is not a part of the sink basin.

1 Like

Thanks for the explanation — I see now why CSG removes B and D and leaves C.
In my case though, I don’t actually want the whole basin mesh to be used for subtraction.

What I’m trying to achieve is:

  • Only cut out the outer rim shape (the sink’s top opening) from the countertop

  • Ignore the sloped inner basin so that the cut goes all the way through

Basically, I just need a flat “cutout” profile from the sink model, not the full 3D basin.

Possible approaches I’m considering:

  1. Create a separate, simple rectangular ring geometry (matching the sink’s outer rim) and use that for CSG subtraction.

  2. Extract the rim vertices from the sink mesh and generate an extruded shape for subtraction.

  3. Use the sink’s bounding shape projected to the countertop plane as the CSG mesh.

Has anyone tried a clean “rim-only” CSG cut like this before?

all three of these kinda sound the same.

i notice your input mesh is called “convex” which is somewhat key. If you take the THREE.ConvexGeometry of the sink, and subtract that from the counter it should be giving you what you want. IF that’s already the case, then maybe drag the 2 models in here and we can take a look.

Thank you for the suggestion. I’ll try using THREE.ConvexGeometry with the sink model and see if that resolves the issue.

Instead of using the sink model as the subtraction shape, use a boxgeometry. Then you will have a hole in your table top that you can place a sink into

3 Likes

with a cube.. you would have to determine the extents manually and inset it by some amount. that could work.. but I feel like the convexgeometry is more general purpose and will work with other sink shapes too.

heres an example that uses a cylinder to cut a hole in the table to fit a basin in it.

Basin in Table : SBEDIT : Online Code Editor

{59BFA1DB-AB36-4AA3-A602-36AE585FB3F6}

It would have been faster and easier to use Blenders Boolean modifier.

2 Likes

..and for the sake of completeness, here’s your example but with ConvexGeometry for the basin:

( was a bit fiddly to get close to right , and the topology looks messed up…

edit: fixed it by adding some fake UVs to the convex geom… :smiley: )

2 Likes

Thanks for sharing the example — that’s really helpful!

Thanks for the earlier suggestion — I tried using THREE.ConvexGeometry and it’s working now!

2 Likes

naaaaice :smiley: