Fixed collisions examples.

examples/webgl_collisions_box.html

@@ -44,7 +44,8 @@ body {
 
 <script type="text/javascript">
 
-var scene, camera, renderer, info, mouse2d, sun, cube;
+var camera, scene, projector, renderer,
+info, mouse = { x: 0, y: 0 }, sun, cube;
 
 var bounce = 0;
 
@@ -57,10 +58,11 @@ function init() {
 
 	camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 	camera.position.z = -500;
-	mouse2d = new THREE.Vector3( 0, 0, 1 );
 
 	scene = new THREE.Scene();
 
+	projector = new THREE.Projector();
+
 	renderer = new THREE.WebGLRenderer();
 	renderer.setSize( window.innerWidth, window.innerHeight );
 	container.appendChild(renderer.domElement);
@@ -101,9 +103,8 @@ function createCube( s, p ) {
 function onDocumentMouseMove( event ) {
 
 	event.preventDefault();
-	mouse2d.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-	mouse2d.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
-	mouse2d.z = 1;
+	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
 };
 
@@ -111,19 +112,16 @@ function animate() {
 
 	requestAnimationFrame( animate );
 
-	var r = new THREE.Ray();
-	r.origin.copy( mouse2d );
+	info.innerHTML = "";
 
-	var matrix = camera.matrixWorld.clone();
-	matrix.multiplySelf( THREE.Matrix4.makeInvert( camera.projectionMatrix ) );
-	matrix.multiplyVector3( r.origin );
-	r.direction = r.origin.clone().subSelf( camera.position );
+	var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
+	projector.unprojectVector( vector, camera );
 
-	info.innerHTML = "";
+	var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
 
-	var c = THREE.Collisions.rayCastNearest( r );
+	var c = THREE.Collisions.rayCastNearest( ray );
 
-	if( c ) {
+	if ( c ) {
 
 		info.innerHTML += "Found @ distance " + c.distance.toFixed(2);
 		c.mesh.materials[ 0 ].color.setHex( 0xaa0000 );

examples/webgl_collisions_mesh.html

@@ -45,18 +45,15 @@ body {
 
 <script type="text/javascript"> 
 
-var scene, camera, renderer, info, mouse2d, sun, loader, stats;
+var camera, scene, projector, renderer,
+info, mouse = { x: 0, y: 0 }, sun, loader, stats;
+
 var meshes = [];
 
 var theta = 0;
 var camdist = 1500;
 
-var totalFaces = 0;
-var totalColliders = 0;
-
-var ray = new THREE.Ray();
-var matrix = new THREE.Matrix4(),
-	matrix2 = new THREE.Matrix4();
+var totalFaces = 0, totalColliders = 0;
 
 function init() {
 
@@ -67,12 +64,13 @@ function init() {
 	
 	camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 	camera.position.z = camdist;
-	mouse2d = new THREE.Vector3( 0, 0, 1 );
 	
 	loader = new THREE.JSONLoader(  );
 
 	scene = new THREE.Scene();
 
+	projector = new THREE.Projector();
+
 	renderer = new THREE.WebGLRenderer();
 	renderer.setSize( window.innerWidth, window.innerHeight );
 	container.appendChild( renderer.domElement );
@@ -152,7 +150,7 @@ function loadCube(p) {
 		addCube( new THREE.Vector3(	0, -sy,	-sz*2), geometry );
 		addCube( new THREE.Vector3( sx,-sy,	-sz*2), geometry );
 		
-		//info.innerHTML = "Total colliders: " + totalColliders + " (Faces: " + totalFaces + ")<br>";
+		// info.innerHTML = "Total colliders: " + totalColliders + " (Faces: " + totalFaces + ")<br>";
 	
 	};
 
@@ -186,9 +184,8 @@ function addCube( p, g) {
 function onDocumentMouseMove( event ) {
 
 	event.preventDefault();	
-	mouse2d.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-	mouse2d.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
-	mouse2d.z = 1;
+	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
 };
 
@@ -197,15 +194,6 @@ function animate() {
 
 	requestAnimationFrame( animate );
 	
-	ray.origin.copy( mouse2d );
-
-	matrix.copy( camera.matrixWorld );
-	matrix.multiplySelf( THREE.Matrix4.makeInvert( camera.projectionMatrix, matrix2 ) );
-	matrix.multiplyVector3( ray.origin );
-	
-	ray.direction.copy( ray.origin );
-	ray.direction.subSelf( camera.position );
-	
 	if( meshes.length == 0 ) return;
 	
 	var i, l = meshes.length;
@@ -216,6 +204,10 @@ function animate() {
 
 	}
 
+	var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
+	projector.unprojectVector( vector, camera );
+
+	var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
 
 	var c = THREE.Collisions.rayCastNearest( ray );
 	

examples/webgl_collisions_normal.html

@@ -45,18 +45,15 @@ body {
 
 <script type="text/javascript"> 
 
-var scene, camera, renderer, info, mouse2d, sun, loader, stats, line;
+var camera, scene, projector, renderer,
+info, mouse = { x: 0, y: 0 }, sun, loader, stats, line;
+
 var meshes = [];
 
 var theta = 0;
 var camdist = 500;
 
-var totalFaces = 0;
-var totalColliders = 0;
-
-var ray = new THREE.Ray();
-var matrix = new THREE.Matrix4(),
-	matrix2 = new THREE.Matrix4();
+var totalFaces = 0, totalColliders = 0;
 
 function init() {
 
@@ -67,12 +64,13 @@ function init() {
 	
 	camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 	camera.position.z = camdist;
-	mouse2d = new THREE.Vector3( 0, 0, 1 );
 	
 	loader = new THREE.JSONLoader(  );
 
 	scene = new THREE.Scene();
 
+	projector = new THREE.Projector();
+
 	renderer = new THREE.WebGLRenderer();
 	renderer.setSize( window.innerWidth, window.innerHeight );
 	container.appendChild( renderer.domElement );
@@ -139,9 +137,8 @@ function addCube( p, g) {
 function onDocumentMouseMove( event ) {
 
 	event.preventDefault();	
-	mouse2d.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-	mouse2d.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
-	mouse2d.z = 1;
+	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
 };
 
@@ -149,20 +146,13 @@ function onDocumentMouseMove( event ) {
 function animate() {
 
 	requestAnimationFrame( animate );
-	
-	ray.origin.copy( mouse2d );
 
-	matrix.copy( camera.matrixWorld );
-	matrix.multiplySelf( THREE.Matrix4.makeInvert( camera.projectionMatrix, matrix2 ) );
-	matrix.multiplyVector3( ray.origin );
-	
-	ray.direction.copy( ray.origin );
-	ray.direction.subSelf( camera.position );
-	
-	//var ray2 = new THREE.Ray();
-	//ray2.origin = ray.origin.clone();
+	var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
+	projector.unprojectVector( vector, camera );
+
+	var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
 	
-	if( meshes.length == 0 ) return;
+	if ( meshes.length == 0 ) return;
 	
 	var i, l = meshes.length;
 	

examples/webgl_collisions_primitives.html

@@ -48,23 +48,26 @@
 
         <script type="text/javascript">
 
-            var scene, camera, renderer, info, mouse2d, sun;
+            var camera, scene, projector, renderer,
+            info, mouse = { x: 0, y: 0 }, sun;
 
             var theta = 0;
             var camdist = 1500;
             var geoms = [];
 
-            function init(){
+            function init () {
+
                 container = document.createElement('div');
                 document.body.appendChild(container);
 
                 info = document.getElementById("info");
 
                 camera = new THREE.Camera(40, window.innerWidth / window.innerHeight, 1, 10000);
-                mouse2d = new THREE.Vector3(0, 0, 1);
 
                 scene = new THREE.Scene();
 
+                projector = new THREE.Projector();
+
                 renderer = new THREE.WebGLRenderer();
                 renderer.setSize(window.innerWidth, window.innerHeight);
                 container.appendChild(renderer.domElement);
@@ -137,23 +140,23 @@
             }
 
             function onDocumentMouseMove(event){
+
                 event.preventDefault();
-                mouse2d.x = (event.clientX / window.innerWidth) * 2 - 1;
-                mouse2d.y = -(event.clientY / window.innerHeight) * 2 + 1;
-                mouse2d.z = 1;
+                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+                mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
             }
 
             function animate(){
-                requestAnimationFrame(animate);
 
-                var r = new THREE.Ray();
-                r.origin = mouse2d.clone();
-                var matrix = camera.matrixWorld.clone();
-                matrix.multiplySelf(THREE.Matrix4.makeInvert(camera.projectionMatrix));
-                matrix.multiplyVector3(r.origin);
-                r.direction = r.origin.clone().subSelf(camera.position);
+                requestAnimationFrame( animate );
 
-                for (var i = 0; i < geoms.length; i++) {
+                var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
+                projector.unprojectVector( vector, camera );
+
+                var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
+
+                for ( var i = 0; i < geoms.length; i++) {
                     geoms[i].materials[0].color = new THREE.Color(0x007700);
                 }
 
@@ -162,14 +165,14 @@
                     // Raycast all
 
                     ts = new Date().getTime();
-                    var cs = THREE.Collisions.rayCastAll( r );
+                    var cs = THREE.Collisions.rayCastAll( ray );
                     tt = new Date().getTime() - ts;
 
                     if ( cs.length > 0 ) {
 
                         info.innerHTML = cs.length + " colliders found in " + tt;
 
-                        for ( var i = 0; i < cs.length; i++ ) {
+                        for ( var i = 0; i < cs.length; i ++ ) {
 
                             cs[ i ].mesh.materials[ 0 ].color.setHex( 0xaa0000 );
 
@@ -186,7 +189,7 @@
                     // Raycast nearest
 
                     ts = new Date().getTime();
-                    var c = THREE.Collisions.rayCastNearest( r );
+                    var c = THREE.Collisions.rayCastNearest( ray );
                     tt = new Date().getTime() - ts;
 
                     if ( c ) {
@@ -211,7 +214,8 @@
 
                 renderer.render( scene, camera );
 
-				stats.update();
+                stats.update();
+
             }
 
             function vts(v){

examples/webgl_collisions_terrain.html

@@ -43,15 +43,14 @@ body {
 
 <script type="text/javascript">
 
-var scene, camera, renderer, info, mouse2d, sun, loader, sphere, ray;
+var camera, scene, renderer,
+info, mouse2d, sun, loader, sphere, ray;
 
-var theta = 0;
-var radius = 250;
-var speed = 0.0015;
-var sphereSize = 4;
+var theta = 0, radius = 250, speed = 0.002, sphereSize = 4;
 
 
 function init() {
+
 	container = document.createElement( 'div' );
 	document.body.appendChild( container );
 
@@ -71,7 +70,6 @@ function init() {
 
 	sphere = new THREE.Mesh( new THREE.SphereGeometry( sphereSize, 10, 10 ), new THREE.MeshLambertMaterial( { color: 0xff0000 } ) );
 	scene.addObject(sphere);
-	camera.target = sphere;
 
 	renderer = new THREE.WebGLRenderer();
 	renderer.setSize( window.innerWidth, window.innerHeight );
@@ -123,11 +121,10 @@ function animate() {
 		//info.innerHTML = "No intersection";
 	}
 
-
-
-
 	theta += speed;
 
+	camera.target.position.copy( sphere.position );
+
 	renderer.render( scene, camera );
 }
 

examples/webgl_collisions_trigger.html

@@ -50,14 +50,11 @@
 
         <script type="text/javascript">
 
-            var scene, camera, renderer, info, mouse2d, sun, loader, sphere;
+            var camera, scene, renderer, info, mouse2d, sun, loader, sphere;
 
-            var range = 400;
-            var speed = 1;
-            var sphereSize = 4;
-
-			var cubes = [];
+            var range = 400, speed = 1, sphereSize = 4;
 
+            var cubes = [];
 
             function init(){
                 container = document.createElement('div');