PointerLockControls: Refactoring

examples/js/controls/PointerLockControls.js

@@ -1,11 +1,15 @@
 /**
  * @author mrdoob / http://mrdoob.com/
+ * @author Mugen87 / https://github.com/Mugen87
  */
 
-THREE.PointerLockControls = function ( camera ) {
+THREE.PointerLockControls = function ( camera, domElement ) {
 
 	var scope = this;
 
+	this.domElement = domElement || document.body;
+	this.enabled = false;
+
 	camera.rotation.set( 0, 0, 0 );
 
 	var pitchObject = new THREE.Object3D();
@@ -17,7 +21,7 @@ THREE.PointerLockControls = function ( camera ) {
 
 	var PI_2 = Math.PI / 2;
 
-	var onMouseMove = function ( event ) {
+	function onMouseMove( event ) {
 
 		if ( scope.enabled === false ) return;
 
@@ -29,17 +33,53 @@ THREE.PointerLockControls = function ( camera ) {
 
 		pitchObject.rotation.x = Math.max( - PI_2, Math.min( PI_2, pitchObject.rotation.x ) );
 
+	}
+
+	function onPointerlockChange() {
+
+		if ( document.pointerLockElement === scope.domElement ) {
+
+			scope.dispatchEvent( { type: 'lock' } );
+
+			scope.enabled = true;
+
+		} else {
+
+			scope.dispatchEvent( { type: 'unlock' } );
+
+			scope.enabled = false;
+
+		}
+
+	}
+
+	function onPointerlockError() {
+
+		console.error( 'THREE.PointerLockControls: Unable to use Pointer Lock API' );
+
+	}
+
+	this.connect = function () {
+
+		document.addEventListener( 'mousemove', onMouseMove, false );
+		document.addEventListener( 'pointerlockchange', onPointerlockChange, false );
+		document.addEventListener( 'pointerlockerror', onPointerlockError, false );
+
 	};
 
-	this.dispose = function () {
+	this.disconnect = function () {
 
 		document.removeEventListener( 'mousemove', onMouseMove, false );
+		document.removeEventListener( 'pointerlockchange', onPointerlockChange, false );
+		document.removeEventListener( 'pointerlockerror', onPointerlockError, false );
 
 	};
 
-	document.addEventListener( 'mousemove', onMouseMove, false );
+	this.dispose = function () {
 
-	this.enabled = false;
+		this.disconnect();
+
+	};
 
 	this.getObject = function () {
 
@@ -66,4 +106,21 @@ THREE.PointerLockControls = function ( camera ) {
 
 	}();
 
+	this.lock = function () {
+
+		this.domElement.requestPointerLock();
+
+	};
+
+	this.unlock = function () {
+
+		document.exitPointerLock();
+
+	};
+
+	this.connect();
+
 };
+
+THREE.PointerLockControls.prototype = Object.create( THREE.EventDispatcher.prototype );
+THREE.PointerLockControls.prototype.constructor = THREE.PointerLockControls;

examples/misc_controls_pointerlock.html

@@ -80,71 +80,6 @@
 
 			var raycaster;
 
-			var blocker = document.getElementById( 'blocker' );
-			var instructions = document.getElementById( 'instructions' );
-
-			// http://www.html5rocks.com/en/tutorials/pointerlock/intro/
-
-			var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
-
-			if ( havePointerLock ) {
-
-				var element = document.body;
-
-				var pointerlockchange = function ( event ) {
-
-					if ( document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element ) {
-
-						controlsEnabled = true;
-						controls.enabled = true;
-
-						blocker.style.display = 'none';
-
-					} else {
-
-						controls.enabled = false;
-
-						blocker.style.display = 'block';
-
-						instructions.style.display = '';
-
-					}
-
-				};
-
-				var pointerlockerror = function ( event ) {
-
-					instructions.style.display = '';
-
-				};
-
-				// Hook pointer lock state change events
-				document.addEventListener( 'pointerlockchange', pointerlockchange, false );
-				document.addEventListener( 'mozpointerlockchange', pointerlockchange, false );
-				document.addEventListener( 'webkitpointerlockchange', pointerlockchange, false );
-
-				document.addEventListener( 'pointerlockerror', pointerlockerror, false );
-				document.addEventListener( 'mozpointerlockerror', pointerlockerror, false );
-				document.addEventListener( 'webkitpointerlockerror', pointerlockerror, false );
-
-				instructions.addEventListener( 'click', function ( event ) {
-
-					instructions.style.display = 'none';
-
-					// Ask the browser to lock the pointer
-					element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;
-					element.requestPointerLock();
-
-				}, false );
-
-			} else {
-
-				instructions.innerHTML = 'Your browser doesn\'t seem to support Pointer Lock API';
-
-			}
-
-			var controlsEnabled = false;
-
 			var moveForward = false;
 			var moveBackward = false;
 			var moveLeft = false;
@@ -173,6 +108,30 @@
 				scene.add( light );
 
 				controls = new THREE.PointerLockControls( camera );
+
+				var blocker = document.getElementById( 'blocker' );
+				var instructions = document.getElementById( 'instructions' );
+
+				instructions.addEventListener( 'click', function ( event ) {
+
+					controls.lock();
+
+				}, false );
+
+				controls.addEventListener( 'lock', function() {
+
+					instructions.style.display = 'none';
+					blocker.style.display = 'none';
+
+				} );
+
+				controls.addEventListener( 'unlock', function() {
+
+					blocker.style.display = 'block';
+					instructions.style.display = '';
+
+				} );
+
 				scene.add( controls.getObject() );
 
 				var onKeyDown = function ( event ) {
@@ -338,7 +297,7 @@
 
 				requestAnimationFrame( animate );
 
-				if ( controlsEnabled === true ) {
+				if ( controls.enabled === true ) {
 
 					raycaster.ray.origin.copy( controls.getObject().position );
 					raycaster.ray.origin.y -= 10;