Updating code to use Raycaster.setFromCamera() method

editor/js/Viewport.js

@@ -79,16 +79,15 @@ var Viewport = function ( editor ) {
 	// object picking
 
 	var raycaster = new THREE.Raycaster();
+	var mouse = new THREE.Vector2();
 
 	// events
 
 	var getIntersects = function ( point, object ) {
 
-		var vector = new THREE.Vector3();
-		vector.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1, 0.5 );
-		vector.unproject( camera );
+		mouse.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1 );
 
-		raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
+		raycaster.setFromCamera( mouse, camera );
 
 		if ( object instanceof Array ) {
 

examples/canvas_interactive_cubes.html

@@ -29,6 +29,7 @@
 			var particleMaterial;
 
 			var raycaster;
+			var mouse;
 
 			var objects = [];
 
@@ -93,6 +94,7 @@
 				//
 				
 				raycaster = new THREE.Raycaster();
+				mouse = new THREE.Vector2();
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
@@ -137,11 +139,10 @@
 
 				event.preventDefault();
 
-				var vector = new THREE.Vector3();
-				vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
-				vector.unproject( camera );
+				mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
+				mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
 
-				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( objects );
 

examples/canvas_interactive_cubes_tween.html

@@ -29,6 +29,7 @@
 			var camera, scene, renderer;
 			
 			var raycaster;
+			var mouse;
 
 			init();
 			animate();
@@ -73,6 +74,7 @@
 				//
 				
 				raycaster = new THREE.Raycaster();
+				mouse = new THREE.Vector2();
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
@@ -117,11 +119,10 @@
 
 				event.preventDefault();
 
-				var vector = new THREE.Vector3();
-				vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
-				vector.unproject( camera );
+				mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
+				mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
 
-				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( scene.children );
 

examples/canvas_interactive_particles.html

@@ -28,6 +28,7 @@
 			var camera, scene, renderer;
 
 			var raycaster;
+			var mouse;
 
 			var PI2 = Math.PI * 2;
 
@@ -48,7 +49,7 @@
 
 			}
 
-			var mouse = { x: 0, y: 0 }, INTERSECTED;
+			var INTERSECTED;
 
 			init();
 			animate();
@@ -85,6 +86,7 @@
 				//
 				
 				raycaster = new THREE.Raycaster();
+				mouse = new THREE.Vector2();
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
@@ -148,13 +150,11 @@
 				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
 				camera.lookAt( scene.position );
 
-				// find intersections
-
 				camera.updateMatrixWorld();
 
-				var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ).unproject( camera );
+				// find intersections
 
-				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( scene.children );
 

examples/canvas_interactive_voxelpainter.html

@@ -26,7 +26,7 @@
 			var camera, scene, renderer;
 			var plane;
 
-			var vector, raycaster, isShiftDown = false;
+			var mouse, raycaster, isShiftDown = false;
 
 			var cubeGeometry = new THREE.BoxGeometry( 50, 50, 50 );
 			var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, overdraw: 0.5 } );
@@ -78,8 +78,8 @@
 
 				//
 
-				vector = new THREE.Vector3();
 				raycaster = new THREE.Raycaster();
+				mouse = new THREE.Vector2();
 
 				var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
 				geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
@@ -142,10 +142,10 @@
 
 				event.preventDefault();
 
-				vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
-				vector.unproject( camera );
+				mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
+				mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
 
-				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( objects );
 

examples/webgl_decals.html

@@ -45,7 +45,6 @@
 			normal: new THREE.Vector3()
 		};
 		var controls, renderHelpers = false;
-		var mouseVector = new THREE.Vector3();
 		var mouse = new THREE.Vector2();
 
 		var decalDiffuse = THREE.ImageUtils.loadTexture( 'textures/decal/decal-diffuse.png' );
@@ -105,9 +104,10 @@
 			camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
 			camera.position.z = 100;
 			camera.target = new THREE.Vector3();
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
 
-			scene.add( camera );
+			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			controls.minDistance = 50;
+			controls.maxDistance = 200;
 
 			var light = new THREE.HemisphereLight( 0xffddcc, 0x111122 );
 			light.position.set( 1, 0.75, 0.5 );
@@ -173,9 +173,7 @@
 
 				if( !mesh ) return;
 
-				mouseVector.set( mouse.x, mouse.y, 1 ).unproject( camera );
-
-				raycaster.set( camera.position, mouseVector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( [ mesh ] );
 

examples/webgl_effects_vr.html

@@ -204,11 +204,11 @@
 				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
 				camera.lookAt( scene.position );
 
-				// find intersections
+				camera.updateMatrixWorld();
 
-				var vector = new THREE.Vector3( mouse.x, mouse.y, 1 ).unproject( camera );
+				// find intersections
 
-				raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( scene.children );
 

examples/webgl_geometry_terrain_raycast.html

@@ -64,6 +64,9 @@
 
 			var helper;
 
+			var raycaster = new THREE.Raycaster();
+			var mouse = new THREE.Vector2();
+
 			init();
 			animate();
 
@@ -248,14 +251,10 @@
 
 			function onMouseMove( event ) {
 
-				var mouseX = ( event.clientX / window.innerWidth ) * 2 - 1;
-				var mouseY = -( event.clientY / window.innerHeight ) * 2 + 1;
-
-				var vector = new THREE.Vector3( mouseX, mouseY, camera.near );
-				// Convert the [-1, 1] screen coordinate into a world coordinate on the near plane
-				vector.unproject( camera );
+				mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
+				mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
 
-				var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				// See if the ray from the camera into the world hits one of our meshes
 				var intersects = raycaster.intersectObject( mesh );

examples/webgl_interactive_buffergeometry.html

@@ -268,9 +268,7 @@
 				mesh.rotation.x = time * 0.15;
 				mesh.rotation.y = time * 0.25;
 
-				var vector = new THREE.Vector3( mouse.x, mouse.y, 1 ).unproject( camera );
-
-				raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObject( mesh );
 

examples/webgl_interactive_cubes.html

@@ -133,11 +133,11 @@
 				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
 				camera.lookAt( scene.position );
 
-				// find intersections
+				camera.updateMatrixWorld();
 
-				var vector = new THREE.Vector3( mouse.x, mouse.y, 1 ).unproject( camera );
+				// find intersections
 
-				raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( scene.children );
 

examples/webgl_interactive_cubes_ortho.html

@@ -137,12 +137,11 @@
 				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
 				camera.lookAt( scene.position );
 
-				// find intersections
+				camera.updateMatrixWorld();
 
-				var vector = new THREE.Vector3( mouse.x, mouse.y, - 1 ).unproject( camera );
-				var direction = new THREE.Vector3( 0, 0, -1 ).transformDirection( camera.matrixWorld );
+				// find intersections
 
-				raycaster.set( vector, direction );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( scene.children );
 

examples/webgl_interactive_draggablecubes.html

@@ -27,6 +27,7 @@
 			var camera, controls, scene, renderer;
 			var objects = [], plane;
 
+			var raycaster = new THREE.Raycaster();
 			var mouse = new THREE.Vector2(),
 			offset = new THREE.Vector3(),
 			INTERSECTED, SELECTED;
@@ -159,9 +160,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.setFromCamera( mouse, camera );
 
 				if ( SELECTED ) {
 

examples/webgl_interactive_lines.html

@@ -42,7 +42,7 @@
 				info.style.top = '10px';
 				info.style.width = '100%';
 				info.style.textAlign = 'center';
-				info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> canvas - interactive lines';
+				info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> webgl - interactive lines';
 				container.appendChild( info );
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
@@ -52,21 +52,21 @@
 				var geometry = new THREE.SphereGeometry( 5 );
 				var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
 
-				sphereInter = new THREE.Mesh( geometry, material );
-				sphereInter.visible = false;
-				scene.add( sphereInter );
+				//sphereInter = new THREE.Mesh( geometry, material );
+				//sphereInter.visible = false;
+				//scene.add( sphereInter );
 
 				var geometry = new THREE.Geometry();
 
 				var point = new THREE.Vector3();
 				var direction = new THREE.Vector3();
 
-				for ( var i = 0; i < 100; i ++ ) {
+				for ( var i = 0; i < 50; i ++ ) {
 
 					direction.x += Math.random() - 0.5;
 					direction.y += Math.random() - 0.5;
 					direction.z += Math.random() - 0.5;
-					direction.normalize().multiplyScalar( 5 );
+					direction.normalize().multiplyScalar( 10 );
 
 					point.add( direction );
 
@@ -111,7 +111,7 @@
 				scene.add( parentTransform );
 
 				raycaster = new THREE.Raycaster();
-				raycaster.linePrecision = 3;
+				raycaster.linePrecision = 1;
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setClearColor( 0xf0f0f0 );
@@ -170,11 +170,11 @@
 				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
 				camera.lookAt( scene.position );
 
-				// find intersections
+				camera.updateMatrixWorld();
 
-				var vector = new THREE.Vector3( mouse.x, mouse.y, 1 ).unproject( camera );
+				// find intersections
 
-				raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( parentTransform.children, true);
 
@@ -189,8 +189,8 @@
 					currentIntersected = intersects[ 0 ].object;
 					currentIntersected.material.linewidth = 5;
 
-					sphereInter.visible = true;
-					sphereInter.position.copy( intersects[ 0 ].point );
+					//sphereInter.visible = true;
+					//sphereInter.position.copy( intersects[ 0 ].point );
 
 				} else {
 
@@ -202,7 +202,7 @@
 
 					currentIntersected = undefined;
 
-					sphereInter.visible = false;
+					//sphereInter.visible = false;
 
 				}
 

examples/webgl_interactive_particles.html

@@ -88,8 +88,7 @@
 			var PARTICLE_SIZE = 20;
 
 			var raycaster, intersects;
-			var mouse = { x: 1, y: 1 }, INTERSECTED;
-			var vector = new THREE.Vector3();
+			var mouse, INTERSECTED;
 
 			init();
 			animate();
@@ -159,6 +158,7 @@
 				//
 
 				raycaster = new THREE.Raycaster();
+				mouse = new THREE.Vector2()
 
 				//
 
@@ -201,14 +201,12 @@
 
 			}
 
-			function render() { ref: http://dl.dropboxusercontent.com/u/4253186/three/examples/webgl_interactive_particles.html
+			function render() {
 
 				particles.rotation.x += 0.0005;
 				particles.rotation.y += 0.001;
 
-				vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ).unproject( camera );
-
-				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				intersects = raycaster.intersectObject( particles );
 

examples/webgl_interactive_raycasting_pointcloud.html

@@ -43,8 +43,7 @@
 			var renderer, scene, camera, stats;
 			var pointclouds;
 			var raycaster, intersects;
-			var mouse = { x: 1, y: 1 };
-			var vector = new THREE.Vector3();
+			var mouse = new THREE.Vector2();
 			var intersection = null;
 			var spheres = [];
 			var spheresIndex = 0;
@@ -323,11 +322,9 @@
 			function render() {
 
 				camera.applyMatrix( rotateY );
-				camera.updateMatrixWorld( true );
+				camera.updateMatrixWorld();
 
-				vector.set( mouse.x, mouse.y, 0.1 ).unproject( camera );
-
-				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersections = raycaster.intersectObjects( pointclouds );
 				intersection = ( intersections.length ) > 0 ? intersections[ 0 ] : null;

examples/webgl_interactive_voxelpainter.html

@@ -28,7 +28,7 @@
 			var container;
 			var camera, scene, renderer;
 			var plane, cube;
-			var vector, raycaster, isShiftDown = false;
+			var mouse, raycaster, isShiftDown = false;
 
 			var rollOverMesh, rollOverMaterial;
 			var cubeGeo, cubeMaterial;
@@ -93,8 +93,8 @@
 
 				//
 
-				vector = new THREE.Vector3();
 				raycaster = new THREE.Raycaster();
+				mouse = new THREE.Vector2();
 
 				var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
 				geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
@@ -144,10 +144,9 @@
 
 				event.preventDefault();
 
-				vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
-				vector.unproject( camera );
+				mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
 
-				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( objects );
 
@@ -168,10 +167,9 @@
 
 				event.preventDefault();
 
-				vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
-				vector.unproject( camera );
+				mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
 
-				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( objects );
 

examples/webgl_octree.html

@@ -36,7 +36,10 @@
 				searchMesh,
 				baseR = 255, baseG = 0, baseB = 255,
 				foundR = 0, foundG = 255, foundB = 0,
-				adding = true;
+				adding = true,
+				rayCaster = new THREE.Raycaster(),
+				origin = new THREE.Vector3(),
+				direction = new THREE.Vector3();
 
 			init();
 			animate();
@@ -225,7 +228,9 @@
 				// optional third parameter: boolean, if should sort results by object when using faces in octree
 				// optional fourth parameter: vector3, direction of search when using ray (assumes radius is distance/far of ray)
 			
-				var rayCaster = new THREE.Raycaster( new THREE.Vector3().copy( searchMesh.position ), new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 ).normalize() );
+				origin.copy( searchMesh.position );
+				direction.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 ).normalize();
+				rayCaster.set( origin, direction );
 				meshesSearch = octree.search( rayCaster.ray.origin, radiusSearch, true, rayCaster.ray.direction );
 				var intersections = rayCaster.intersectOctreeObjects( meshesSearch );
 			

examples/webgl_octree_raycasting.html

@@ -52,6 +52,7 @@
 		var searchInterval = 0;
 		var useOctree = true;
 		
+		var raycaster = new THREE.Raycaster();
 		var mouse = new THREE.Vector2();
 		var intersected;
 
@@ -321,9 +322,8 @@
 			mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
 			mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 			
-			var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ).unproject( camera );
+			raycaster.setFromCamera( mouse, camera );
 
-			var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
 			var octreeObjects;
 			var numObjects;
 			var numFaces = 0;

examples/webgl_postprocessing_dof2.html

@@ -66,8 +66,6 @@ Use WEBGL Depth buffer support?
 			var camera, scene, renderer,
 				material_depth;
 
-			var mouseX = 0, mouseY = 0;
-
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
@@ -81,7 +79,8 @@ Use WEBGL Depth buffer support?
 			};
 
 			var singleMaterial = false;
-			var vector = new THREE.Vector3();
+			var mouse = new THREE.Vector2();
+			var raycaster = new THREE.Raycaster();
 			var distance = 100;
 			var target = new THREE.Vector3( 0, 20, -50 );
 			var effectController;
@@ -371,8 +370,8 @@ Use WEBGL Depth buffer support?
 
 			function onDocumentMouseMove( event ) {
 
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
+				mouse.x = ( event.clientX - windowHalfX ) / windowHalfX;
+				mouse.y = - ( event.clientY - windowHalfY ) / windowHalfY;
 
 				postprocessing.bokeh_uniforms[ 'focusCoords' ].value.set(event.clientX / window.innerWidth, 1-event.clientY / window.innerHeight);
 
@@ -384,8 +383,8 @@ Use WEBGL Depth buffer support?
 
 					event.preventDefault();
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+					mouse.x = ( event.touches[ 0 ].pageX - windowHalfX ) / windowHalfX;
+					mouse.y = - ( event.touches[ 0 ].pageY - windowHalfY ) / windowHalfY;
 
 				}
 			}
@@ -396,8 +395,8 @@ Use WEBGL Depth buffer support?
 
 					event.preventDefault();
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+					mouse.x = ( event.touches[ 0 ].pageX - windowHalfX ) / windowHalfX;
+					mouse.y = - ( event.touches[ 0 ].pageY - windowHalfY ) / windowHalfY;
 
 				}
 
@@ -490,12 +489,11 @@ Use WEBGL Depth buffer support?
 
 				camera.lookAt( target );
 
-				if ( effectController.jsDepthCalculation ) {
+				camera.updateMatrixWorld();
 
-					vector.set( mouseX / windowHalfX, -mouseY / windowHalfY, 1 );
-					vector.unproject( camera );
+				if ( effectController.jsDepthCalculation ) {
 
-					var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
+					raycaster.setFromCamera( mouse, camera );
 
 					var intersects = raycaster.intersectObjects( scene.children, true );