CSG substraction

Need help again :slight_smile:

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

Here is a jsfiddle where it should work
https://jsfiddle.net/EstebanFuentealba/necwdaL8/

Saludos!

I copied the code to my code, but I get an error saying CSG is not defined.

I imported it like this:

> <script type="module">
>      import CSG from "https://cdn.jsdelivr.net/gh/manthrax/THREE-CSGMesh/three-csg.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;
> ...

any idea?

Does anyone have an idea how to fix this?