Refactored minecraft / terrain / ocean examples to use QuakeCamera.

Terrains finally have proper controls ;)

examples/webgl_geometry_dynamic.html

@@ -63,15 +63,6 @@
 			var worldWidth = 128, worldDepth = 128,
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 
-			var mouseX = 0, mouseY = 0,
-			lat = 0, lon = 0, phy = 0, theta = 0;
-
-			var direction = new THREE.Vector3(),
-			moveForward = false, moveBackward = false, moveLeft = false, moveRight = false;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
 			init();
 			animate();
 
@@ -79,7 +70,9 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new THREE.QuakeCamera( { fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 20000,
+												  movement_speed: 10, look_speed: 0.004, nofly: false, look_vertical: true } );
+
 				camera.target.position.z = - 100;
 
 				scene = new THREE.Scene();
@@ -140,90 +133,9 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
-
-				document.addEventListener( 'keydown', onDocumentKeyDown, false );
-				document.addEventListener( 'keyup', onDocumentKeyUp, false );
-
 			}
 
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = true; break;
-					case 2: moveBackward = true; break;
-
-				}
-
-			}
-
-			function onDocumentMouseUp( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = false; break;
-					case 2: moveBackward = false; break;
-
-				}
-
-			}
-
-			function onDocumentMouseMove(event) {
-
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
-
-			}
-
-			function onDocumentKeyDown( event ) {
-
-				switch( event.keyCode ) {
-
-					case 38: /*up*/
-					case 87: /*W*/ moveForward = true; break;
-
-					case 37: /*left*/
-					case 65: /*A*/ moveLeft = true; break;
-
-					case 40: /*down*/
-					case 83: /*S*/ moveBackward = true; break;
-
-					case 39: /*right*/
-					case 68: /*D*/ moveRight = true; break;
-				}
-
-			}
-
-			function onDocumentKeyUp( event ) {
-
-				switch( event.keyCode ) {
-
-					case 38: /*up*/
-					case 87: /*W*/ moveForward = false; break;
-
-					case 37: /*left*/
-					case 65: /*A*/ moveLeft = false; break;
-
-					case 40: /*down*/
-					case 83: /*S*/ moveBackward = false; break;
-
-					case 39: /*right*/
-					case 68: /*D*/ moveRight = false; break;
-				}
-
-			}
-
 			//
 
 			function animate() {
@@ -239,23 +151,6 @@
 
 				var time = new Date().getTime() * 0.01;
 
-				if ( moveForward ) camera.translateZ( - 10 );
-				if ( moveBackward ) camera.translateZ( 10 );
-				if ( moveLeft )     camera.translateX( - 10 );
-				if ( moveRight )    camera.translateX( 10 );
-
-				lon += mouseX * 0.004;
-				lat -= mouseY * 0.004;
-
-				lat = Math.max( - 85, Math.min( 85, lat ) );
-				phi = ( 90 - lat ) * Math.PI / 180;
-				theta = lon * Math.PI / 180;
-
-				camera.target.position.x = 100 * Math.sin( phi ) * Math.cos( theta ) + camera.position.x;
-				camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
-				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
-
-
 				for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
 
 					geometry.vertices[ i ].position.z = 35 * Math.sin( i/5 + (time + i)/7 );

examples/webgl_geometry_minecraft.html

@@ -67,14 +67,6 @@
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2,
 			data = generateHeight( worldWidth, worldDepth );
 
-			var mouseX = 0, mouseY = 0,
-			lat = 0, lon = 0, phy = 0, theta = 0;
-
-			var direction = new THREE.Vector3(),
-			moveForward = false, moveBackward = false;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
 
 			init();
 			animate();
@@ -82,8 +74,10 @@
 			function init() {
 
 				container = document.getElementById( 'container' );
+				
+				camera = new THREE.QuakeCamera( { fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 20000,
+												   movement_speed: 15, look_speed: 0.005, nofly: false, look_vertical: true } );
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 				camera.target.position.z = - 100;
 
 				scene = new THREE.Scene();
@@ -179,14 +173,6 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
-
-				document.addEventListener( 'keydown', onDocumentKeyDown, false );
-				document.addEventListener( 'keyup', onDocumentKeyUp, false );
-
 			}
 
 
@@ -233,69 +219,6 @@
 
 			}
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = true; break;
-					case 2: moveBackward = true; break;
-
-				}
-
-			}
-
-			function onDocumentMouseUp( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = false; break;
-					case 2: moveBackward = false; break;
-
-				}
-
-			}
-
-			function onDocumentMouseMove(event) {
-
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
-
-			}
-
-			function onDocumentKeyDown( event ) {
-
-				switch( event.keyCode ) {
-
-					case 38: /*↑*/ moveForward = true; break;
-					case 40: /*↓*/ moveBackward = true; break;
-
-					case 87: /*W*/ moveForward = true; break;
-					case 83: /*S*/ moveBackward = true; break;
-
-				}
-
-			}
-
-			function onDocumentKeyUp( event ) {
-
-				switch( event.keyCode ) {
-
-					case 38: /*↑*/ moveForward = false; break;
-					case 40: /*↓*/ moveBackward = false; break;
-
-					case 87: /*W*/ moveForward = false; break;
-					case 83: /*S*/ moveBackward = false; break;
-
-				}
-
-			}
-
 			//
 
 			function animate() {
@@ -309,20 +232,6 @@
 
 			function render() {
 
-				if ( moveForward ) camera.translateZ( - 15 );
-				if ( moveBackward ) camera.translateZ( 15 );
-
-				lon += mouseX * 0.005;
-				lat -= mouseY * 0.005;
-
-				lat = Math.max( - 85, Math.min( 85, lat ) );
-				phi = ( 90 - lat ) * Math.PI / 180;
-				theta = lon * Math.PI / 180;
-
-				camera.target.position.x = 100 * Math.sin( phi ) * Math.cos( theta ) + camera.position.x;
-				camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
-				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_geometry_minecraft_ao.html

@@ -78,15 +78,6 @@
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2,
 			data = generateHeight( worldWidth, worldDepth );
 
-			var mouseX = 0, mouseY = 0,
-			lat = 0, lon = 0, phy = 0, theta = 0;
-
-			var direction = new THREE.Vector3(),
-			moveForward = false, moveBackward = false, moveLeft = false, moveRight = false;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
 			init();
 			animate();
 
@@ -94,10 +85,8 @@
 
 				container = document.getElementById( 'container' );
 
-				if( fogExp2 )
-					camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
-				else
-					camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 7500 );
+				camera = new THREE.QuakeCamera( { fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 20000,
+												  movement_speed: 15, look_speed: 0.005, nofly: false, look_vertical: true } );
 
 				camera.target.position.z = - 100;
 
@@ -105,11 +94,7 @@
 				camera.target.position.y = camera.position.y;
 
 				scene = new THREE.Scene();
-
-				if( fogExp2 )
-					scene.fog = new THREE.FogExp2( 0xffffff, 0.00025 );
-				else
-					scene.fog = new THREE.Fog( 0xffffff, - 1000, 7500 );
+				scene.fog = new THREE.FogExp2( 0xffffff, 0.00025 );
 
 				var debug_texture = false,
 					debug_numbers = false,
@@ -476,14 +461,6 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
-
-				document.addEventListener( 'keydown', onDocumentKeyDown, false );
-				document.addEventListener( 'keyup', onDocumentKeyUp, false );
-
 				document.getElementById( "bao" ).addEventListener( "click",  function() { mat.map = m_ao.map; }, false );
 				document.getElementById( "baot" ).addEventListener( "click", function() { mat.map = m_aot.map; }, false );
 				document.getElementById( "bt" ).addEventListener( "click",   function() { mat.map = m_t.map; }, false );
@@ -811,79 +788,6 @@
 
 			}
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = true; break;
-					case 2: moveBackward = true; break;
-
-				}
-
-			}
-
-			function onDocumentMouseUp( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = false; break;
-					case 2: moveBackward = false; break;
-
-				}
-
-			}
-
-			function onDocumentMouseMove(event) {
-
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
-
-			}
-
-			function onDocumentKeyDown( event ) {
-
-				switch( event.keyCode ) {
-
-					case 38: /*up*/
-					case 87: /*W*/ moveForward = true; break;
-
-					case 37: /*left*/
-					case 65: /*A*/ moveLeft = true; break;
-
-					case 40: /*down*/
-					case 83: /*S*/ moveBackward = true; break;
-
-					case 39: /*right*/
-					case 68: /*D*/ moveRight = true; break;
-				}
-
-			}
-
-			function onDocumentKeyUp( event ) {
-
-				switch( event.keyCode ) {
-
-					case 38: /*up*/
-					case 87: /*W*/ moveForward = false; break;
-
-					case 37: /*left*/
-					case 65: /*A*/ moveLeft = false; break;
-
-					case 40: /*down*/
-					case 83: /*S*/ moveBackward = false; break;
-
-					case 39: /*right*/
-					case 68: /*D*/ moveRight = false; break;
-				}
-
-			}
-
 			//
 
 			function animate() {
@@ -897,22 +801,6 @@
 
 			function render() {
 
-				if ( moveForward )  camera.translateZ( - 15 );
-				if ( moveBackward ) camera.translateZ( 15 );
-				if ( moveLeft )     camera.translateX( - 15 );
-				if ( moveRight )    camera.translateX( 15 );
-
-				lon += mouseX * 0.005;
-				lat -= mouseY * 0.005;
-
-				lat = Math.max( - 85, Math.min( 85, lat ) );
-				phi = ( 90 - lat ) * Math.PI / 180;
-				theta = lon * Math.PI / 180;
-
-				camera.target.position.x = 100 * Math.sin( phi ) * Math.cos( theta ) + camera.position.x;
-				camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
-				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_geometry_terrain.html

@@ -59,14 +59,6 @@
 			var worldWidth = 256, worldDepth = 256,
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 
-			var mouseX = 0, mouseY = 0,
-			lat = 0, lon = 0, phy = 0, theta = 0;
-
-			var direction = new THREE.Vector3(),
-			moveForward = false, moveBackward = false;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
 
 			init();
 			animate();
@@ -75,7 +67,9 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new THREE.QuakeCamera( { fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 20000,
+												  movement_speed: 15, look_speed: 0.004, nofly: false, look_vertical: true } );
+
 				camera.target.position.z = - 100;
 
 				scene = new THREE.Scene();
@@ -112,11 +106,6 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
-
 			}
 
 			function generateHeight( width, height ) {
@@ -214,41 +203,6 @@
 
 			}
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = true; break;
-					case 2: moveBackward = true; break;
-
-				}
-
-			}
-
-			function onDocumentMouseUp( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = false; break;
-					case 2: moveBackward = false; break;
-
-				}
-
-			}
-
-			function onDocumentMouseMove(event) {
-
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
-
-			}
-
 			//
 
 			function animate() {
@@ -262,20 +216,6 @@
 
 			function render() {
 
-				if ( moveForward ) camera.translateZ( - 15 );
-				if ( moveBackward ) camera.translateZ( 15 );
-
-				lon += mouseX * 0.004;
-				lat -= mouseY * 0.004;
-
-				lat = Math.max( - 85, Math.min( 85, lat ) );
-				phi = ( 90 - lat ) * Math.PI / 180;
-				theta = lon * Math.PI / 180;
-
-				camera.target.position.x = 100 * Math.sin( phi ) * Math.cos( theta ) + camera.position.x;
-				camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
-				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_geometry_terrain2.html

@@ -60,15 +60,6 @@
 			var worldWidth = 256, worldDepth = 256,
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 
-			var mouseX = 0, mouseY = 0,
-			lat = 0, lon = 0, phy = 0, theta = 0;
-
-			var direction = new THREE.Vector3(),
-			moveForward = false, moveBackward = false;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
 			init();
 			animate();
 
@@ -76,7 +67,9 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new THREE.QuakeCamera( { fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 20000,
+												  movement_speed: 10, look_speed: 0.004, nofly: false, look_vertical: true } );
+
 				camera.target.position.z = - 100;
 
 				scene = new THREE.Scene();
@@ -113,11 +106,6 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
-
 			}
 
 			/*
@@ -292,41 +280,6 @@
 
 			}
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = true; break;
-					case 2: moveBackward = true; break;
-
-				}
-
-			}
-
-			function onDocumentMouseUp( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = false; break;
-					case 2: moveBackward = false; break;
-
-				}
-
-			}
-
-			function onDocumentMouseMove(event) {
-
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
-
-			}
-
 			//
 
 			function animate() {
@@ -340,20 +293,6 @@
 
 			function render() {
 
-				if ( moveForward ) camera.translateZ( - 10 );
-				if ( moveBackward ) camera.translateZ( 10 );
-
-				lon += mouseX * 0.004;
-				lat -= mouseY * 0.004;
-
-				lat = Math.max( - 85, Math.min( 85, lat ) );
-				phi = ( 90 - lat ) * Math.PI / 180;
-				theta = lon * Math.PI / 180;
-
-				camera.target.position.x = 100 * Math.sin( phi ) * Math.cos( theta ) + camera.position.x;
-				camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
-				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_geometry_terrain_fog.html

@@ -50,8 +50,6 @@
 
 			}
 
-			var fogExp2 = true;
-
 			var container, stats;
 
 			var camera, scene, renderer;
@@ -61,15 +59,6 @@
 			var worldWidth = 256, worldDepth = 256,
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 
-			var mouseX = 0, mouseY = 0,
-			lat = 0, lon = 0, phy = 0, theta = 0;
-
-			var direction = new THREE.Vector3(),
-			moveForward = false, moveBackward = false;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
 			init();
 			animate();
 
@@ -77,18 +66,13 @@
 
 				container = document.getElementById( 'container' );
 
-				if ( fogExp2 )
-					camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
-				else
-					camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.QuakeCamera( { fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 10000,
+												  movement_speed: 5, look_speed: 0.004, nofly: false, look_vertical: true } );
+
 				camera.target.position.z = - 100;
 
 				scene = new THREE.Scene();
-
-				if ( fogExp2 )
-					scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
-				else
-					scene.fog = new THREE.Fog( 0xefd1b5, - 750, 1000 );
+				scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
 
 				data = generateHeight( worldWidth, worldDepth );
 
@@ -122,11 +106,6 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
-
 			}
 
 			function generateHeight( width, height ) {
@@ -191,6 +170,7 @@
 					imageData[ i ] = ( 96 + shade * 128 ) * ( 0.5 + data[ j ] * 0.007 );
 					imageData[ i + 1 ] = ( 32 + shade * 96 ) * ( 0.5 + data[ j ] * 0.007 );
 					imageData[ i + 2 ] = ( shade * 96 ) * ( 0.5 + data[ j ] * 0.007 );
+
 				}
 
 				context.putImageData( image, 0, 0 );
@@ -224,41 +204,6 @@
 
 			}
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = true; break;
-					case 2: moveBackward = true; break;
-
-				}
-
-			}
-
-			function onDocumentMouseUp( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = false; break;
-					case 2: moveBackward = false; break;
-
-				}
-
-			}
-
-			function onDocumentMouseMove(event) {
-
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
-
-			}
-
 			//
 
 			function animate() {
@@ -273,20 +218,6 @@
 
 			function render() {
 
-				if ( moveForward ) camera.translateZ( - 5 );
-				if ( moveBackward ) camera.translateZ( 5 );
-
-				lon += mouseX * 0.004;
-				lat -= mouseY * 0.004;
-
-				lat = Math.max( - 85, Math.min( 85, lat ) );
-				phi = ( 90 - lat ) * Math.PI / 180;
-				theta = lon * Math.PI / 180;
-
-				camera.target.position.x = 100 * Math.sin( phi ) * Math.cos( theta ) + camera.position.x;
-				camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
-				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
-
 				renderer.render( scene, camera );
 
 			}