Synced with mrdoob's branch.

examples/camera_orthographic.html

@@ -66,9 +66,9 @@
 
 				camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 				camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -2000, 1000 );
-				camera.position.x = 100;
-				camera.position.y = 100;
-				camera.position.z = 100;
+				camera.position.x = 200;
+				camera.position.y = 150;
+				camera.position.z = 200;
 
 				scene = new THREE.Scene();
 

examples/geometry_terrain.html

@@ -92,6 +92,9 @@
 
 				}
 
+				plane.computeNormals();
+				plane.computeCentroids();
+
 				mesh = new THREE.Mesh( plane, material );
 				mesh.rotation.x = -90 * Math.PI / 180;
 				mesh.overdraw = true;

examples/interactive_spheres.html

@@ -56,6 +56,7 @@
 		<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/Cube.js"></script>
 		<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
@@ -112,7 +113,7 @@
 				// Click Cube
 				var opacity = 0.8;
 
-				geometry = new Sphere( 200 );
+				geometry = new Cube( 200, 200, 200 );
 
 				for (var i = 0, l = geometry.faces.length; i < l; i++) {
 
@@ -147,7 +148,35 @@
 				cube2.position.z = 300;
 				scene.addObject(cube2);
 
-				// Plane
+				/*
+				var geometry = new THREE.Geometry();
+
+				for (var i = 0; i < 100; i ++) {
+
+					var v = new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 );
+
+					var v0 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
+					var v1 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
+					var v2 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
+
+					v0.position.addSelf( v );
+					v1.position.addSelf( v );
+					v2.position.addSelf( v );
+
+					var face = new THREE.Face3( geometry.vertices.push( v0 ) - 1, geometry.vertices.push( v1 ) - 1, geometry.vertices.push( v2 ) - 1, null, new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, 0.5 ) );
+
+					geometry.faces.push( face );
+				}
+
+				geometry.computeNormals();
+				geometry.computeCentroids();
+
+				var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
+				mesh.doubleSided = true;
+				mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
+				scene.addObject(mesh);
+				*/
+
 				renderer = new THREE.CanvasRenderer();
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
@@ -166,11 +195,11 @@
 				event.preventDefault();
 
 				document.getElementById("msg").innerHTML = ""; 
-				
+
 				clickResolver.findIntersectInScene(
 						event.clientX/window.innerWidth,
 						event.clientY/window.innerHeight);
-					
+
 			}
 
 			var radius = 600;

examples/test.html

@@ -170,6 +170,7 @@
 				}
 
 				geometry.computeNormals();
+				geometry.computeCentroids();
 
 				mesh = new THREE.Mesh( geometry, [ new THREE.MeshFaceMaterial(), new THREE.MeshColorStrokeMaterial( 0xff0000, 0.5, 10 ) ] );
 				mesh.doubleSided = true;

src/hci/ClickResolver.js

@@ -3,7 +3,7 @@ THREE.ClickResolver = function( camera, scene ) {
 
 	this.camera = camera;
 	this.scene  = scene;
-	this._debug = true;
+	this._debug = false;
 	
 };
 
@@ -127,14 +127,12 @@ 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.logPoint( scene, a, 0xFF0000 ); // r
 				this.logPoint( scene, b, 0x00FF00 ); // g
 				this.logPoint( scene, c, 0x0000FF ); // b
 				if ( d ) this.logPoint( scene, d, 0xFFFF00 ); // y
-				*/
 			}
 
 			if ( dot < 0 ) { // Math.abs( dot ) > 0.0001
@@ -146,11 +144,17 @@ THREE.ClickResolver.prototype = {
 
 				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 ) {
+					*/
+
+					// console.log( f, ab, bc, ca );
+
+					if ( pointInFace3Fast( planeIntersect, a, b, c ) ) {
 
 						if ( this._debug ) this.logPoint( scene, planeIntersect, 0x0000ff );
 						logIntersect( planeIntersect, face );
@@ -159,12 +163,15 @@ THREE.ClickResolver.prototype = {
 
 				} 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 ( pointInFace4( planeIntersect, a, b, c, d ) ) {
 
 						if ( this._debug ) this.logPoint( scene, planeIntersect, 0x000000 );
 						logIntersect( planeIntersect, face );
@@ -191,6 +198,7 @@ THREE.ClickResolver.prototype = {
 
 		}
 
+		/*
 		function isInsideBoundary( pointOnPlaneToCheck, pointInside, boundaryPointA, boundaryPointB ) {
 
 			var toB = boundaryPointB.clone().subSelf( boundaryPointA );
@@ -199,7 +207,43 @@ THREE.ClickResolver.prototype = {
 			var pointMirror = pointMid.subSelf( pointInside ).multiplyScalar( 2 ).addSelf( pointInside );
 
 			return pointOnPlaneToCheck.distanceToSquared( pointInside ) < pointOnPlaneToCheck.distanceToSquared( pointMirror );
-		};
+		}
+		*/
+
+		// http://www.blackpawn.com/texts/pointinpoly/default.html
+
+		function pointInFace3( p, a, b, c ) {
+
+			return sameSide( p, a, b, c ) && sameSide( p, b, a, c ) && sameSide( p, c, a, b );
+
+		}
+
+		function pointInFace3Fast( p, a, b, c ) {
+
+			var v0 = c.clone().subSelf( a ), v1 = b.clone().subSelf( a ), v2 = p.clone().subSelf( a ),
+			dot00 = v0.dot( v0 ), dot01 = v0.dot( v1 ), dot02 = v0.dot( v2 ), dot11 = v1.dot( v1 ), dot12 = v1.dot( v2 ),
+
+			invDenom = 1 / ( dot00 * dot11 - dot01 * dot01 ),
+			u = ( dot11 * dot02 - dot01 * dot12 ) * invDenom,
+			v = ( dot00 * dot12 - dot01 * dot02 ) * invDenom;
+
+			return ( u > 0 ) && ( v > 0 ) && ( u + v < 1 );
+
+		}
+
+		function pointInFace4( p, a, b, c, d ) {
+
+			return sameSide( p, a, b, c ) && sameSide( p, b, c, d ) && sameSide( p, c, d, a ) && sameSide( p, c, a, b );
+
+		}
+
+		function sameSide( p1, p2, a, b ) {
+
+			var cp1 = new THREE.Vector3().cross( b.clone().subSelf( a ), p1.clone().subSelf( a ) );
+			var cp2 = new THREE.Vector3().cross( b.clone().subSelf( a ), p2.clone().subSelf( a ) );
+			return cp1.dot( cp2 ) >= 0;
+
+		}
 
 		return intersect;
 	}

src/renderers/Projector.js

@@ -88,13 +88,16 @@ THREE.Projector = function() {
 								_face3.v2.copy( v2.positionScreen );
 								_face3.v3.copy( v3.positionScreen );
 
-								_face3.centroidWorld.copy( face.centroid );
-								object.matrix.transform( _face3.centroidWorld );
-
 								_face3.normalWorld.copy( face.normal );
 								object.matrixRotation.transform( _face3.normalWorld );
 
-								_face3.z = Math.max( v1.positionScreen.z, Math.max( v2.positionScreen.z, v3.positionScreen.z ) );
+								_face3.centroidWorld.copy( face.centroid );
+								objectMatrix.transform( _face3.centroidWorld );
+
+								_face3.centroidScreen.copy( _face3.centroidWorld );
+								_projScreenMatrix.transform( _face3.centroidScreen );
+
+								_face3.z = _face3.centroidScreen.z;
 
 								_face3.meshMaterial = object.material;
 								_face3.faceMaterial = face.material;
@@ -128,13 +131,16 @@ THREE.Projector = function() {
 								_face4.v3.copy( v3.positionScreen );
 								_face4.v4.copy( v4.positionScreen );
 
-								_face4.centroidWorld.copy( face.centroid );
-								object.matrix.transform( _face4.centroidWorld );
-
 								_face4.normalWorld.copy( face.normal );
 								object.matrixRotation.transform( _face4.normalWorld );
 
-								_face4.z = Math.max( v1.positionScreen.z, Math.max( v2.positionScreen.z, Math.max( v3.positionScreen.z, v4.positionScreen.z ) ) );
+								_face4.centroidWorld.copy( face.centroid );
+								objectMatrix.transform( _face4.centroidWorld );
+
+								_face4.centroidScreen.copy( _face4.centroidWorld );
+								_projScreenMatrix.transform( _face4.centroidScreen );
+
+								_face4.z = _face4.centroidScreen.z;
 
 								_face4.meshMaterial = object.material;
 								_face4.faceMaterial = face.material;
@@ -179,7 +185,10 @@ THREE.Projector = function() {
 							_line = _linePool[ _lineCount ] = _linePool[ _lineCount ] || new THREE.RenderableLine();
 							_line.v1.copy( vertex.positionScreen );
 							_line.v2.copy( vertex2.positionScreen );
+
+							// TODO: Use centriums here too.
 							_line.z = Math.max( vertex.positionScreen.z, vertex2.positionScreen.z );
+
 							_line.material = object.material;
 
 							_renderList.push( _line );

src/renderers/renderables/RenderableFace3.js

@@ -9,6 +9,8 @@ THREE.RenderableFace3 = function () {
 	this.v3 = new THREE.Vector2();
 
 	this.centroidWorld = new THREE.Vector3();
+	this.centroidScreen = new THREE.Vector3();
+
 	this.normalWorld = new THREE.Vector3();
 
 	this.z = null;

src/renderers/renderables/RenderableFace4.js

@@ -10,6 +10,8 @@ THREE.RenderableFace4 = function () {
 	this.v4 = new THREE.Vector2();
 
 	this.centroidWorld = new THREE.Vector3();
+	this.centroidScreen = new THREE.Vector3();
+
 	this.normalWorld = new THREE.Vector3();
 
 	this.z = null;