* Trying to make the interaction stuff work...

examples/geometry/primitives/ClickCube.js

@@ -2,9 +2,9 @@
  * @author mr.doob / http://mrdoob.com/
  */
 
-var ClickCube = function (width, height, depth, onSelect) {
+var ClickCube = function ( width, height, depth, onSelect ) {
 
-	THREE.Geometry.call(this);
+	THREE.Geometry.call( this );
 
 	var scope = this,
 	width_half = width / 2,
@@ -21,21 +21,23 @@ var ClickCube = function (width, height, depth, onSelect) {
 	v( -width_half,  height_half,  depth_half );
 
 	f4( 0, 1, 2, 3 );
-	
+
 	f4( 4, 7, 6, 5 );
 	f4( 0, 4, 5, 1 );
 	f4( 2, 6, 7, 3 );
 	f4( 1, 5, 6, 2 );
 	f4( 4, 0, 3, 7 );
 
-	function v(x, y, z) {
+	function v( x, y, z ) {
 
 		scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
 	}
 
-	function f4(a, b, c, d) {
+	function f4( a, b, c, d ) {
+
 		var f = new THREE.SelectableFace4( a, b, c, d, onSelect );
-		scope.faces.push(f);
+		scope.faces.push( f );
+
 	}
 
 	this.computeCentroids();

examples/geometry/primitives/Sphere.js

@@ -70,36 +70,47 @@ var Sphere = function ( radius, segments_width, segments_height, smooth ) {
 				var aP4uv = new THREE.UV( 1 - fI0, fJ1 );
 
 				if ( j < ( aVtc.length - 1 ) ) {
-                    n1 = this.vertices[aP1].position.clone();
-                    n2 = this.vertices[aP2].position.clone();
-                    n3 = this.vertices[aP3].position.clone();
-                    n1.normalize();
-                    n2.normalize();
-                    n3.normalize();
-
-                    if ( smooth )
-                        this.faces.push( new THREE.Face3( aP1, aP2, aP3, [new THREE.Vector3(n1.x,n1.y,n1.z), new THREE.Vector3(n2.x,n2.y,n2.z), new THREE.Vector3(n3.x,n3.y,n3.z)] ) );
-                    else
-                        this.faces.push( new THREE.Face3( aP1, aP2, aP3 ) );
-                    
+
+					n1 = this.vertices[ aP1 ].position.clone();
+					n2 = this.vertices[ aP2 ].position.clone();
+					n3 = this.vertices[ aP3 ].position.clone();
+					n1.normalize();
+					n2.normalize();
+					n3.normalize();
+
+					if ( smooth ) {
+
+						this.faces.push( new THREE.Face3( aP1, aP2, aP3, [ new THREE.Vector3( n1.x, n1.y, n1.z ), new THREE.Vector3( n2.x, n2.y, n2.z ), new THREE.Vector3( n3.x, n3.y, n3.z ) ] ) );
+
+					} else {
+
+						this.faces.push( new THREE.Face3( aP1, aP2, aP3 ) );
+
+					}
+
 					this.uvs.push( [ aP1uv, aP2uv, aP3uv ] );
 
 				}
 
 				if ( j > 1 ) {
 
-                    n1 = this.vertices[aP1].position.clone();
-                    n2 = this.vertices[aP3].position.clone();
-                    n3 = this.vertices[aP4].position.clone();
-                    n1.normalize();
-                    n2.normalize();
-                    n3.normalize();
-
-                    if ( smooth )
-                        this.faces.push( new THREE.Face3( aP1, aP3, aP4, [new THREE.Vector3(n1.x,n1.y,n1.z), new THREE.Vector3(n2.x,n2.y,n2.z), new THREE.Vector3(n3.x,n3.y,n3.z)] ) );
-                    else
-                        this.faces.push( new THREE.Face3( aP1, aP3, aP4 ) );
-                    
+					n1 = this.vertices[aP1].position.clone();
+					n2 = this.vertices[aP3].position.clone();
+					n3 = this.vertices[aP4].position.clone();
+					n1.normalize();
+					n2.normalize();
+					n3.normalize();
+
+					if ( smooth ) {
+
+						this.faces.push( new THREE.Face3( aP1, aP3, aP4, [ new THREE.Vector3( n1.x, n1.y, n1.z ), new THREE.Vector3( n2.x, n2.y, n2.z ), new THREE.Vector3( n3.x, n3.y, n3.z ) ] ) );
+
+					} else {
+
+						this.faces.push( new THREE.Face3( aP1, aP3, aP4 ) );
+
+					}
+
 					this.uvs.push( [ aP1uv, aP3uv, aP4uv ] );
 
 				}

examples/geometry_earth.html

@@ -65,7 +65,7 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.Camera( 60, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
+				camera = new THREE.Camera( 60, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 				camera.position.z = 500;
 
 				scene = new THREE.Scene();
@@ -81,12 +81,12 @@
 				renderer = new THREE.CanvasRenderer();
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
-				container.appendChild(renderer.domElement);
+				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
-				container.appendChild(stats.domElement);
+				container.appendChild( stats.domElement );
 
 				document.addEventListener('mousemove', onDocumentMouseMove, false);
 

examples/geometry_terrain.html

@@ -34,6 +34,7 @@
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - terrain demo. <a href="geometry_terrain.html">generate another</a></div> 
 
 		<script type="text/javascript" src="js/Stats.js"></script>
+		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
@@ -41,80 +42,6 @@
 
 		<script type="text/javascript">
 
-			var Perlin = function () {
-
-				// http://mrl.nyu.edu/~perlin/noise/
-
-				var p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
-					 23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
-					 174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
-					 133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
-					 89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
-					 202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
-					 248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
-					 178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
-					 14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
-					 93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
-
-				for (var i=0; i < 256 ; i++) {
-
-					p[256+i] = p[i];
-
-				}
-
-				function fade(t) {
-
-					return t * t * t * (t * (t * 6 - 15) + 10);
-
-				}
-
-				function lerp(t, a, b) {
-
-					return a + t * (b - a);
-
-				}
-
-				function grad(hash, x, y, z) {
-
-					var h = hash & 15;
-					var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z;
-					return ((h&1) == 0 ? u : -u) + ((h&2) == 0 ? v : -v);
-
-				}
-
-				return {
-
-					noise: function (x, y, z) {
-
-						var floorX = Math.floor(x), floorY = Math.floor(y), floorZ = Math.floor(z);
-
-						var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255;
-
-						x -= floorX;
-						y -= floorY;
-						z -= floorZ;
-
-						var xMinus1 = x -1, yMinus1 = y - 1, zMinus1 = z - 1;
-
-						var u = fade(x), v = fade(y), w = fade(z);
-
-						var A = p[X]+Y, AA = p[A]+Z, AB = p[A+1]+Z, B = p[X+1]+Y, BA = p[B]+Z, BB = p[B+1]+Z;
-
-						return lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z), 
-										grad(p[BA], xMinus1, y, z)),
-									lerp(u, grad(p[AB], x, yMinus1, z),
-										grad(p[BB], xMinus1, yMinus1, z))),
-								lerp(v, lerp(u, grad(p[AA+1], x, y, zMinus1),
-										grad(p[BA+1], xMinus1, y, z-1)),
-									lerp(u, grad(p[AB+1], x, yMinus1, zMinus1),
-										grad(p[BB+1], xMinus1, yMinus1, zMinus1))));
-
-					}
-				}
-			}
-
-			//
-
 			var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
 
 			var container, stats;
@@ -171,18 +98,18 @@
 				scene.add(mesh);
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				container.innerHTML = "";
 
-				container.appendChild(renderer.domElement);
+				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( 'mousemove', onDocumentMouseMove, false );
 
 			}
 
@@ -218,7 +145,7 @@
 				image = context.getImageData( 0, 0, width, height );
 				data = image.data;
 
-				var perlin = new Perlin();
+				var perlin = new ImprovedNoise();
 
 				var size = width * height;
 				var quality = 2;

examples/interactive_spheres.html

@@ -0,0 +1,193 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js - interactive - spheres</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				font-family: Monospace;
+				background-color: #f0f0f0;
+				margin: 0px;
+				overflow: hidden;
+			}
+		</style>
+	</head>
+	<body>
+
+
+		<script type="text/javascript" src="../src/Three.js"></script>
+		<script type="text/javascript" src="../src/core/Color.js"></script>
+		<script type="text/javascript" src="../src/core/Vector2.js"></script>
+		<script type="text/javascript" src="../src/core/Vector3.js"></script>
+		<script type="text/javascript" src="../src/core/Vector4.js"></script>
+		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
+		<script type="text/javascript" src="../src/core/Vertex.js"></script>
+		<script type="text/javascript" src="../src/core/Face3.js"></script>
+		<script type="text/javascript" src="../src/core/Face4.js"></script>
+		<script type="text/javascript" src="../src/core/UV.js"></script>
+		<script type="text/javascript" src="../src/core/Geometry.js"></script>
+		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
+		<script type="text/javascript" src="../src/objects/Object3D.js"></script>
+		<script type="text/javascript" src="../src/objects/Line.js"></script>
+		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Particle.js"></script>
+		<script type="text/javascript" src="../src/lights/Light.js"></script>
+		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
+		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
+		<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
+		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
+		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
+		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
+		<script type="text/javascript" src="../src/hci/ClickResolver.js"></script>
+		<script type="text/javascript" src="../src/hci/SelectableFace3.js"></script>
+		<script type="text/javascript" src="../src/hci/SelectableFace4.js"></script>
+
+		<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
+
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<script type="text/javascript">
+
+			var SCREEN_WIDTH = window.innerWidth;
+			var SCREEN_HEIGHT = window.innerHeight;
+
+			var container;
+			var stats;
+
+			var camera;
+			var scene;
+			var renderer;
+
+			var cube, plane;
+
+			var targetRotation = 0;
+			var targetRotationOnMouseDown = 0;
+
+			var mouseX = 0;
+			var mouseXOnMouseDown = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+			var clickResolver;
+
+			init();
+			setInterval(loop, 1000/60);
+
+			function init() {
+
+				container = document.createElement('div');
+				document.body.appendChild(container);
+
+				var info = document.createElement('div');
+				info.id = 'msg';
+				info.style.position = 'absolute';
+				info.style.top = '10px';
+				info.style.width = '100%';
+				info.style.textAlign = 'center';
+				info.innerHTML = 'No click detected';
+				container.appendChild(info);
+
+				camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+				camera.position.y = 300;
+				camera.position.z = 500;
+				camera.target.position.y = 150;
+
+				scene = new THREE.Scene();
+				clickResolver = new THREE.ClickResolver( camera, scene );
+
+				// Click Cube
+				var opacity = 0.8;
+
+				geometry = new Sphere( 200 );
+
+				for (var i = 0, l = geometry.faces.length; i < l; i++) {
+
+					geometry.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
+					geometry.faces[i].selectable = true;
+					geometry.faces[i].onSelect = function ( s, c, o, f, p ) {
+								f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
+								document.getElementById( "msg" ).innerHTML = "Click detected at " + p; 
+							}
+
+				}
+
+				cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
+				cube.position.y = 150;
+				scene.addObject(cube);
+
+				geometry2 = new Sphere( 100 );
+
+				for (var i = 0, l = geometry2.faces.length; i < l; i++) {
+
+					geometry2.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
+					geometry2.faces[i].selectable = true;
+					geometry2.faces[i].onSelect = function ( s, c, o, f, p ) {
+								f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
+								document.getElementById( "msg" ).innerHTML = "Click detected at " + p; 
+							};
+
+				}
+
+				cube2 = new THREE.Mesh( geometry2, new THREE.MeshFaceMaterial() );
+				cube2.position.y = 150;
+				cube2.position.z = 300;
+				scene.addObject(cube2);
+
+				// Plane
+				renderer = new THREE.CanvasRenderer();
+				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
+
+				container.appendChild(renderer.domElement);
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild(stats.domElement);
+
+				document.addEventListener('mousedown', onDocumentMouseDown, false);
+			}
+
+			function onDocumentMouseDown( event ) {
+
+				event.preventDefault();
+
+				document.getElementById("msg").innerHTML = ""; 
+				
+				clickResolver.findIntersectInScene(
+						event.clientX/window.innerWidth,
+						event.clientY/window.innerHeight);
+					
+			}
+
+			var radius = 600;
+			var theta = 0;
+			
+			function loop() {
+
+				theta += 1;
+				camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
+				// camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
+				camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
+
+				renderer.render(scene, camera);
+				stats.update();
+			}
+
+		</script>
+
+	</body>
+</html>

examples/js/ImprovedNoise.js

@@ -0,0 +1,71 @@
+// http://mrl.nyu.edu/~perlin/noise/
+
+var ImprovedNoise = function () {
+
+	var p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
+		 23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
+		 174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
+		 133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
+		 89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
+		 202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
+		 248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
+		 178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
+		 14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
+		 93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
+
+	for (var i=0; i < 256 ; i++) {
+
+		p[256+i] = p[i];
+
+	}
+
+	function fade(t) {
+
+		return t * t * t * (t * (t * 6 - 15) + 10);
+
+	}
+
+	function lerp(t, a, b) {
+
+		return a + t * (b - a);
+
+	}
+
+	function grad(hash, x, y, z) {
+
+		var h = hash & 15;
+		var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z;
+		return ((h&1) == 0 ? u : -u) + ((h&2) == 0 ? v : -v);
+
+	}
+
+	return {
+
+		noise: function (x, y, z) {
+
+			var floorX = Math.floor(x), floorY = Math.floor(y), floorZ = Math.floor(z);
+
+			var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255;
+
+			x -= floorX;
+			y -= floorY;
+			z -= floorZ;
+
+			var xMinus1 = x -1, yMinus1 = y - 1, zMinus1 = z - 1;
+
+			var u = fade(x), v = fade(y), w = fade(z);
+
+			var A = p[X]+Y, AA = p[A]+Z, AB = p[A+1]+Z, B = p[X+1]+Y, BA = p[B]+Z, BB = p[B+1]+Z;
+
+			return lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z), 
+							grad(p[BA], xMinus1, y, z)),
+						lerp(u, grad(p[AB], x, yMinus1, z),
+							grad(p[BB], xMinus1, yMinus1, z))),
+					lerp(v, lerp(u, grad(p[AA+1], x, y, zMinus1),
+							grad(p[BA+1], xMinus1, y, z-1)),
+						lerp(u, grad(p[AB+1], x, yMinus1, zMinus1),
+							grad(p[BB+1], xMinus1, yMinus1, zMinus1))));
+
+		}
+	}
+}

src/core/Geometry.js

@@ -45,7 +45,8 @@ THREE.Geometry.prototype = {
 
 	computeNormals: function ( useVertexNormals ) {
 
-		var n, nl, v, vl, vertex, f, fl, face, vA, vB, vC, cb = new THREE.Vector3(), ab = new THREE.Vector3();
+		var n, nl, v, vl, vertex, f, fl, face, vA, vB, vC,
+		cb = new THREE.Vector3(), ab = new THREE.Vector3();
 
 		for ( v = 0, vl = this.vertices.length; v < vl; v++ ) {
 

src/hci/ClickResolver.js

@@ -3,51 +3,56 @@ THREE.ClickResolver = function( camera, scene ) {
 
 	this.camera = camera;
 	this.scene  = scene;
-	this._debug = false;
+	this._debug = true;
 	
 };
 
 THREE.ClickResolver.prototype = {
-	
+
 	findIntersectInScene : function ( xPercent, yPercent ) {
-	
+
 		var objects = this.scene.objects;
 		var intersects = [];
-		
+
 		var mouseRayStart = this.translateScreenCoordsToZIndex( xPercent, yPercent, 300 );
 		var mouseRayEnd =   this.translateScreenCoordsToZIndex( xPercent, yPercent, 800 );
-		
+
 		var mouseRayDir = new THREE.Vector3().sub( mouseRayEnd, mouseRayStart );
-		
+
 		var closestIntersect = null;
-		
-		for ( var i = 0; i < objects.length; i++ ) {
-			
-			var o = objects[i];
-			var intersect = this.getIntersectingFaces( this.scene, camera, o, mouseRayStart, mouseRayDir );
-			
-			if ( intersect.face != null &&
-					(closestIntersect == null ||
-					 closestIntersect.distance > intersect.distance)
-					 ) {
-				
-				closestIntersect = intersect;
+
+		for ( var i = 0, l = objects.length; i < l; i++ ) {
+
+			var object = objects[i];
+
+			if ( object instanceof THREE.Mesh ) {
+
+				var intersect = this.getIntersectingFaces( this.scene, camera, object, mouseRayStart, mouseRayDir );
+
+				if ( intersect.face != null && (closestIntersect == null || closestIntersect.distance > intersect.distance) ) {
+
+					closestIntersect = intersect;
+
+				}
+
 			}
+
 		}
-		
+
 		if ( closestIntersect != null && closestIntersect.face.onSelect ) {
-			
-			closestIntersect.face.onSelect( scene, camera, o, closestIntersect.face, closestIntersect.point );
+
+			closestIntersect.face.onSelect( scene, camera, object, closestIntersect.face, closestIntersect.point );
+
 		}
+
 	},
-		
-	
-	translateScreenCoordsToZIndex : function ( xPercent, yPercent, targetZIndex ) {
+
+	translateScreenCoordsToZIndex: function ( xPercent, yPercent, targetZIndex ) {
 
 		var maxVisibleXatZIndex, maxVisibleYatZIndex;
-		var rayToZIndex   = new THREE.Vector3();
-		var left          = new THREE.Vector3();
-		var up            = new THREE.Vector3();
+		var rayToZIndex = new THREE.Vector3();
+		var left = new THREE.Vector3();
+		var up = new THREE.Vector3();
 		var coordAtZIndex = new THREE.Vector3();
 
 		rayToZIndex.sub( this.camera.target.position, this.camera.position ).setLength( targetZIndex );
@@ -68,12 +73,11 @@ THREE.ClickResolver.prototype = {
 		
 		if ( this._debug ) {
 			
-			var vg = new THREE.Geometry();
+			var p = new THREE.Particle( new THREE.ParticleCircleMaterial( hex, 0.5 ) );
+			p.position = v.clone();
+			p.scale.x = p.scale.y = p.scale.z = 5;
 			
-			vg.vertices[ 0 ] = new THREE.Vertex( v );
-			vg.vertices[ 1 ] = new THREE.Vertex( v );
-			
-			scene.addObject( new THREE.Line( vg, new THREE.LineColorMaterial( hex, 1, 10 )));
+			scene.addObject( p );
 		}
 	},
 	
@@ -89,7 +93,7 @@ THREE.ClickResolver.prototype = {
 			lg.vertices[0] = new THREE.Vertex( s.clone() );
 			lg.vertices[1] = new THREE.Vertex( e.clone() );
 			
-			scene.addObject(new THREE.Line( lg, new THREE.LineColorMaterial( hex, 1, 4 ) ));
+			scene.addObject( new THREE.Line( lg, new THREE.LineColorMaterial( hex, 0.5 ) ) );
 		}
 
 	},
@@ -103,24 +107,19 @@ THREE.ClickResolver.prototype = {
 			distance : Number.MAX_VALUE
 		};
 		
-		var geo    = object3d.geometry;
+		var geometry = object3d.geometry;
 		var matrix = object3d.matrix;
 		
-		for ( f = 0; f < geo.faces.length; f++ ) {
-			
-			var face = geo.faces[ f ];
+		for ( f = 0; f < geometry.faces.length; f++ ) {
 			
-			if ( !face.selectable ) continue;
+			var face = geometry.faces[ f ];
 			
-			var a = matrix.transform( geo.vertices[ face.a ].position.clone() );
-			var b = matrix.transform( geo.vertices[ face.b ].position.clone() );
-			var c = matrix.transform( geo.vertices[ face.c ].position.clone() );
-			var d = null;
+			// if ( !face.selectable ) continue;
 			
-			if ( face.d ) {
-				
-				d = matrix.transform( geo.vertices[ face.d ].position.clone() );
-			}
+			var a = matrix.transform( geometry.vertices[ face.a ].position.clone() );
+			var b = matrix.transform( geometry.vertices[ face.b ].position.clone() );
+			var c = matrix.transform( geometry.vertices[ face.c ].position.clone() );
+			var d = face.d ? matrix.transform( geometry.vertices[ face.d ].position.clone() ) : null;
 			
 			var lineStart = linePoint.clone();
 			var lineDirection = lineDir.clone();
@@ -128,73 +127,80 @@ THREE.ClickResolver.prototype = {
 			
 			if ( this._debug ) {
 
-				this.logLine( scene, a, new THREE.Vector3().add( a, new THREE.Vector3().addSelf( face.normal ).multiplyScalar( 100 )), 0x0000FF );
-				this.logLine( scene, lineStart, lineStart.clone().addSelf(lineDirection), 0x55FF88 );
+				/*
+				this.logLine( scene, a, new THREE.Vector3().add( a, new THREE.Vector3().addSelf( face.normal ).multiplyScalar( 100 ) ), 0x0000FF );
+				this.logLine( scene, lineStart, lineStart.clone().addSelf( lineDirection ), 0x55FF88 );
 				this.logPoint( scene, a, 0xFF0000 ); // r
 				this.logPoint( scene, b, 0x00FF00 ); // g
 				this.logPoint( scene, c, 0x0000FF ); // b
-				this.logPoint( scene, d, 0xFFFF00 ); // y
+				if ( d ) this.logPoint( scene, d, 0xFFFF00 ); // y
+				*/
 			}
-				
-			if ( Math.abs(dot) > .0001 ) {
-				
+
+			if ( dot < 0 ) { // Math.abs( dot ) > 0.0001
+
 				var s = face.normal.dot( new THREE.Vector3().sub( a, lineStart ) ) / dot;
 				var planeIntersect = lineStart.addSelf( lineDirection.multiplyScalar( s ) );
-				
-				if ( this._debug ) this.logPoint( scene, planeIntersect, 0xFFCCAA );
-				
+
+				// if ( this._debug ) this.logPoint( scene, planeIntersect, 0x808080 );
+
 				if ( d == null ) {
-					
+
 					var ab = isInsideBoundary( planeIntersect, a, b, c );
 					var bc = isInsideBoundary( planeIntersect, b, c, a );
 					var ca = isInsideBoundary( planeIntersect, c, a, b );
-					
+
 					if ( ab && bc && ca ) {
-						
-						if ( this._debug ) this.logPoint( scene, planeIntersect, 0xFF0000 );
+
+						if ( this._debug ) this.logPoint( scene, planeIntersect, 0x0000ff );
 						logIntersect( planeIntersect, face );
-						
+
 					}
+
 				} else {
-					
+
 					var ab = isInsideBoundary( planeIntersect, a, b, c );
 					var bc = isInsideBoundary( planeIntersect, b, c, d );
 					var cd = isInsideBoundary( planeIntersect, c, d, a );
 					var da = isInsideBoundary( planeIntersect, d, a, b );
-					
+
 					if ( ab && bc && cd && da ) {
-						
-						if ( this._debug ) this.logPoint( scene, planeIntersect, 0xFF0000 );
+
+						if ( this._debug ) this.logPoint( scene, planeIntersect, 0x000000 );
 						logIntersect( planeIntersect, face );
-						
+
 					}
+
 				}
+
 			}
+
 		}
-		
+
 		function logIntersect( planeIntersect, face ) {
-			
+
 			var distance = camera.position.distanceTo( planeIntersect );
-			
+
 			if ( distance < intersect.distance ) {
-				
+
 				intersect.distance = distance;
 				intersect.face = face;
 				intersect.point = planeIntersect;
+
 			}
+
 		}
-		
+
 		function isInsideBoundary( pointOnPlaneToCheck, pointInside, boundaryPointA, boundaryPointB ) {
-		
+
 			var toB = boundaryPointB.clone().subSelf( boundaryPointA );
 			var toI = pointInside.clone().subSelf( boundaryPointA );
 			var pointMid = toB.setLength( toI.dot( toB ) ).addSelf( boundaryPointA );
 			var pointMirror = pointMid.subSelf( pointInside ).multiplyScalar( 2 ).addSelf( pointInside );
-			
-			return pointOnPlaneToCheck.distanceToSquared( pointInside ) <
-				   pointOnPlaneToCheck.distanceToSquared( pointMirror );
+
+			return pointOnPlaneToCheck.distanceToSquared( pointInside ) < pointOnPlaneToCheck.distanceToSquared( pointMirror );
 		};
-		
+
 		return intersect;
 	}
 

src/scenes/Scene.js

@@ -9,7 +9,7 @@ THREE.Scene = function () {
 
 	this.addObject = function ( object ) {
 
-		this.objects.push(object);
+		this.objects.push( object );
 
 	};
 
@@ -23,32 +23,29 @@ THREE.Scene = function () {
 				return;
 
 			}
+
 		}
-	};
 
-  this.addLight = function ( light ) {
+	};
 
-    this.lights.push(light);
+	this.addLight = function ( light ) {
 
-  };
+		this.lights.push( light );
 
-  this.removeLight = function ( light ) {
+	};
 
-    for ( var i = 0, l = this.lights.length; i < l; i++ ) {
+	this.removeLight = function ( light ) {
 
-      if ( light == this.lights[ i ] ) {
+		for ( var i = 0, l = this.lights.length; i < l; i++ ) {
 
-        this.lights.splice( i, 1 );
-        return;
+			if ( light == this.lights[ i ] ) {
 
-      }
-    }
-  };
+				this.lights.splice( i, 1 );
+				return;
 
-	// Deprecated
-	this.add = function ( object ) {
+			}
 
-		this.addObject( object );
+		}
 
 	};