Interactive examples clean up.

examples/canvas_interactive_cubes.html

@@ -28,6 +28,8 @@
 			var camera, scene, renderer;
 			var particleMaterial;
 
+			var raycaster;
+
 			var objects = [];
 
 			init();
@@ -87,6 +89,10 @@
 					}
 
 				} );
+				
+				//
+				
+				raycaster = new THREE.Raycaster();
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
@@ -124,7 +130,7 @@
 				vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
 				vector.unproject( camera );
 
-				var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
 
 				var intersects = raycaster.intersectObjects( objects );
 

examples/canvas_interactive_cubes_tween.html

@@ -27,6 +27,8 @@
 
 			var container, stats;
 			var camera, scene, renderer;
+			
+			var raycaster;
 
 			init();
 			animate();
@@ -67,6 +69,10 @@
 					scene.add( object );
 
 				}
+				
+				//
+				
+				raycaster = new THREE.Raycaster();
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
@@ -104,7 +110,7 @@
 				vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
 				vector.unproject( camera );
 
-				var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
 
 				var intersects = raycaster.intersectObjects( scene.children );
 

examples/canvas_interactive_particles.html

@@ -27,6 +27,8 @@
 			var container, stats;
 			var camera, scene, renderer;
 
+			var raycaster;
+
 			var PI2 = Math.PI * 2;
 
 			var programFill = function ( context ) {
@@ -79,6 +81,10 @@
 					scene.add( particle );
 
 				}
+				
+				//
+				
+				raycaster = new THREE.Raycaster();
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
@@ -147,7 +153,7 @@
 
 				var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ).unproject( camera );
 
-				var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
 
 				var intersects = raycaster.intersectObjects( scene.children );
 

examples/canvas_interactive_voxelpainter.html

@@ -20,18 +20,13 @@
 		<script src="js/renderers/Renderer.js"></script>
 		<script src="js/renderers/CanvasRenderer.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
-
 		<script>
 
-			var container, stats;
+			var container;
 			var camera, scene, renderer;
-			var projector, plane;
+			var plane;
 
-			var mouse2D, mouse3D, raycaster, theta = 45,
-			isShiftDown = false, isCtrlDown = false,
-			target = new THREE.Vector3( 0, 200, 0 );
-			var normalMatrix = new THREE.Matrix3();
+			var vector, raycaster, isShiftDown = false;
 
 			var cubeGeometry = new THREE.BoxGeometry( 50, 50, 50 );
 			var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, overdraw: 0.5 } );
@@ -39,7 +34,7 @@
 			var objects = [];
 
 			init();
-			animate();
+			render();
 
 			function init() {
 
@@ -51,11 +46,12 @@
 				info.style.top = '10px';
 				info.style.width = '100%';
 				info.style.textAlign = 'center';
-				info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> - voxel painter<br><strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel, <strong>control</strong>: rotate, <a href="javascript:save()">save .png</a>';
+				info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> - voxel painter<br><strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel, <a href="javascript:save()">save .png</a>';
 				container.appendChild( info );
 
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.y = 800;
+				camera.position.set( 500, 800, 1300 );
+				camera.lookAt( new THREE.Vector3() );
 
 				scene = new THREE.Scene();
 
@@ -83,10 +79,13 @@
 
 				//
 
-				projector = new THREE.Projector();
+				vector = new THREE.Vector3();
+				raycaster = new THREE.Raycaster();
+				
+				var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
+				geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
 
-				plane = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000 ), new THREE.MeshBasicMaterial() );
-				plane.rotation.x = - Math.PI / 2;
+				plane = new THREE.Mesh( geometry );
 				plane.visible = false;
 				scene.add( plane );
 
@@ -94,8 +93,6 @@
 
 				var material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
 
-				mouse2D = new THREE.Vector3( 0, 10000, 0.5 );
-
 				// Lights
 
 				var ambientLight = new THREE.AmbientLight( 0x606060 );
@@ -120,12 +117,6 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild(renderer.domElement);
 
-				stats = new Stats();
-				stats.domElement.style.position = 'absolute';
-				stats.domElement.style.top = '0px';
-				container.appendChild( stats.domElement );
-
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 				document.addEventListener( 'keyup', onDocumentKeyUp, false );
@@ -143,22 +134,7 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-			}
-
-			function onDocumentMouseMove( event ) {
-
-				event.preventDefault();
-
-				mouse2D.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-				mouse2D.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
-
-				var intersects = raycaster.intersectObjects( scene.children );
-
-				if ( intersects.length > 0 ) {
-
-					// TODO
-
-				}
+				render();
 
 			}
 
@@ -166,6 +142,11 @@
 
 				event.preventDefault();
 
+				vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
+				vector.unproject( camera );
+
+				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
+
 				var intersects = raycaster.intersectObjects( objects );
 
 				if ( intersects.length > 0 ) {
@@ -184,13 +165,8 @@
 
 					} else {
 
-						normalMatrix.getNormalMatrix( intersect.object.matrixWorld );
-
-						var normal = intersect.face.normal.clone();
-						normal.applyMatrix3( normalMatrix ).normalize();
-
 						var voxel = new THREE.Mesh( cubeGeometry, cubeMaterial );
-						voxel.position.addVectors( intersect.point, normal );
+						voxel.position.copy( intersect.point ).add( intersect.face.normal );
 						voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
 						scene.add( voxel );
 
@@ -199,6 +175,9 @@
 					}
 
 				}
+
+				render();
+
 			}
 
 			function onDocumentKeyDown( event ) {
@@ -206,7 +185,6 @@
 				switch( event.keyCode ) {
 
 					case 16: isShiftDown = true; break;
-					case 17: isCtrlDown = true; break;
 
 				}
 
@@ -217,7 +195,6 @@
 				switch( event.keyCode ) {
 
 					case 16: isShiftDown = false; break;
-					case 17: isCtrlDown = false; break;
 
 				}
 			}
@@ -229,31 +206,8 @@
 
 			}
 
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
 			function render() {
 
-				if ( isCtrlDown ) {
-
-					theta += mouse2D.x * 3;
-
-				}
-
-				camera.position.x = 1400 * Math.sin( theta * Math.PI / 360 );
-				camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
-				camera.lookAt( target );
-
-				raycaster = projector.pickingRay( mouse2D.clone(), camera );
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_interactive_voxelpainter.html

@@ -20,28 +20,23 @@
 		<script src="../build/three.min.js"></script>
 
 		<script src="js/Detector.js"></script>
-		<script src="js/libs/stats.min.js"></script>
 
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var container, stats;
+			var container;
 			var camera, scene, renderer;
-			var projector, plane, cube;
-			var mouse2D, mouse3D, raycaster,
-			rollOveredFace, isShiftDown = false,
-			theta = 45 * 0.5, isCtrlDown = false;
+			var plane, cube;
+			var vector, raycaster, isShiftDown = false;
 
 			var rollOverMesh, rollOverMaterial;
-			var voxelPosition = new THREE.Vector3(), tmpVec = new THREE.Vector3(), normalMatrix = new THREE.Matrix3();
 			var cubeGeo, cubeMaterial;
-			var i, intersector;
 
 			var objects = [];
 
 			init();
-			animate();
+			render();
 
 			function init() {
 
@@ -53,11 +48,12 @@
 				info.style.top = '10px';
 				info.style.width = '100%';
 				info.style.textAlign = 'center';
-				info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> - voxel painter - webgl<br><strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel, <strong>control</strong>: rotate';
+				info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> - voxel painter - webgl<br><strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel';
 				container.appendChild( info );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.y = 800;
+				camera.position.set( 500, 800, 1300 );
+				camera.lookAt( new THREE.Vector3() );
 
 				scene = new THREE.Scene();
 
@@ -74,10 +70,6 @@
 				cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c, ambient: 0x00ff80, shading: THREE.FlatShading, map: THREE.ImageUtils.loadTexture( "textures/square-outline-textured.png" ) } );
 				cubeMaterial.ambient = cubeMaterial.color;
 
-				// picking
-
-				projector = new THREE.Projector();
-
 				// grid
 
 				var size = 500, step = 50;
@@ -100,15 +92,20 @@
 				line.type = THREE.LinePieces;
 				scene.add( line );
 
-				plane = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000 ), new THREE.MeshBasicMaterial() );
-				plane.rotation.x = - Math.PI / 2;
+				//
+
+				vector = new THREE.Vector3();
+				raycaster = new THREE.Raycaster();
+
+				var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
+				geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
+
+				plane = new THREE.Mesh( geometry );
 				plane.visible = false;
 				scene.add( plane );
 
 				objects.push( plane );
 
-				mouse2D = new THREE.Vector3( 0, 10000, 0.5 );
-
 				// Lights
 
 				var ambientLight = new THREE.AmbientLight( 0x606060 );
@@ -124,11 +121,6 @@
 
 				container.appendChild( renderer.domElement );
 
-				stats = new Stats();
-				stats.domElement.style.position = 'absolute';
-				stats.domElement.style.top = '0px';
-				container.appendChild( stats.domElement );
-
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
@@ -149,70 +141,54 @@
 
 			}
 
-			function getRealIntersector( intersects ) {
-
-				for( i = 0; i < intersects.length; i++ ) {
-
-					intersector = intersects[ i ];
-
-					if ( intersector.object != rollOverMesh ) {
-
-						return intersector;
+			function onDocumentMouseMove( event ) {
 
-					}
+				event.preventDefault();
 
-				}
+				vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
+				vector.unproject( camera );
 
-				return null;
+				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
 
-			}
+				var intersects = raycaster.intersectObjects( objects );
 
-			function setVoxelPosition( intersector ) {
+				if ( intersects.length > 0 ) {
 
-				if ( intersector.face === null ) {
+					var intersect = intersects[ 0 ];
 
-					console.log( intersector )
+					rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
+					rollOverMesh.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
 
 				}
 
-				normalMatrix.getNormalMatrix( intersector.object.matrixWorld );
-
-				tmpVec.copy( intersector.face.normal );
-				tmpVec.applyMatrix3( normalMatrix ).normalize();
-
-				voxelPosition.addVectors( intersector.point, tmpVec );
-				voxelPosition.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
+				render();
 
 			}
 
-			function onDocumentMouseMove( event ) {
+			function onDocumentMouseDown( event ) {
 
 				event.preventDefault();
 
-				mouse2D.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-				mouse2D.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+				vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
+				vector.unproject( camera );
 
-			}
-
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
+				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
 
 				var intersects = raycaster.intersectObjects( objects );
 
 				if ( intersects.length > 0 ) {
 
-					intersector = getRealIntersector( intersects );
+					var intersect = intersects[ 0 ];
 
 					// delete cube
 
 					if ( isShiftDown ) {
 
-						if ( intersector.object != plane ) {
+						if ( intersect.object != plane ) {
 
-							scene.remove( intersector.object );
+							scene.remove( intersect.object );
 
-							objects.splice( objects.indexOf( intersector.object ), 1 );
+							objects.splice( objects.indexOf( intersect.object ), 1 );
 
 						}
 
@@ -220,13 +196,9 @@
 
 					} else {
 
-						intersector = getRealIntersector( intersects );
-						setVoxelPosition( intersector );
-
 						var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
-						voxel.position.copy( voxelPosition );
-						voxel.matrixAutoUpdate = false;
-						voxel.updateMatrix();
+						voxel.position.copy( intersect.point ).add( intersect.face.normal );
+						voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
 						scene.add( voxel );
 
 						objects.push( voxel );
@@ -241,7 +213,6 @@
 				switch( event.keyCode ) {
 
 					case 16: isShiftDown = true; break;
-					case 17: isCtrlDown = true; break;
 
 				}
 
@@ -252,53 +223,13 @@
 				switch ( event.keyCode ) {
 
 					case 16: isShiftDown = false; break;
-					case 17: isCtrlDown = false; break;
 
 				}
 
 			}
 
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
 			function render() {
 
-				if ( isCtrlDown ) {
-
-					theta += mouse2D.x * 1.5;
-
-				}
-
-				raycaster = projector.pickingRay( mouse2D.clone(), camera );
-
-				var intersects = raycaster.intersectObjects( objects );
-
-				if ( intersects.length > 0 ) {
-
-					intersector = getRealIntersector( intersects );
-
-					if ( intersector ) {
-
-						setVoxelPosition( intersector );
-						rollOverMesh.position.copy( voxelPosition );
-
-					}
-
-				}
-
-				camera.position.x = 1400 * Math.sin( THREE.Math.degToRad( theta ) );
-				camera.position.z = 1400 * Math.cos( THREE.Math.degToRad( theta ) );
-
-				camera.lookAt( scene.position );
-
 				renderer.render( scene, camera );
 
 			}

src/core/Geometry.js

@@ -161,6 +161,8 @@ THREE.Geometry.prototype = {
 			}
 
 		}
+		
+		this.computeFaceNormals();
 
 		if ( geometry.boundingBox !== null ) {