Updated examples using Projector.(un)projectVector.

editor/js/Viewport.js

@@ -73,26 +73,25 @@ var Viewport = function ( editor ) {
 
 	// object picking
 
-	var ray = new THREE.Raycaster();
-	var projector = new THREE.Projector();
+	var raycaster = new THREE.Raycaster();
 
 	// events
 
 	var getIntersects = function ( point, object ) {
 
-		var vector = new THREE.Vector3( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1, 0.5 );
+		var vector = new THREE.Vector3();
+		vector.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1, 0.5 );
+		vector.unproject( camera );
 
-		projector.unprojectVector( vector, camera );
-
-		ray.set( camera.position, vector.sub( camera.position ).normalize() );
+		raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
 
 		if ( object instanceof Array ) {
 
-			return ray.intersectObjects( object );
+			return raycaster.intersectObjects( object );
 
 		}
 
-		return ray.intersectObject( object );
+		return raycaster.intersectObject( object );
 
 	};
 

examples/canvas_interactive_cubes.html

@@ -25,7 +25,7 @@
 		<script>
 
 			var container, stats;
-			var camera, scene, projector, renderer;
+			var camera, scene, renderer;
 			var particleMaterial;
 
 			var objects = [];
@@ -88,8 +88,6 @@
 
 				} );
 
-				projector = new THREE.Projector();
-
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -122,8 +120,9 @@
 
 				event.preventDefault();
 
-				var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
-				projector.unprojectVector( vector, camera );
+				var vector = new THREE.Vector3();
+				vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
+				vector.unproject( camera );
 
 				var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
 

examples/canvas_interactive_cubes_tween.html

@@ -26,7 +26,7 @@
 		<script>
 
 			var container, stats;
-			var camera, scene, projector, renderer;
+			var camera, scene, renderer;
 
 			init();
 			animate();
@@ -68,8 +68,6 @@
 
 				}
 
-				projector = new THREE.Projector();
-
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -102,8 +100,9 @@
 
 				event.preventDefault();
 
-				var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
-				projector.unprojectVector( vector, camera );
+				var vector = new THREE.Vector3();
+				vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
+				vector.unproject( camera );
 
 				var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
 

examples/canvas_interactive_particles.html

@@ -25,7 +25,7 @@
 		<script>
 
 			var container, stats;
-			var camera, scene, projector, renderer;
+			var camera, scene, renderer;
 
 			var PI2 = Math.PI * 2;
 
@@ -80,8 +80,6 @@
 
 				}
 
-				projector = new THREE.Projector();
-
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -147,8 +145,7 @@
 
 				camera.updateMatrixWorld();
 
-				var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
-				projector.unprojectVector( vector, camera );
+				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() );
 

examples/js/controls/TransformControls.js

@@ -573,7 +573,6 @@
 		var objectChangeEvent = { type: "objectChange" };
 
 		var ray = new THREE.Raycaster();
-		var projector = new THREE.Projector();
 		var pointerVector = new THREE.Vector3();
 
 		var point = new THREE.Vector3();
@@ -974,11 +973,12 @@
 		function intersectObjects( pointer, objects ) {
 
 			var rect = domElement.getBoundingClientRect();
-			var x = (pointer.clientX - rect.left) / rect.width;
-			var y = (pointer.clientY - rect.top) / rect.height;
-			pointerVector.set( ( x ) * 2 - 1, - ( y ) * 2 + 1, 0.5 );
+			var x = ( pointer.clientX - rect.left ) / rect.width;
+			var y = ( pointer.clientY - rect.top ) / rect.height;
+
+			pointerVector.set( ( x * 2 ) - 1, - ( y * 2 ) + 1, 0.5 );
+			pointerVector.unproject( camera );
 
-			projector.unprojectVector( pointerVector, camera );
 			ray.set( camPosition, pointerVector.sub( camPosition ).normalize() );
 
 			var intersections = ray.intersectObjects( objects, true );

examples/webgl_decals.html

@@ -36,7 +36,7 @@
 
 		var renderer, scene, helperScene, camera, fov = 45;
 		var mesh, decal;
-		var projector, raycaster;
+		var raycaster;
 		var line;
 
 		var intersection = {
@@ -120,7 +120,6 @@
 
 			loadLeePerrySmith();
 
-			projector = new THREE.Projector();
 			raycaster = new THREE.Raycaster();
 
 			mouseHelper = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 10 ), new THREE.MeshNormalMaterial() );
@@ -174,8 +173,7 @@
 
 				if( !mesh ) return;
 		
-				mouseVector.set( mouse.x, mouse.y, 1 );
-				projector.unprojectVector( mouseVector, camera );
+				mouseVector.set( mouse.x, mouse.y, 1 ).unproject( camera );
 
 				raycaster.set( camera.position, mouseVector.sub( camera.position ).normalize() );
 

examples/webgl_effects_vr.html

@@ -44,7 +44,7 @@
 		<script>
 
 			var container, stats;
-			var camera, scene, projector, raycaster, renderer;
+			var camera, scene, raycaster, renderer;
 			var vrEffect;
 			var vrControls;
 			var fullScreenButton = document.querySelector( '.button' );
@@ -102,7 +102,6 @@
 
 				}
 
-				projector = new THREE.Projector();
 				raycaster = new THREE.Raycaster();
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -179,8 +178,7 @@
 
 				// find intersections
 
-				var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
-				projector.unprojectVector( vector, camera );
+				var vector = new THREE.Vector3( mouse.x, mouse.y, 1 ).unproject( camera );
 
 				raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
 

examples/webgl_geometry_terrain_raycast.html

@@ -256,10 +256,8 @@
 					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
-					var projector = new THREE.Projector();
-					projector.unprojectVector( vector, camera );
+					vector.unproject( camera );
 
 					var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
 

examples/webgl_interactive_buffergeometry.html

@@ -47,7 +47,7 @@
 
 			var camera, scene, renderer;
 
-			var projector, raycaster, mouse, points = [];
+			var raycaster, mouse, points = [];
 
 			var mesh, line;
 
@@ -198,7 +198,6 @@
 
 				//
 
-				projector = new THREE.Projector();
 				raycaster = new THREE.Raycaster();
 
 				mouse = new THREE.Vector2();
@@ -269,8 +268,7 @@
 				mesh.rotation.x = time * 0.15;
 				mesh.rotation.y = time * 0.25;
 
-				var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
-				projector.unprojectVector( vector, camera );
+				var vector = new THREE.Vector3( mouse.x, mouse.y, 1 ).unproject( camera );
 
 				raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
 

examples/webgl_interactive_cubes.html

@@ -22,7 +22,7 @@
 		<script>
 
 			var container, stats;
-			var camera, scene, projector, raycaster, renderer;
+			var camera, scene, raycaster, renderer;
 
 			var mouse = new THREE.Vector2(), INTERSECTED;
 			var radius = 100, theta = 0;
@@ -77,7 +77,6 @@
 
 				}
 
-				projector = new THREE.Projector();
 				raycaster = new THREE.Raycaster();
 
 				renderer = new THREE.WebGLRenderer();
@@ -139,8 +138,7 @@
 
 				// find intersections
 
-				var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
-				projector.unprojectVector( vector, camera );
+				var vector = new THREE.Vector3( mouse.x, mouse.y, 1 ).unproject( camera );
 
 				raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
 

examples/webgl_interactive_cubes_gpu.html

@@ -163,8 +163,6 @@
 				) );
 				scene.add( highlightBox );
 
-				projector = new THREE.Projector();
-
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setClearColor( 0xffffff, 1 );
 				renderer.setSize( window.innerWidth, window.innerHeight );

examples/webgl_interactive_draggablecubes.html

@@ -24,7 +24,7 @@
 		<script>
 
 			var container, stats;
-			var camera, controls, scene, projector, renderer;
+			var camera, controls, scene, renderer;
 			var objects = [], plane;
 
 			var mouse = new THREE.Vector2(),
@@ -104,8 +104,6 @@
 				plane.visible = false;
 				scene.add( plane );
 
-				projector = new THREE.Projector();
-
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -157,12 +155,10 @@
 
 				//
 
-				var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
-				projector.unprojectVector( vector, camera );
+				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() );
 
-
 				if ( SELECTED ) {
 
 					var intersects = raycaster.intersectObject( plane );
@@ -171,7 +167,6 @@
 
 				}
 
-
 				var intersects = raycaster.intersectObjects( objects );
 
 				if ( intersects.length > 0 ) {
@@ -206,8 +201,7 @@
 
 				event.preventDefault();
 
-				var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
-				projector.unprojectVector( vector, camera );
+				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() );
 

examples/webgl_interactive_lines.html

@@ -22,7 +22,7 @@
 		<script>
 
 			var container, stats;
-			var camera, scene, projector, raycaster, renderer, parentTransform, sphereInter;
+			var camera, scene, raycaster, renderer, parentTransform, sphereInter;
 
 			var mouse = new THREE.Vector2();
 			var radius = 100, theta = 0;
@@ -110,11 +110,10 @@
 
 				scene.add( parentTransform );
 
-				projector = new THREE.Projector();
 				raycaster = new THREE.Raycaster();
 				raycaster.linePrecision = 3;
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -173,8 +172,7 @@
 
 				// find intersections
 
-				var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
-				projector.unprojectVector( vector, camera );
+				var vector = new THREE.Vector3( mouse.x, mouse.y, 1 ).unproject( camera );
 
 				raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
 

examples/webgl_interactive_particles.html

@@ -87,7 +87,7 @@
 
 			var PARTICLE_SIZE = 20;
 
-			var projector, raycaster, intersects;
+			var raycaster, intersects;
 			var mouse = { x: 1, y: 1 }, INTERSECTED;
 			var vector = new THREE.Vector3();
 
@@ -158,7 +158,6 @@
 
 				//
 
-				projector = new THREE.Projector();
 				raycaster = new THREE.Raycaster();
 
 				//
@@ -207,9 +206,7 @@
 				particles.rotation.x += 0.0005;
 				particles.rotation.y += 0.001;
 
-				vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
-
-				projector.unprojectVector( vector, camera );
+				vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ).unproject( camera );
 
 				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
 

examples/webgl_interactive_raycasting_pointcloud.html

@@ -42,7 +42,7 @@
 
 			var renderer, scene, camera, stats;
 			var pointclouds;
-			var projector, raycaster, intersects;
+			var raycaster, intersects;
 			var mouse = { x: 1, y: 1 };
 			var vector = new THREE.Vector3();
 			var intersection = null;
@@ -274,7 +274,6 @@
 
 				//
 
-				projector = new THREE.Projector();
 				raycaster = new THREE.Raycaster();
 				raycaster.params.PointCloud.threshold = threshold;
 
@@ -326,9 +325,7 @@
 				camera.applyMatrix( rotateY );
 				camera.updateMatrixWorld( true );
 
-				vector.set( mouse.x, mouse.y, 0.1 );
-
-				projector.unprojectVector( vector, camera );
+				vector.set( mouse.x, mouse.y, 0.1 ).unproject( camera );
 
 				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
 

examples/webgl_octree_raycasting.html

@@ -52,8 +52,6 @@
 		var searchInterval = 0;
 		var useOctree = true;
 		
-		var projector;
-		
 		var mouse = new THREE.Vector2();
 		var intersected;
 
@@ -130,10 +128,6 @@
 				
 			} );
 			
-			// projector for click intersection
-			
-			projector = new THREE.Projector();
-			
 			// camera controls
 			
 			controls = new THREE.TrackballControls( camera );
@@ -327,8 +321,7 @@
 			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 );
-			projector.unprojectVector( vector, camera );
+			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() );
 			var octreeObjects;
@@ -392,4 +385,4 @@
 
 </body>
 
-</html>
+</html>

examples/webgl_postprocessing_dof2.html

@@ -80,7 +80,6 @@ Use WEBGL Depth buffer support?
 				samples: 4
 			};
 
-			var projector;
 			var singleMaterial = false;
 			var vector = new THREE.Vector3();
 			var distance = 100;
@@ -102,16 +101,12 @@ Use WEBGL Depth buffer support?
 				camera.position.y = 150;
 				camera.position.z = 450;
 
-
 				scene = new THREE.Scene();
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
 				renderer.setSize( window.innerWidth, height );
-				container.appendChild( renderer.domElement );
-
-				projector = new THREE.Projector();
-
 				renderer.sortObjects = false;
+				container.appendChild( renderer.domElement );
 
 				material_depth = new THREE.MeshDepthMaterial();
 
@@ -492,15 +487,12 @@ Use WEBGL Depth buffer support?
 				camera.position.z = Math.sin(time) * 500;
 				camera.position.y = Math.sin(time / 1.4) * 100;
 
-
 				camera.lookAt( target );
 
-				vector.set( mouseX / windowHalfX, -mouseY / windowHalfY, 1 );
-
-
-				if (effectController.jsDepthCalculation) {
+				if ( effectController.jsDepthCalculation ) {
 
-					projector.unprojectVector( vector, camera );
+					vector.set( mouseX / windowHalfX, -mouseY / windowHalfY, 1 );
+					vector.unproject( camera );
 
 					var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
 

examples/webgl_postprocessing_godrays.html

@@ -56,8 +56,6 @@
 
 			var treeMesh, sphereMesh;
 
-			var projector = new THREE.Projector();
-
 			var sunPosition = new THREE.Vector3( 0, 1000, -1000 );
 			var screenSpacePosition = new THREE.Vector3();
 
@@ -66,9 +64,6 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-			var margin = 100;
-			var height = window.innerHeight - 2 * margin;
-
 			var postprocessing = { enabled : true };
 
 			var orbitRadius = 200;
@@ -86,7 +81,7 @@
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / height, 1, 3000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.z = 200;
 
 				scene = new THREE.Scene();
@@ -129,17 +124,12 @@
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.setSize( window.innerWidth, height );
+				renderer.setClearColor( bgColor, 1 );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				renderer.sortObjects = false;
-
 				renderer.autoClear = false;
-				renderer.setClearColor( bgColor, 1 );
-
-				renderer.domElement.style.position = 'absolute';
-				renderer.domElement.style.top = margin + "px";
-				renderer.domElement.style.left = "0px";
+				renderer.sortObjects = false;
 
 				//
 
@@ -199,13 +189,13 @@
 
 				postprocessing.scene = new THREE.Scene();
 
-				postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,  height / 2, height / - 2, -10000, 10000 );
+				postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
 				postprocessing.camera.position.z = 100;
 
 				postprocessing.scene.add( postprocessing.camera );
 
 				var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
-				postprocessing.rtTextureColors = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
+				postprocessing.rtTextureColors = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
 
 				// Switching the depth formats to luminance from rgb doesn't seem to work. I didn't
 				// investigate further for now.
@@ -214,12 +204,12 @@
 				// I would have this quarter size and use it as one of the ping-pong render
 				// targets but the aliasing causes some temporal flickering
 
-				postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
+				postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
 
 				// Aggressive downsize god-ray ping-pong render targets to minimize cost
 
 				var w = window.innerWidth / 4.0;
-				var h = height / 4.0;
+				var h = window.innerHeight / 4.0;
 				postprocessing.rtTextureGodRays1 = new THREE.WebGLRenderTarget( w, h, pars );
 				postprocessing.rtTextureGodRays2 = new THREE.WebGLRenderTarget( w, h, pars );
 
@@ -260,7 +250,7 @@
 
 				postprocessing.godrayCombineUniforms.fGodRayIntensity.value = 0.75;
 
-				postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, height ), postprocessing.materialGodraysGenerate );
+				postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialGodraysGenerate );
 				postprocessing.quad.position.z = -9900;
 				postprocessing.scene.add( postprocessing.quad );
 
@@ -292,8 +282,7 @@
 
 					// Find the screenspace position of the sun
 
-					screenSpacePosition.copy( sunPosition );
-					projector.projectVector( screenSpacePosition, camera );
+					screenSpacePosition.copy( sunPosition ).project( camera );
 
 					screenSpacePosition.x = ( screenSpacePosition.x + 1 ) / 2;
 					screenSpacePosition.y = ( screenSpacePosition.y + 1 ) / 2;
@@ -316,16 +305,16 @@
 					// space distance to the sun. Not very efficient, so i make a scissor
 					// rectangle around the suns position to avoid rendering surrounding pixels.
 
-					var sunsqH = 0.74 * height; // 0.74 depends on extent of sun from shader
-					var sunsqW = 0.74 * height; // both depend on height because sun is aspect-corrected
+					var sunsqH = 0.74 * window.innerHeight; // 0.74 depends on extent of sun from shader
+					var sunsqW = 0.74 * window.innerHeight; // both depend on height because sun is aspect-corrected
 
 					screenSpacePosition.x *= window.innerWidth;
-					screenSpacePosition.y *= height;
+					screenSpacePosition.y *= window.innerHeight;
 
 					renderer.setScissor( screenSpacePosition.x - sunsqW / 2, screenSpacePosition.y - sunsqH / 2, sunsqW, sunsqH );
 					renderer.enableScissorTest( true );
 
-					postprocessing.godraysFakeSunUniforms[ "fAspect" ].value = window.innerWidth / height;
+					postprocessing.godraysFakeSunUniforms[ "fAspect" ].value = window.innerWidth / window.innerHeight;
 
 					postprocessing.scene.overrideMaterial = postprocessing.materialGodraysFakeSun;
 					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTextureColors );

src/extras/helpers/CameraHelper.js

@@ -109,7 +109,6 @@ THREE.CameraHelper.prototype.update = function () {
 
 	var vector = new THREE.Vector3();
 	var camera = new THREE.Camera();
-	var projector = new THREE.Projector();
 
 	return function () {
 
@@ -161,8 +160,7 @@ THREE.CameraHelper.prototype.update = function () {
 
 		function setPoint( point, x, y, z ) {
 
-			vector.set( x, y, z );
-			projector.unprojectVector( vector, camera );
+			vector.set( x, y, z ).unproject( camera );
 
 			var points = scope.pointMap[ point ];
 

src/extras/renderers/plugins/ShadowMapPlugin.js

@@ -464,7 +464,7 @@ THREE.ShadowMapPlugin = function () {
 			var p = pointsWorld[ i ];
 
 			p.copy( pointsFrustum[ i ] );
-			THREE.ShadowMapPlugin.__projector.unprojectVector( p, camera );
+			p.unproject( camera );
 
 			p.applyMatrix4( shadowCamera.matrixWorldInverse );
 
@@ -504,5 +504,3 @@ THREE.ShadowMapPlugin = function () {
 	};
 
 };
-
-THREE.ShadowMapPlugin.__projector = new THREE.Projector();