Looking for Updated plug-in for CSG

I made a shinier demo for my CSG port and fixed some bugs:




@manthrax good work. I was able to make it work with Simple Box, Sphere and Tube Geometry but unfortunately its not working with extruded mesh geometry. Am I expecting too much?

Do you have a repro of the issue that i could see?

1 Like

@mrdoob was this pulled into main? Is there an example? I am still importing @manthrax lib to complete this operation, which is fine, but I wasn’t sure if this is now redundant.

No, it’s no part of the main repository.

1 Like

Hi there, I am not quite sure if this is the right place, but I am referring to @manthrax ‘s version of the CSG library.
So far, mesh subtraction works great, but it does not seem to take the meshes’ positions into account. Can anybody verify this?

I have an example here: https://jsfiddle.net/zyj1oucx/

The actual code starts on line 2352. (The threejs and csg libraries are included inline above).

The code should subtract the simple box “clampingMesh” from the complex mesh “component” at position (-15, -50, 0).
Instead, it’s subtracted at (0, 0, 0,).

The sample shows the mesh to subtract at the right position, but the subtraction is on top of the cylinder.


Does the following update fiddle look better? https://jsfiddle.net/zhys4b8w/

The idea is to update Object3D.matrix of clampingMesh before performing the subtraction.

1 Like

Thank you very, very much. This is almost what I tried to achieve: https://jsfiddle.net/3snmhuvb/
I must have overseen the part with updating the matrix in the Github documentation. Shame on me.

Now I have to find out, how to “close” the subtracted shape. It is not desired to see through.

Edit: Experimenting with double sided materials does not help. Am I missing something, again?

Behold another example of CSG in Threejs

My Docs : https://sbcode.net/threejs/csg/

CodeSandBox Link : https://codesandbox.io/s/github/Sean-Bradley/Three.js-TypeScript-Boilerplate/tree/csg/?file=/src/client/client.ts

It uses the CSGMesh.js from https://github.com/manthrax/THREE-CSGMesh/blob/49f10e7aac97a8a1f16740eeef5e30565f598b8d/CSGMesh.js

I converted it to TypeScript

I also converted the Chandler Prall ThreeCSG, but I found this Manthrax CSGMesh the best so far.

To develop locally,

git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git
cd Three.js-TypeScript-Boilerplate
npm install -g typescript
git checkout csg
npm install
npm run dev
1 Like

I think it may be relevant here, we are working on something called Buerli: http://buerli.io We are just wrapping up and plan to release - everything is working as expected but it’s marketing and security that we’re trying to complete. Solid modelling will be completely free. This doesn’t just do basic booleans but pretty much everything that a real, parametric CAD can do: sketches, nurbs, constraints, extrusions, revolves, blends, slices, etc. At the same time it’s tied into threejs as you see in these screenshots, you can use three-paths for instance.

if you need it quickly, you could write us for beta access.


Thank you Sean for writing that! I took your code, removed the existing geometry and added an example for Extrude Geometry use-case. (Referencing @waqast comment from earlier) Working well!


Codepen: https://codesandbox.io/s/cool-tdd-h94t8?file=/src/client/client.ts

1 Like

Cool :slight_smile: Glad you found it useful!

1 Like

is your version support plane subtract operator?

looking for CSG version support plane.subtract operator


import * as THREE from 'three';
import { CSG } from 'three-csg-ts';

// Make 2 meshes..
const plane= new THREE.Mesh(new THREE.PlaneGeometry(3, 3, 1, 1), new THREE.MeshNormalMaterial());
const box = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshNormalMaterial());

// Make sure the .matrix of each mesh is current

// Perform CSG operations
// The result is a THREE.Mesh that you can add to your scene...
//this result was wrong.
const subRes = CSG.subtract(plane, box);
1 Like

Mine was a typescript rewrite of the manthrax version (https://github.com/manthrax/THREE-CSGMesh) which was in turn a rewrite of the evenw version (https://github.com/evanw/csg.js)
So they are basically all the same operations.

The problem with subtracting a plane though is that it has no volume. So nothing is subtracted.
What result are you after?

1 Like

they probably want to keep things on one side of the plane. could be worked around by using huge box or tetrahedron instead of that plane.


You could also just use a clipping plane if you don’t need any other shapes beside a plane.

1 Like

Have you checked the blender bool operator? is also support plane diff with box.

I use your version and it works great :slight_smile:

But i also want to able to use the result as an instancemesh so that i can create the mesh once (with holes etc.) but use it the same as the instancemesh.

Is this possible? Or must the finalmesh be converted to the intancemesh?

you do the conversion.
Take the geometry of the final CSG mesh that was created, and use it in your new instancedmesh

Thank you seanwasere, it works. :slight_smile: