Just starting out with three.js and csg.js. I've set up a basic scene like this:
// Setting up the scene
const scene = new THREE.Scene();
// Adding a perspective camera - defining FOV, aspect ratio, near and far clipping plane
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
// Creating a renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
Now, my goal is to subtract a circle from a plane.
// Creating a 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;
// Creating a circle using 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;
// Attempting some CSG magic
const bspPlane = new ThreeBSP(plane);
const bspCircle = new ThreeBSP(circle);
const bspResult = bspPlane.subtract(bspCircle);
const result = bspResult.toMesh();
scene.add(result);
(Lastly, I have this code block that renders the scene from the camera.)
// Placing the camera along the z-axis
camera.position.z = 5;
// Rendering the scene through the camera view
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
The functionality of rendering the plane and circle in three.js using `scene.add()` seems to be working fine. I've included references to three-js-csg, csg, and three-2-csg in the HTML hoping to make it work. Am I missing something obvious?
Appreciate the help!