Examples: Fix movement in misc_controls_pointerlock.html

examples/misc_controls_pointerlock.html

@@ -74,9 +74,7 @@
 
 		<script>
 
-			var camera, scene, renderer;
-			var geometry, material, mesh;
-			var controls;
+			var camera, scene, renderer, controls;
 
 			var objects = [];
 
@@ -106,9 +104,7 @@
 
 						controls.enabled = false;
 
-						blocker.style.display = '-webkit-box';
-						blocker.style.display = '-moz-box';
-						blocker.style.display = 'box';
+						blocker.style.display = 'block';
 
 						instructions.style.display = '';
 
@@ -160,6 +156,7 @@
 
 			var prevTime = performance.now();
 			var velocity = new THREE.Vector3();
+			var direction = new THREE.Vector3();
 
 			function init() {
 
@@ -243,39 +240,39 @@
 
 				// floor
 
-				geometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
-				geometry.rotateX( - Math.PI / 2 );
+				var floorGeometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
+				floorGeometry.rotateX( - Math.PI / 2 );
 
-				for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
+				for ( var i = 0, l = floorGeometry.vertices.length; i < l; i ++ ) {
 
-					var vertex = geometry.vertices[ i ];
+					var vertex = floorGeometry.vertices[ i ];
 					vertex.x += Math.random() * 20 - 10;
 					vertex.y += Math.random() * 2;
 					vertex.z += Math.random() * 20 - 10;
 
 				}
 
-				for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
+				for ( var i = 0, l = floorGeometry.faces.length; i < l; i ++ ) {
 
-					var face = geometry.faces[ i ];
+					var face = floorGeometry.faces[ i ];
 					face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 					face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 					face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
 				}
 
-				material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
+				var floorMaterial = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
 
-				mesh = new THREE.Mesh( geometry, material );
-				scene.add( mesh );
+				var floor = new THREE.Mesh( floorGeometry, floorMaterial );
+				scene.add( floor );
 
 				// objects
 
-				geometry = new THREE.BoxGeometry( 20, 20, 20 );
+				var boxGeometry = new THREE.BoxGeometry( 20, 20, 20 );
 
-				for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
+				for ( var i = 0, l = boxGeometry.faces.length; i < l; i ++ ) {
 
-					var face = geometry.faces[ i ];
+					var face = boxGeometry.faces[ i ];
 					face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 					face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 					face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
@@ -284,17 +281,16 @@
 
 				for ( var i = 0; i < 500; i ++ ) {
 
-					material = new THREE.MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors } );
+					var boxMaterial = new THREE.MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors } );
+					boxMaterial.color.setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
-					var mesh = new THREE.Mesh( geometry, material );
-					mesh.position.x = Math.floor( Math.random() * 20 - 10 ) * 20;
-					mesh.position.y = Math.floor( Math.random() * 20 ) * 20 + 10;
-					mesh.position.z = Math.floor( Math.random() * 20 - 10 ) * 20;
-					scene.add( mesh );
+					var box = new THREE.Mesh( boxGeometry, boxMaterial );
+					box.position.x = Math.floor( Math.random() * 20 - 10 ) * 20;
+					box.position.y = Math.floor( Math.random() * 20 ) * 20 + 10;
+					box.position.z = Math.floor( Math.random() * 20 - 10 ) * 20;
 
-					material.color.setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
-
-					objects.push( mesh );
+					scene.add( box );
+					objects.push( box );
 
 				}
 
@@ -324,13 +320,14 @@
 
 				requestAnimationFrame( animate );
 
-				if ( controlsEnabled ) {
+				if ( controlsEnabled === true ) {
+
 					raycaster.ray.origin.copy( controls.getObject().position );
 					raycaster.ray.origin.y -= 10;
 
 					var intersections = raycaster.intersectObjects( objects );
 
-					var isOnObject = intersections.length > 0;
+					var onObject = intersections.length > 0;
 
 					var time = performance.now();
 					var delta = ( time - prevTime ) / 1000;
@@ -340,16 +337,18 @@
 
 					velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass
 
-					if ( moveForward ) velocity.z -= 400.0 * delta;
-					if ( moveBackward ) velocity.z += 400.0 * delta;
+					direction.z = Number( moveForward ) - Number( moveBackward );
+					direction.x = Number( moveLeft ) - Number( moveRight );
+					direction.normalize(); // this ensures consistent movements in all directions
 
-					if ( moveLeft ) velocity.x -= 400.0 * delta;
-					if ( moveRight ) velocity.x += 400.0 * delta;
+					if ( moveForward || moveBackward ) velocity.z -= direction.z * 400.0 * delta;
+					if ( moveLeft || moveRight ) velocity.x -= direction.x * 400.0 * delta;
 
-					if ( isOnObject === true ) {
-						velocity.y = Math.max( 0, velocity.y );
+					if ( onObject === true ) {
 
+						velocity.y = Math.max( 0, velocity.y );
 						canJump = true;
+
 					}
 
 					controls.getObject().translateX( velocity.x * delta );