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:
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.
