Need help again 
I have a code that creates a cube and a cilinder.
I want the cilinder substracted from the cube so that I’ll get a cube with a hole in it.
Here’s the code:
> <!DOCTYPE html>
> <html>
> <head>
> <meta charset="utf-8">
> <title>CSG</title>
> <style>
> </style>
> </head>
> <body>
> <table style="margin-left: auto;margin-right: auto;height:655px;">
> <tr>
> <td colspan="2">
> <div style="border: 1px solid black;" id="container">
> <script type="module">
> import CSG from 'js/cgs-lib.js';
>
> window.CSG=CSG;
> </script>
> <script src="js/three.js"></script>
> <script defer>
>
> ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
> ///// VARIABLES //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
> ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
> var rotationposx=0;
> var rotationposy=0;
> var old_rotationposx=0;
> var old_rotationposy=0;
> var windowHalfX = 300;// (window.innerWidth/1.5);
> var windowHalfY = 145;
> var targetRotation = 0;
> var targetRotationOnMouseDown = 0;
> var mouseX = 0;
> var mouseY=0;
> var mouseXOnMouseDown = 0;
> var mouseYOnMouseDown=0;
>
> ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
> ///// RENDERER //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
> ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
>
> // Create a scene
> const scene = new THREE.Scene();
> scene.background = new THREE.Color( 0xf0f0f0 );
>
> // Create a camera
> const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
>
> // Create the renderer
> const renderer = new THREE.WebGLRenderer();
> renderer.setSize( window.innerWidth/1.5-10, 653 );
> renderer.setPixelRatio( window.devicePixelRatio*1.6 );
> renderer.shadowMap.enabled = true;
> renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
> document.getElementById("container").appendChild( renderer.domElement );
> document.addEventListener('mousedown', onDocumentMouseDown, false);
>
> ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
> ///// FUNCTIONS //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
> ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
>
> function onDocumentMouseDown(event) {
> if (event.clientX>165 && event.clientX<1435 && event.clientY>110 && event.clientY<765){
> event.preventDefault();
> old_rotationposx=rotationposx;
> old_rotationposy=rotationposy;
> mouseXOnMouseDown = event.clientX - windowHalfX;
> mouseYOnMouseDown=event.clientY - windowHalfY;
> }
> document.addEventListener('mousemove', onDocumentMouseMove, false);
> document.addEventListener('mouseup', onDocumentMouseUp, false);
> document.addEventListener('mouseout', onDocumentMouseOut, false);
> document.addEventListener('mousewheel', onDocumentMouseWheel, false );
> }
>
> function onDocumentMouseMove(event) {
> if (event.clientX>165 && event.clientX<1435 && event.clientY>110 && event.clientY<765){
> mouseX = event.clientX - windowHalfX;
> targetRotation = (mouseX - mouseXOnMouseDown) * 0.002;
> rotationposx=old_rotationposx+targetRotation;
> mouseY = event.clientY - windowHalfY;
> targetRotation = (mouseY - mouseYOnMouseDown) * 0.002;
> rotationposy=old_rotationposy+targetRotation;
> }
> }
>
> function onDocumentMouseUp(event) {
> old_rotationposx=rotationposx;
> old_rotationposy=rotationposy;
> document.removeEventListener('mousemove', onDocumentMouseMove, false);
> document.removeEventListener('mouseup', onDocumentMouseUp, false);
> document.removeEventListener('mouseout', onDocumentMouseOut, false);
> }
>
> ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
> ///// MAIN FUNCTION //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
> ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
> function Main(){
> //Clear the scene
> while(scene.children.length > 0){
> scene.remove(scene.children[0]);
> }
>
> // Create element (lengte, breedte, dikte)
> const cubegeometry = new THREE.BoxGeometry(1,1,1);
> // mesh
> var cubematerial = new THREE.MeshBasicMaterial({ color: 0x99eeff })
> const cube = new THREE.Mesh( cubegeometry, cubematerial );
> //set position (x,y,z)
> cube.position.set(0,0,0);
> scene.add(cube);
>
> // Create cilinder (lengte, breedte, dikte)
> const cilindergeometry = new THREE.CylinderGeometry(.2, .2, 2, 8, 1, false);
> // mesh
> var cilindermaterial = new THREE.MeshBasicMaterial({ color: 0xf94552 })
> const cilinder = new THREE.Mesh( cilindergeometry, cilindermaterial );
> //set position (x,y,z)
> cilinder.position.set(0,0,0);
> scene.add(cilinder);
>
> //const cubeCSG = CSG.fromMesh(cube);
> //const cilinderCSG = CSG.fromMesh(cilinder);
>
> //const cubeCilinderSubstractCSG = cubeCSG.substract(cilinderCSG);
> //const cubeCilinderSubstractMesh = CSG.toMesh(cubeCilinderSubstractCSG, new THREE.Matrix4());
>
> //cubeCilinderSubstractMesh.material = new THREE.MeshPhongMaterial({ color: 0xff00ff });
> //cubeCilinderSubstractMesh.position.set(0, 0, 0)
> //scene.add(cubeCilinderSubstractMesh);
>
> camera.position.z = 2;
>
> const animate = function () {
> requestAnimationFrame( animate );
>
> cube.rotation.y=rotationposx;
> cube.rotation.x=rotationposy;
> cilinder.rotation.y=rotationposx;
> cilinder.rotation.x=rotationposy;
> renderer.render( scene, camera );
> };
> renderer.render( scene, camera );
> animate();
>
>
> }
>
> </script>
> </div>
> </tr>
> </table>
> <script>
> Main();
> </script>
> </body>
> </html>
Everything works fine… until I activate these lines:
> //const cubeCSG = CSG.fromMesh(cube);
> //const cilinderCSG = CSG.fromMesh(cilinder);
>
> //const cubeCilinderSubstractCSG = cubeCSG.substract(cilinderCSG);
> //const cubeCilinderSubstractMesh = CSG.toMesh(cubeCilinderSubstractCSG, new THREE.Matrix4());
>
> //cubeCilinderSubstractMesh.material = new THREE.MeshPhongMaterial({ color: 0xff00ff });
> //cubeCilinderSubstractMesh.position.set(0, 0, 0)
> //scene.add(cubeCilinderSubstractMesh);
Result: only a black renderwindow
Can anyone help me out?
Thanks