Problem with subtraction of two cylinders using CSG and three.js

154 Views Asked by At

I am trying to do (what seems to me) a simple csg operation using three.js and ThreeCSG, but i don't get anywhere.

I am using the webgl_buffergeometry_indexed.html example as template for rendering with the following added code:

        import * as THREE from 'three';
        window.THREE=THREE;
        import * as THREECSG from './lib/THREECSG/threeCSG.js';
                ...
        function init() {

                camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
                camera.position.z = 64;

                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0x050505 );

                const light = new THREE.HemisphereLight();
                scene.add( light );

                const cylinder = new THREE.CylinderGeometry( 5, 5, 1, 40 );
                const hole = new THREE.CylinderGeometry( 3, 3, 3, 40 );
                const material = new THREE.MeshPhongMaterial({color: 0xFF0000});
                var cylInMesh = new THREE.Mesh( hole, new THREE.MeshNormalMaterial());
                var cylOutMesh = new THREE.Mesh( cylinder, new THREE.MeshNormalMaterial());
                cylInMesh.geometry.computeFaceNormals();
                cylInMesh.geometry.computeVertexNormals();
                var cylIn_bsp = new ThreeBSP( cylInMesh );
                cylOutMesh.geometry.computeFaceNormals();
                cylOutMesh.geometry.computeVertexNormals();
                var cylOut_bsp = new ThreeBSP( cylOutMesh);
                var resultBSP = cylOut_bsp.subtract(cylIn_bsp);

                mesh = resultBSP.toMesh(material);
                mesh.geometry.computeVertexNormals();
                scene.add(mesh);

                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

The code then continues like in the example, as I haven't modify it.

When running the application this is what I get: result of the csg operation

I don't have preference for any CSG library, but i have tried THREEE-CSGMesh, with neither success.

Maybe worth to mention that I am running the code on Firefox browser version 110.0.

Note: I am trying use csg operations as later on i will try more complex thing. Extruding to get the same geometry is out of the scope, please.

0

There are 0 best solutions below