HalfdanJ · July 30, 2016 22:35
diff --git a/csgTest.html b/csgTest.html
 <!doctype html>
 <html>
 	<head>
 		<title>Three.js Boilerplate</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

 		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

 		<script src="https://rawgithub.com/chandlerprall/ThreeCSG/master/ThreeCSG.js"></script>

 		<script src="https://rawgithub.com/dataarts/dat.gui/master/build/dat.gui.min.js"></script>
 		<script src="https://rawgithub.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>

 		<style>
 		body {
 			overflow	: hidden;
 			padding		: 0;
 			margin		: 0;

 			color		: #222;
 			background-color: #BBB;
 			font-family	: arial;
 			font-size	: 100%;
 		}
 		</style>
 	</head>
 <body>
 	<!-- three.js container -->
    	<div id="container"></div>
 	<!-- info on screen display -->

 	<script type="text/javascript">
 		var stats, scene, renderer, composer;
 		var camera, cameraControls;

 		var Variables = function(){
 			this.speed = 1.0
 		}
 		var variables = new Variables();

 		var gui = new dat.GUI();
 		gui.add(variables, 'speed', 0, 2)


 		if( !init() )	animate();

 		// init the scene
 		function init(){

 			renderer = new THREE.WebGLRenderer({
 				antialias		: true,	// to get smoother output
 			});
 			renderer.setClearColor( 0xbbbbbb );

 			renderer.setSize( window.innerWidth, window.innerHeight );
 			document.getElementById('container').appendChild(renderer.domElement);

 			// add Stats.js - https://github.com/mrdoob/stats.js
 			stats = new Stats();
 			stats.domElement.style.position	= 'absolute';
 			stats.domElement.style.bottom	= '0px';
 			document.body.appendChild( stats.domElement );

 			// create a scene
 			scene = new THREE.Scene();

 			// put a camera in the scene
 			camera	= new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000 );
 			camera.position.set(0, 0, 5);
 			scene.add(camera);

 			// create a camera contol
 			cameraControls	= new THREE.TrackballControls( camera,  renderer.domElement  )

 			var dirLight = new THREE.DirectionalLight(0xffffff, 1);
   			dirLight.position.set(100, 100, 50);
   			scene.add(dirLight);

 			// Objects
 			//var geometry	= new THREE.TorusGeometry( 1, 0.42, 16, 16 );
 			//var material	= new THREE.MeshNormalMaterial();
 			//var mesh	= new THREE.Mesh( geometry, material );
 			//scene.add( mesh );



 		}

 		// animation loop
 		function animate() {
 			requestAnimationFrame( animate );

 			// do the render
 			render();

 			// update stats
 			stats.update();
 		}

 		var result;

 		// render the scene
 		function render() {
 			// variable which is increase by Math.PI every seconds - usefull for animation
 			var PIseconds	= Date.now() * Math.PI;

 			// update camera controls
 			cameraControls.update();

 			// animation of all objects
 			//scene.traverse(function(object3d, i){
 			//	if( object3d instanceof THREE.Mesh === false )	return
 				//object3d.rotation.y = variables.speed * PIseconds*0.0003 * (i % 2 ? 1 : -1);
 				//object3d.rotation.x = variables.speed * PIseconds*0.0002 * (i % 2 ? 1 : -1);
 			//})

 			if(result){
 				scene.remove(result)
 			}
 			var start_time = (new Date()).getTime();
 			var cube_geometry = new THREE.CubeGeometry( 3, 3, 3 );
 			var cube_mesh = new THREE.Mesh( cube_geometry );
 			//cube_mesh.position.x = -7;

 			var cube_bsp = new ThreeBSP( cube_mesh );
 			var sphere_geometry = new THREE.SphereGeometry( 0.8, 4, 4 );
 			var sphere_mesh = new THREE.Mesh( sphere_geometry );
 			sphere_mesh.position.x = -0.7*Math.sin( Date.now() /1000);
 			sphere_mesh.position.z = -0.6*Math.sin( Date.now() /1021);
 			var sphere_bsp = new ThreeBSP( sphere_mesh );

 			var subtract_bsp = cube_bsp.subtract( sphere_bsp );
 		 	result = subtract_bsp.toMesh( new THREE.MeshBasicMaterial({ wireframe: true}) );
 			result.geometry.computeVertexNormals();

 			scene.add(result );
 			console.log( 'Example 1: ' + ((new Date()).getTime() - start_time) + 'ms' );

 			// actually render the scene
 			renderer.render( scene, camera );
 		}
 	</script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Three.js Boilerplate</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

	<script src="https://rawgithub.com/chandlerprall/ThreeCSG/master/ThreeCSG.js"></script>

	<script src="https://rawgithub.com/dataarts/dat.gui/master/build/dat.gui.min.js"></script>
	<script src="https://rawgithub.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>

	<style>
	body {
	overflow : hidden;
	padding : 0;
	margin : 0;

	color : #222;
	background-color: #BBB;
	font-family : arial;
	font-size : 100%;
	}
	</style>
	</head>
	<body>
	<!-- three.js container -->
	<div id="container"></div>
	<!-- info on screen display -->

	<script type="text/javascript">
	var stats, scene, renderer, composer;
	var camera, cameraControls;

	var Variables = function(){
	this.speed = 1.0
	}
	var variables = new Variables();

	var gui = new dat.GUI();
	gui.add(variables, 'speed', 0, 2)


	if( !init() ) animate();

	// init the scene
	function init(){

	renderer = new THREE.WebGLRenderer({
	antialias : true, // to get smoother output
	});
	renderer.setClearColor( 0xbbbbbb );

	renderer.setSize( window.innerWidth, window.innerHeight );
	document.getElementById('container').appendChild(renderer.domElement);

	// add Stats.js - https://github.com/mrdoob/stats.js
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.bottom = '0px';
	document.body.appendChild( stats.domElement );

	// create a scene
	scene = new THREE.Scene();

	// put a camera in the scene
	camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.set(0, 0, 5);
	scene.add(camera);

	// create a camera contol
	cameraControls = new THREE.TrackballControls( camera, renderer.domElement )

	var dirLight = new THREE.DirectionalLight(0xffffff, 1);
	dirLight.position.set(100, 100, 50);
	scene.add(dirLight);

	// Objects
	//var geometry = new THREE.TorusGeometry( 1, 0.42, 16, 16 );
	//var material = new THREE.MeshNormalMaterial();
	//var mesh = new THREE.Mesh( geometry, material );
	//scene.add( mesh );



	}

	// animation loop
	function animate() {
	requestAnimationFrame( animate );

	// do the render
	render();

	// update stats
	stats.update();
	}

	var result;

	// render the scene
	function render() {
	// variable which is increase by Math.PI every seconds - usefull for animation
	var PIseconds = Date.now() * Math.PI;

	// update camera controls
	cameraControls.update();

	// animation of all objects
	//scene.traverse(function(object3d, i){
	// if( object3d instanceof THREE.Mesh === false ) return
	//object3d.rotation.y = variables.speed * PIseconds0.0003 (i % 2 ? 1 : -1);
	//object3d.rotation.x = variables.speed * PIseconds0.0002 (i % 2 ? 1 : -1);
	//})

	if(result){
	scene.remove(result)
	}
	var start_time = (new Date()).getTime();
	var cube_geometry = new THREE.CubeGeometry( 3, 3, 3 );
	var cube_mesh = new THREE.Mesh( cube_geometry );
	//cube_mesh.position.x = -7;

	var cube_bsp = new ThreeBSP( cube_mesh );
	var sphere_geometry = new THREE.SphereGeometry( 0.8, 4, 4 );
	var sphere_mesh = new THREE.Mesh( sphere_geometry );
	sphere_mesh.position.x = -0.7*Math.sin( Date.now() /1000);
	sphere_mesh.position.z = -0.6*Math.sin( Date.now() /1021);
	var sphere_bsp = new ThreeBSP( sphere_mesh );

	var subtract_bsp = cube_bsp.subtract( sphere_bsp );
	result = subtract_bsp.toMesh( new THREE.MeshBasicMaterial({ wireframe: true}) );
	result.geometry.computeVertexNormals();

	scene.add(result );
	console.log( 'Example 1: ' + ((new Date()).getTime() - start_time) + 'ms' );

	// actually render the scene
	renderer.render( scene, camera );
	}
	</script>
	</body>
	</html>