Three.js - Why is csg.js not working for boolean operations?

Question

I'm new to both three.js and csg.js. I've created a basic scene like this:

// Create scene
const scene = new THREE.Scene();
// Create perspective camera - FOV, aspect ratio, near + far clipping plane
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
// Create renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

And I'm trying to subtract a circle from a plane.

// Create plane geometry
const pgeometry = new THREE.PlaneGeometry();
const pmaterial = new THREE.MeshBasicMaterial({color: 0xE8ADAA, opacity: 0.7, transparent: true});
const plane = new THREE.Mesh(pgeometry, pmaterial);
plane.position.z = 3;

// Create circle BoxGeometry
const ogeometry = new THREE.CircleGeometry(0.5, 32);
const omaterial = new THREE.MeshBasicMaterial({color: 0xE8ADAA});
const circle = new THREE.Mesh(ogeometry, omaterial);
circle.position.z = 3;

// CSG test
const bspPlane = new ThreeBSP(plane);
const bspCircle = new ThreeBSP(circle);
const bspResult = bspPlane.subtract(bspCircle);
const result = bspResult.toMesh();
scene.add(result);

(Then I have this at the end, to render the scene from the camera.)

// Camera position on z-axis
camera.position.z = 5;
// Render scene from camera
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

The three.js portion (rendering the plane and the circle by using `scene.add()' works, and I've attached three-js-csg, csg, and three-2-csg in the HTML in hopes of getting something to work. Is there anything glaringly wrong?

Thanks.

Marquizzo Marquizzo · Accepted Answer · 2021-01-09T23:25:07

CSG doesn’t work with two non-manifold geometries. Your plane and circle are infinitely thin so the math of subtracting one from the other doesn’t work.

You need to use geometry that has an “inside” and “outside”, so instead of a plane, use a cube with a small depth. Instead of a circle, use a cylinder.

Three.js - Why is csg.js not working for boolean operations?

1 Answers