Refactored `ClickResolver to `Ray` and `Projector.unprojectVector` working.

Unimpressive example added `interactive_spheres.html`

README.md

@@ -94,6 +94,7 @@ For creating a customised version of the library, including the source files in
 	<script type="text/javascript" src="js/three/core/Vector2.js"></script>
 	<script type="text/javascript" src="js/three/core/Vector3.js"></script>
 	<script type="text/javascript" src="js/three/core/Vector4.js"></script>
+	<script type="text/javascript" src="js/three/core/Ray.js"></script>
 	<script type="text/javascript" src="js/three/core/Rectangle.js"></script>
 	<script type="text/javascript" src="js/three/core/Matrix3.js"></script>
 	<script type="text/javascript" src="js/three/core/Matrix4.js"></script>
@@ -103,6 +104,7 @@ For creating a customised version of the library, including the source files in
 	<script type="text/javascript" src="js/three/core/UV.js"></script>
 	<script type="text/javascript" src="js/three/core/Geometry.js"></script>
 	<script type="text/javascript" src="js/three/cameras/Camera.js"></script>
+	<script type="text/javascript" src="js/three/io/Loader.js"></script>
 	<script type="text/javascript" src="js/three/lights/Light.js"></script>
 	<script type="text/javascript" src="js/three/lights/AmbientLight.js"></script>
 	<script type="text/javascript" src="js/three/lights/DirectionalLight.js"></script>
@@ -131,14 +133,18 @@ For creating a customised version of the library, including the source files in
 	<script type="text/javascript" src="js/three/renderers/renderables/RenderableLine.js"></script>
 
 
-### Contributors ###
-
-Thanks to the power of the internets (and github <3) these people have kindly helped out with the project.
+### Change Log ###
 
-[alteredq](http://github.com/alteredq), [philogb](http://github.com/philogb), [supereggbert](http://github.com/supereggbert), [kikko](http://github.com/kikko), [kile](http://kile.stravaganza.org/), ...
+2010 11 04 - **r28** (62.802 kb)
 
+* `Loader` class allows load geometry asynchronously at runtime. ([alteredq](http://github.com/alteredq))
+* `MeshPhongMaterial' working with `WebGLRenderer`. ([alteredq](http://github.com/alteredq))
+* Support for *huge* objects. Max 500k polys and counting. ([alteredq](http://github.com/alteredq))
+* `Projector.unprojectVector` and `Ray` class to check intersections with faces (based on [mindlapse](https://github.com/mindlapse) work)
+* Fixed `CanvasRenderer` and `SVGRenderer` z-sorting (not as jumpy anymore).
+* Fixed Orthographic projection (was y-inverted).
+* Hmmm.. lib file size starting to get too big...
 
-### Change Log ###
 
 2010 10 28 - **r25** (54.480 kb)
 

TODO

@@ -1,6 +1,5 @@
 Core
 * Simple hierarchy system (look at D1plo1d and tamask branches)
-* Interaction, 2D to 3D projection. (look at mindlapse branch)
 
 Examples
 * DOMRenderer example

examples/camera_orthographic.html

@@ -24,9 +24,6 @@
 
 		<script type="text/javascript">
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
-
 			var container, stats;
 			var camera, scene, renderer;
 
@@ -38,7 +35,7 @@
 				container = document.createElement('div');
 				document.body.appendChild(container);
 
-				camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -2000, 1000 );
 				camera.position.x = 200;
 				camera.position.y = 100;
@@ -104,7 +101,7 @@
 				scene.addLight( directionalLight );
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 

examples/geometry/primitives/ClickCube.js

@@ -1,49 +0,0 @@
-/**
- * @author mr.doob / http://mrdoob.com/
- */
-
-var ClickCube = function ( width, height, depth, onSelect ) {
-
-	THREE.Geometry.call( this );
-
-	var scope = this,
-	width_half = width / 2,
-	height_half = height / 2,
-	depth_half = depth / 2;
-
-	v(  width_half,  height_half, -depth_half );
-	v(  width_half, -height_half, -depth_half );
-	v( -width_half, -height_half, -depth_half );
-	v( -width_half,  height_half, -depth_half );
-	v(  width_half,  height_half,  depth_half );
-	v(  width_half, -height_half,  depth_half );
-	v( -width_half, -height_half,  depth_half );
-	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 ) {
-
-		scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
-	}
-
-	function f4( a, b, c, d ) {
-
-		var f = new THREE.SelectableFace4( a, b, c, d, onSelect );
-		scope.faces.push( f );
-
-	}
-
-	this.computeCentroids();
-	this.computeNormals();
-
-};
-
-ClickCube.prototype = new THREE.Geometry();
-ClickCube.prototype.constructor = ClickCube;

examples/hci_clickcube.html

@@ -1,187 +0,0 @@
-<!DOCTYPE HTML>
-<html lang="en">
-	<head>
-		<title>three.js - geometry - cube</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
-		<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/ClickCube.js"></script>
-		<script type="text/javascript" src="geometry/primitives/Plane.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 ClickCube( 200, 200, 200, 
-					function ( s, c, o, f, p ) {
-						f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
-						document.getElementById( "msg" ).innerHTML = "Click detected at " + p; 
-					});
-
-				for (var i = 0; i < geometry.faces.length; i++) {
-					geometry.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
-				}
-
-				cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
-				cube.position.y = 150;
-				scene.addObject(cube);
-
-				geometry2 = new ClickCube( 100, 100, 100, 
-						function ( s, c, o, f, p ) {
-							f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
-							document.getElementById( "msg" ).innerHTML = "Click detected at " + p; 
-						});
-
-				for (var i = 0; i < geometry2.faces.length; i++) {
-					geometry2.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
-				}
-
-				cube2 = new THREE.Mesh( geometry2, new THREE.MeshFaceMaterial() );
-				cube2.position.y = 150;
-				cube2.position.z = 200;
-				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.z = radius * Math.cos( theta * Math.PI / 360 );
-
-				renderer.render(scene, camera);
-				stats.update();
-			}
-
-		</script>
-
-	</body>
-</html>

examples/interactive_spheres.html

@@ -14,12 +14,12 @@
 	</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/Ray.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>
@@ -52,9 +52,6 @@
 		<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/Cube.js"></script>
 		<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
@@ -63,9 +60,6 @@
 
 		<script type="text/javascript">
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
-
 			var container;
 			var stats;
 
@@ -79,7 +73,6 @@
 
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
-			var clickResolver;
 
 			init();
 			setInterval(loop, 1000/60);
@@ -89,36 +82,18 @@
 				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 = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 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 Cube( 200, 200, 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; 
-							}
+					geometry.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, 0.8 ) ];
 
 				}
 
@@ -130,12 +105,7 @@
 
 				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; 
-							};
+					geometry2.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, 0.8 ) ];
 
 				}
 
@@ -144,37 +114,10 @@
 				cube2.position.z = 300;
 				scene.addObject(cube2);
 
-				var geometry = new THREE.Geometry();
-
-				for (var i = 0; i < 100; i ++) {
-
-					var v = new THREE.Vector3( Math.random() * 1000 - 500, Math.random() * 1000 - 500, Math.random() * 1000 - 500 );
-
-					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);
-
 				projector = new THREE.Projector();
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild(renderer.domElement);
 
@@ -184,30 +127,36 @@
 				container.appendChild(stats.domElement);
 
 				document.addEventListener('mousedown', onDocumentMouseDown, false);
-				// document.addEventListener('mousemove', onDocumentMouseMove, false);
+
 			}
 
 			function onDocumentMouseDown( event ) {
 
 				event.preventDefault();
 
-				document.getElementById("msg").innerHTML = "";
+				var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
+				projector.unprojectVector( vector, camera );
 
-				clickResolver.findIntersectInScene( event.clientX / window.innerWidth, event.clientY / window.innerHeight );
-
-				var vector = projector.unprojectVector( new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.95 ), camera );
+				var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
 
+				/*
 				var particle = new THREE.Particle( new THREE.ParticleCircleMaterial( 0xff0000 ) );
 				particle.position = vector;
 
 				scene.addObject( particle );
-			}
-
-			function onDocumentMouseMove( event ) {
+				*/
 
-				mouseX = event.clientX / window.innerWidth;
-				mouseY = event.clientY / window.innerHeight;
+				var intersects = ray.intersectScene( scene );
+				intersects.length && intersects[ 0 ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
 
+				/*
+				// Parse all the faces
+				for ( var i in intersects ) {
+				
+					intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
+					
+				}
+				*/
 			}
 
 			var radius = 600;
@@ -217,11 +166,9 @@
 
 				theta += 0.2;
 				camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
-				// camera.position.y = 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 );
 
-				// clickResolver.findIntersectInScene( mouseX, mouseY );
-
 				renderer.render(scene, camera);
 				stats.update();
 			}

src/cameras/Camera.js

@@ -4,14 +4,12 @@
 
 THREE.Camera = function ( fov, aspect, near, far ) {
 
-	this.fov = fov;
-	this.aspect = aspect;
 	this.position = new THREE.Vector3( 0, 0, 0 );
 	this.target = { position: new THREE.Vector3( 0, 0, 0 ) };
 
-	this.projectionMatrix = THREE.Matrix4.makePerspective( fov, aspect, near, far );
 	this.up = new THREE.Vector3( 0, 1, 0 );
 	this.matrix = new THREE.Matrix4();
+	this.projectionMatrix = THREE.Matrix4.makePerspective( fov, aspect, near, far );
 
 	this.autoUpdateMatrix = true;
 

src/core/Ray.js

@@ -2,7 +2,7 @@
  * @author mr.doob / http://mrdoob.com/
  */
 
-THREE.Ray = new function ( origin, direction ) {
+THREE.Ray = function ( origin, direction ) {
 
 	this.origin = origin || new THREE.Vector3();
 	this.direction = direction || new THREE.Vector3();
@@ -12,15 +12,115 @@ THREE.Ray = new function ( origin, direction ) {
 THREE.Ray.prototype = {
 
 	intersectScene: function ( scene ) {
-	
-		
-	
+
+		var i, l, object,
+		objects = scene.objects,
+		intersects = [];
+
+		for ( i = 0, l = objects.length; i < l; i++ ) {
+
+			object = objects[i];
+
+			if ( object instanceof THREE.Mesh ) {
+
+				intersects = intersects.concat( this.intersectObject( object ) );
+
+			}
+
+		}
+
+		intersects.sort( function ( a, b ) { return a.distance - b.distance; } );
+
+		return intersects;
+
 	},
-	
-	intersectFace: function ( face ) {
-	
+
+	intersectObject: function ( object ) {
+
+		var f, fl, face, a, b, c, d, dot, s,
+		origin, direction,
+		geometry = object.geometry,
+		matrix = object.matrix,
+		intersect, intersects = [],
+		intersectPoint;
+
+		for ( f = 0, fl = geometry.faces.length; f < fl; f ++ ) {
+
+			face = geometry.faces[ f ];
+
+			// if ( !face.selectable ) continue;
+
+			a = matrix.transform( geometry.vertices[ face.a ].position.clone() );
+			b = matrix.transform( geometry.vertices[ face.b ].position.clone() );
+			c = matrix.transform( geometry.vertices[ face.c ].position.clone() );
+			d = face instanceof THREE.Face4 ? matrix.transform( geometry.vertices[ face.d ].position.clone() ) : null;
+
+			origin = this.origin.clone();
+			direction = this.direction.clone();
+			dot = face.normal.dot( direction );
+
+			if ( dot < 0 ) { // Math.abs( dot ) > 0.0001
+
+				s = face.normal.dot( new THREE.Vector3().sub( a, origin ) ) / dot;
+				intersectPoint = origin.addSelf( direction.multiplyScalar( s ) );
+
+				if ( face instanceof THREE.Face3 ) {
+
+					if ( pointInFace3( intersectPoint, a, b, c ) ) {
+
+						intersect = {
+
+							distance: this.origin.distanceTo( intersectPoint ),
+							point: intersectPoint,
+							face: face,
+							object: object
+
+						};
+
+						intersects.push( intersect );
+
+					}
+
+				} else if ( face instanceof THREE.Face4 ) {
+
+					if ( pointInFace3( intersectPoint, a, b, d ) || pointInFace3( intersectPoint, b, c, d ) ) {
+
+						intersect = {
+
+							distance: this.origin.distanceTo( intersectPoint ),
+							point: intersectPoint,
+							face: face,
+							object: object
+
+						};
+
+						intersects.push( intersect );
+
+					}
+
+				}
+
+			}
+			
+		}
+		
+		return intersects;
+		
+		// http://www.blackpawn.com/texts/pointinpoly/default.html
 		
-	
+		function pointInFace3( 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 );
+
+		}
+
 	}
 
 };

src/hci/ClickResolver.js

@@ -1,157 +0,0 @@
-
-THREE.ClickResolver = function( camera, scene ) {
-
-	this.camera = camera;
-	this.scene  = scene;
-	this._debug = false;
-
-};
-
-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, 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, object, closestIntersect.face, closestIntersect.point );
-
-		}
-
-	},
-
-	translateScreenCoordsToZIndex: function ( xPercent, yPercent, targetZIndex ) {
-
-		var maxVisibleXatZIndex, maxVisibleYatZIndex;
-		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 );
-
-		maxVisibleYatZIndex = rayToZIndex.length() * Math.tan( this.camera.fov * Math.PI / 360 );
-		maxVisibleXatZIndex = maxVisibleYatZIndex  * this.camera.aspect;
-
-		left.cross( this.camera.up, rayToZIndex );
-		up  .cross( rayToZIndex, left );
-
-		return coordAtZIndex.add( this.camera.position, rayToZIndex ).
-			addSelf( left.setLength( maxVisibleXatZIndex * ( 1 - 2 * xPercent ))).
-			addSelf( up  .setLength( maxVisibleYatZIndex * ( 1 - 2 * yPercent )));
-
-	},
-
-	getIntersectingFaces: function( scene, camera, object3d, linePoint, lineDir ) {
-
-		var intersect = {
-			face     : null,
-			point    : null,
-			distance : Number.MAX_VALUE
-		};
-
-		var geometry = object3d.geometry;
-		var matrix = object3d.matrix;
-
-		for ( f = 0; f < geometry.faces.length; f++ ) {
-
-			var face = geometry.faces[ f ];
-
-			// if ( !face.selectable ) continue;
-
-			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 instanceof THREE.Face4 ? matrix.transform( geometry.vertices[ face.d ].position.clone() ) : null;
-
-			var lineStart = linePoint.clone();
-			var lineDirection = lineDir.clone();
-			var dot = face.normal.dot( lineDirection );
-
-			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 ( face instanceof THREE.Face3 ) {
-
-					if ( pointInFace3( planeIntersect, a, b, c ) ) {
-
-						logIntersect( planeIntersect, face );
-
-					}
-
-				} else if ( face instanceof THREE.Face4 ) {
-
-					if ( pointInFace3( planeIntersect, a, b, d ) || pointInFace3( planeIntersect, b, c, d ) ) {
-
-						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;
-
-			}
-
-		}
-
-		// http://www.blackpawn.com/texts/pointinpoly/default.html
-
-		function pointInFace3( 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 );
-
-		}
-
-		return intersect;
-	}
-
-};

src/hci/SelectableFace3.js

@@ -1,10 +0,0 @@
-THREE.SelectableFace3 =  function ( a, b, c, normal, color, onSelect) {
-	
-	THREE.Face3.call( this, a, b, c, normal, color );
-	
-	this.selectable = true;
-	this.onSelect = onSelect;
-};
-
-THREE.SelectableFace3.prototype = new THREE.Face3();
-THREE.SelectableFace3.prototype.constructor = THREE.SelectableFace3;

src/hci/SelectableFace4.js

@@ -1,11 +0,0 @@
-var SelectableFace4 = function ( a, b, c, d, onSelect, normal, color) {
-	
-	THREE.Face4.call( this, a, b, c, d, normal, color );
-	
-	this.selectable = true;
-	this.onSelect = onSelect;
-};
-
-SelectableFace4.prototype = new THREE.Face4();
-SelectableFace4.prototype.constructor = SelectableFace4;  
-THREE.SelectableFace4 = SelectableFace4;

src/renderers/Projector.js

@@ -240,13 +240,12 @@ THREE.Projector = function() {
 
 	this.unprojectVector = function ( vector, camera ) {
 
-		var vector2 = vector.clone(),
-		matrix = new THREE.Matrix4();
+		var matrix = new THREE.Matrix4();
 
 		matrix.multiply( THREE.Matrix4.makeInvert( camera.matrix ), THREE.Matrix4.makeInvert( camera.projectionMatrix ) );
-		matrix.transform( vector2 );
+		matrix.transform( vector );
 
-		return vector2;
+		return vector;
 
 	};
 

utils/Builder.py

@@ -11,6 +11,7 @@ files.append('core/Color.js')
 files.append('core/Vector2.js')
 files.append('core/Vector3.js')
 files.append('core/Vector4.js')
+files.append('core/Ray.js')
 files.append('core/Rectangle.js')
 files.append('core/Matrix3.js')
 files.append('core/Matrix4.js')

utils/BuilderCanvas.py

@@ -11,6 +11,7 @@ files.append('core/Color.js')
 files.append('core/Vector2.js')
 files.append('core/Vector3.js')
 files.append('core/Vector4.js')
+files.append('core/Ray.js')
 files.append('core/Rectangle.js')
 files.append('core/Matrix3.js')
 files.append('core/Matrix4.js')

utils/BuilderDOM.py

@@ -11,6 +11,7 @@ files.append('core/Color.js')
 files.append('core/Vector2.js')
 files.append('core/Vector3.js')
 files.append('core/Vector4.js')
+files.append('core/Ray.js')
 files.append('core/Rectangle.js')
 files.append('core/Matrix3.js')
 files.append('core/Matrix4.js')

utils/BuilderDebug.py

@@ -11,6 +11,7 @@ files.append('core/Color.js')
 files.append('core/Vector2.js')
 files.append('core/Vector3.js')
 files.append('core/Vector4.js')
+files.append('core/Ray.js')
 files.append('core/Rectangle.js')
 files.append('core/Matrix3.js')
 files.append('core/Matrix4.js')

utils/BuilderSVG.py

@@ -11,6 +11,7 @@ files.append('core/Color.js')
 files.append('core/Vector2.js')
 files.append('core/Vector3.js')
 files.append('core/Vector4.js')
+files.append('core/Ray.js')
 files.append('core/Rectangle.js')
 files.append('core/Matrix3.js')
 files.append('core/Matrix4.js')

utils/BuilderWebGL.py

@@ -11,6 +11,7 @@ files.append('core/Color.js')
 files.append('core/Vector2.js')
 files.append('core/Vector3.js')
 files.append('core/Vector4.js')
+files.append('core/Ray.js')
 files.append('core/Rectangle.js')
 files.append('core/Matrix3.js')
 files.append('core/Matrix4.js')