atomictom · February 12, 2014 19:58
diff --git a/index.html b/index.html
 <html>
 	<head>
 		<title>My first Three.js app</title>
 		<style>
 			canvas { width: 100%; height: 100% }
 			html,body { overflow: hidden; margin: 0 }
 		</style>
 	</head>
 	<body>
 		<script src="three.js"></script>
 		<script>window.THREE || document.write('<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js">\x3C/script>')</script>
 		<script src="live.js"></script>
 		<script>
 			var scene = new THREE.Scene()
 			var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)

 			var renderer = new THREE.WebGLRenderer()
 			var canvas = renderer.domElement
 			renderer.setSize(window.innerWidth, window.innerHeight)
 			document.body.appendChild(canvas)

 			var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document
 			console.log(havePointerLock)
 			canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock
 			canvas.requestPointerLock()

 			var geometry = new THREE.CubeGeometry(1,1,1)
 			var material = new THREE.MeshBasicMaterial({
 				color: 0x05aa50,
 				wireframe: true,
 				wireframeLinewidth: 3,
 				vertexColors: THREE.FaceColors
 			})

 			for(var i = 0; i < 10; i++){
 				var cube = new THREE.Mesh(geometry, material)
 				cube.position.x = Math.random() * 10 - (Math.random() * 10)
 				cube.position.y = Math.random() * 10 - (Math.random() * 10)
 				cube.position.z = Math.random() * 10 - (Math.random() * 10)
 				scene.add(cube)
 			}

 			var axis_helper = new THREE.AxisHelper(5)
 			scene.add(axis_helper)

 			camera.position.z = 2
 			camera.position.y = 10
 			camera.position.x = 5
 			camera.rotation.x = -.5

 			var render = function () {
 				requestAnimationFrame(render)

 				if(action.forward)
 					camera.position.z -= .05
 				if(action.backward)
 					camera.position.z += .05
 				if(action.up)
 					camera.position.y += .05
 				if(action.down)
 					camera.position.y -= .05
 				if(action.left)
 					camera.position.x -= .05
 				if(action.right)
 					camera.position.x += .05

 				cube.rotation.x += 0.001
 				cube.rotation.y += 0.01
 				cube.rotation.z += 0.005

 				renderer.render(scene, camera)
 			}

 			var action = {
 				forward: false,
 				backward: false,
 				right: false,
 				left: false,
 				up: false,
 				down: false,
 			}
 			document.addEventListener('keyup', function(e){
 				switch(e.keyCode){
 					case KEY.UP:
 						action.forward = false
 						break
 					case KEY.DOWN:
 						action.backward = false
 						break
 					case KEY.LEFT:
 						action.left = false
 						break
 					case KEY.RIGHT:
 						action.right = false
 						break
 					case KEY.SPACE:
 						action.up = false
 						break
 					case KEY.C:
 						action.down = false
 						break
 				}
 			})

 			document.addEventListener('keydown', function(e){
 				switch(e.keyCode){
 					case KEY.UP:
 						action.forward = true
 						break
 					case KEY.DOWN:
 						action.backward = true
 						break
 					case KEY.LEFT:
 						action.left = true
 						break
 					case KEY.RIGHT:
 						action.right = true
 						break
 					case KEY.SPACE:
 						action.up = true
 						break
 					case KEY.C:
 						action.down = true
 						break
 				}
 			})

 			var pointer_locked = false
 			var mouse_clicked = false
 			var start_move = {
 				x: 0,
 				y: 0,
 			}
 			var start_rotation
 			document.addEventListener('mousemove', function(e){
 				if(pointer_locked){}
 				else{
 					if(mouse_clicked){
 						x_dir = Math.cos(camera.rotation.x) * Math.cos(camera.rotation.y)
 						y_dir = Math.sin(camera.rotation.x) * Math.cos(camera.rotation.y)
 						z_dir = Math.sin(camera.rotation.y)
 						var dir = new THREE.Vector3(x_dir, y_dir, z_dir)
 						dir.normalize()

 						var diff_x = e.screenX - start_move.x
 						var diff_y = e.screenY - start_move.y
 						dir.x += (diff_x / 10000)
 						dir.y += (diff_y / 10000)
 						camera.rotation.x += dir.x
 						camera.rotation.y += dir.y
 					}
 				}
 			})
 			document.addEventListener('mouseup', function(e){
 				mouse_clicked = false
 			})
 			document.addEventListener('mousedown', function(e){
 				start_move.x = e.screenX
 				start_move.y = e.screenY
 				start_rotation = camera.rotation
 				mouse_clicked = true
 			})
 			function pointer_lock_callback(e){
 				if(document.pointerLockElement === canvas || document.mozPointerLockElement === canvas || document.webkitPointerLockElement === canvas){
 					pointer_locked = true
 					console.log("All Good!")
 				}else{
 					pointer_locked = false
 					console.log("Not locked...")
 				}
 			}
 			document.addEventListener('pointerlockchange', pointer_lock_callback, false)
 			document.addEventListener('mozpointerlockchange', pointer_lock_callback, false)
 			document.addEventListener('webkitpointerlockchange', pointer_lock_callback, false)

 			document.addEventListener('pointerlockerror', pointer_lock_callback, false)
 			document.addEventListener('mozpointerlockerror', pointer_lock_callback, false)
 			document.addEventListener('webkitpointerlockerror', pointer_lock_callback, false)

 			KEY = {
 				BACKSPACE: 8,
 				TAB:       9,
 				RETURN:   13,
 				ESC:      27,
 				SPACE:    32,
 				PAGEUP:   33,
 				PAGEDOWN: 34,
 				END:      35,
 				HOME:     36,
 				LEFT:     37,
 				UP:       38,
 				RIGHT:    39,
 				DOWN:     40,
 				INSERT:   45,
 				DELETE:   46,
 				ZERO:     48, ONE: 49, TWO: 50, THREE: 51, FOUR: 52, FIVE: 53, SIX: 54, SEVEN: 55, EIGHT: 56, NINE: 57,
 				A:        65, B: 66, C: 67, D: 68, E: 69, F: 70, G: 71, H: 72, I: 73, J: 74, K: 75, L: 76, M: 77,
 				N: 78, O: 79, P: 80, Q: 81, R: 82, S: 83, T: 84, U: 85, V: 86, W: 87, X: 88, Y: 89, Z: 90,
 				TILDA:    192
 			}

 			render()
 		</script>
 	</body>
 </html>
	<html>
	<head>
	<title>My first Three.js app</title>
	<style>
	canvas { width: 100%; height: 100% }
	html,body { overflow: hidden; margin: 0 }
	</style>
	</head>
	<body>
	<script src="three.js"></script>
	<script>window.THREE \|\| document.write('<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js">\x3C/script>')</script>
	<script src="live.js"></script>
	<script>
	var scene = new THREE.Scene()
	var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)

	var renderer = new THREE.WebGLRenderer()
	var canvas = renderer.domElement
	renderer.setSize(window.innerWidth, window.innerHeight)
	document.body.appendChild(canvas)

	var havePointerLock = 'pointerLockElement' in document \|\| 'mozPointerLockElement' in document \|\| 'webkitPointerLockElement' in document
	console.log(havePointerLock)
	canvas.requestPointerLock = canvas.requestPointerLock \|\| canvas.mozRequestPointerLock \|\| canvas.webkitRequestPointerLock
	canvas.requestPointerLock()

	var geometry = new THREE.CubeGeometry(1,1,1)
	var material = new THREE.MeshBasicMaterial({
	color: 0x05aa50,
	wireframe: true,
	wireframeLinewidth: 3,
	vertexColors: THREE.FaceColors
	})

	for(var i = 0; i < 10; i++){
	var cube = new THREE.Mesh(geometry, material)
	cube.position.x = Math.random() * 10 - (Math.random() * 10)
	cube.position.y = Math.random() * 10 - (Math.random() * 10)
	cube.position.z = Math.random() * 10 - (Math.random() * 10)
	scene.add(cube)
	}

	var axis_helper = new THREE.AxisHelper(5)
	scene.add(axis_helper)

	camera.position.z = 2
	camera.position.y = 10
	camera.position.x = 5
	camera.rotation.x = -.5

	var render = function () {
	requestAnimationFrame(render)

	if(action.forward)
	camera.position.z -= .05
	if(action.backward)
	camera.position.z += .05
	if(action.up)
	camera.position.y += .05
	if(action.down)
	camera.position.y -= .05
	if(action.left)
	camera.position.x -= .05
	if(action.right)
	camera.position.x += .05

	cube.rotation.x += 0.001
	cube.rotation.y += 0.01
	cube.rotation.z += 0.005

	renderer.render(scene, camera)
	}

	var action = {
	forward: false,
	backward: false,
	right: false,
	left: false,
	up: false,
	down: false,
	}
	document.addEventListener('keyup', function(e){
	switch(e.keyCode){
	case KEY.UP:
	action.forward = false
	break
	case KEY.DOWN:
	action.backward = false
	break
	case KEY.LEFT:
	action.left = false
	break
	case KEY.RIGHT:
	action.right = false
	break
	case KEY.SPACE:
	action.up = false
	break
	case KEY.C:
	action.down = false
	break
	}
	})

	document.addEventListener('keydown', function(e){
	switch(e.keyCode){
	case KEY.UP:
	action.forward = true
	break
	case KEY.DOWN:
	action.backward = true
	break
	case KEY.LEFT:
	action.left = true
	break
	case KEY.RIGHT:
	action.right = true
	break
	case KEY.SPACE:
	action.up = true
	break
	case KEY.C:
	action.down = true
	break
	}
	})

	var pointer_locked = false
	var mouse_clicked = false
	var start_move = {
	x: 0,
	y: 0,
	}
	var start_rotation
	document.addEventListener('mousemove', function(e){
	if(pointer_locked){}
	else{
	if(mouse_clicked){
	x_dir = Math.cos(camera.rotation.x) * Math.cos(camera.rotation.y)
	y_dir = Math.sin(camera.rotation.x) * Math.cos(camera.rotation.y)
	z_dir = Math.sin(camera.rotation.y)
	var dir = new THREE.Vector3(x_dir, y_dir, z_dir)
	dir.normalize()

	var diff_x = e.screenX - start_move.x
	var diff_y = e.screenY - start_move.y
	dir.x += (diff_x / 10000)
	dir.y += (diff_y / 10000)
	camera.rotation.x += dir.x
	camera.rotation.y += dir.y
	}
	}
	})
	document.addEventListener('mouseup', function(e){
	mouse_clicked = false
	})
	document.addEventListener('mousedown', function(e){
	start_move.x = e.screenX
	start_move.y = e.screenY
	start_rotation = camera.rotation
	mouse_clicked = true
	})
	function pointer_lock_callback(e){
	if(document.pointerLockElement === canvas \|\| document.mozPointerLockElement === canvas \|\| document.webkitPointerLockElement === canvas){
	pointer_locked = true
	console.log("All Good!")
	}else{
	pointer_locked = false
	console.log("Not locked...")
	}
	}
	document.addEventListener('pointerlockchange', pointer_lock_callback, false)
	document.addEventListener('mozpointerlockchange', pointer_lock_callback, false)
	document.addEventListener('webkitpointerlockchange', pointer_lock_callback, false)

	document.addEventListener('pointerlockerror', pointer_lock_callback, false)
	document.addEventListener('mozpointerlockerror', pointer_lock_callback, false)
	document.addEventListener('webkitpointerlockerror', pointer_lock_callback, false)

	KEY = {
	BACKSPACE: 8,
	TAB: 9,
	RETURN: 13,
	ESC: 27,
	SPACE: 32,
	PAGEUP: 33,
	PAGEDOWN: 34,
	END: 35,
	HOME: 36,
	LEFT: 37,
	UP: 38,
	RIGHT: 39,
	DOWN: 40,
	INSERT: 45,
	DELETE: 46,
	ZERO: 48, ONE: 49, TWO: 50, THREE: 51, FOUR: 52, FIVE: 53, SIX: 54, SEVEN: 55, EIGHT: 56, NINE: 57,
	A: 65, B: 66, C: 67, D: 68, E: 69, F: 70, G: 71, H: 72, I: 73, J: 74, K: 75, L: 76, M: 77,
	N: 78, O: 79, P: 80, Q: 81, R: 82, S: 83, T: 84, U: 85, V: 86, W: 87, X: 88, Y: 89, Z: 90,
	TILDA: 192
	}

	render()
	</script>
	</body>
	</html>