Switched to FlyControls in LOD example.

examples/webgl_lod.html

@@ -38,6 +38,8 @@
 
 		<script src="../build/three.min.js"></script>
 
+		<script src="js/controls/FlyControls.js"></script>
+
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
@@ -51,12 +53,7 @@
 
 			var geometry, objects;
 
-			var mouseX = 0, mouseY = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+			var controls, clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -69,6 +66,10 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
 				camera.position.z = 1000;
 
+				controls = new THREE.FlyControls( camera );
+				controls.movementSpeed = 1000;
+				controls.rollSpeed = Math.PI / 10;
+
 				scene = new THREE.Scene();
 				scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
 
@@ -134,9 +135,6 @@
 
 			function onWindowResize() {
 
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
@@ -144,13 +142,6 @@
 
 			}
 
-			function onDocumentMouseMove(event) {
-
-				mouseX = ( event.clientX - windowHalfX ) * 10;
-				mouseY = ( event.clientY - windowHalfY ) * 10;
-
-			}
-
 			function animate() {
 
 				requestAnimationFrame( animate );
@@ -160,10 +151,7 @@
 
 			function render() {
 
-				camera.position.x += ( mouseX - camera.position.x ) * .005;
-				camera.position.y += ( - mouseY - camera.position.y ) * .01;
-
-				camera.lookAt( scene.position );
+				controls.update( clock.getDelta() );
 
 				scene.updateMatrixWorld();
 				scene.traverse( function ( object ) {