PointerLockControls: Refactor class structure. (#25665)

examples/jsm/controls/PointerLockControls.js

@@ -19,7 +19,9 @@ class PointerLockControls extends EventDispatcher {
 
 		super();
 
+		this.camera = camera;
 		this.domElement = domElement;
+
 		this.isLocked = false;
 
 		// Set to constrain the pitch of the camera
@@ -29,128 +31,131 @@ class PointerLockControls extends EventDispatcher {
 
 		this.pointerSpeed = 1.0;
 
-		const scope = this;
+		this._onMouseMove = onMouseMove.bind( this );
+		this._onPointerlockChange = onPointerlockChange.bind( this );
+		this._onPointerlockError = onPointerlockError.bind( this );
 
-		function onMouseMove( event ) {
+		this.connect();
 
-			if ( scope.isLocked === false ) return;
+	}
 
-			const movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
-			const movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
+	connect() {
 
-			_euler.setFromQuaternion( camera.quaternion );
+		this.domElement.ownerDocument.addEventListener( 'mousemove', this._onMouseMove );
+		this.domElement.ownerDocument.addEventListener( 'pointerlockchange', this._onPointerlockChange );
+		this.domElement.ownerDocument.addEventListener( 'pointerlockerror', this._onPointerlockError );
 
-			_euler.y -= movementX * 0.002 * scope.pointerSpeed;
-			_euler.x -= movementY * 0.002 * scope.pointerSpeed;
+	}
 
-			_euler.x = Math.max( _PI_2 - scope.maxPolarAngle, Math.min( _PI_2 - scope.minPolarAngle, _euler.x ) );
+	disconnect() {
 
-			camera.quaternion.setFromEuler( _euler );
+		this.domElement.ownerDocument.removeEventListener( 'mousemove', this._onMouseMove );
+		this.domElement.ownerDocument.removeEventListener( 'pointerlockchange', this._onPointerlockChange );
+		this.domElement.ownerDocument.removeEventListener( 'pointerlockerror', this._onPointerlockError );
 
-			scope.dispatchEvent( _changeEvent );
+	}
 
-		}
+	dispose() {
 
-		function onPointerlockChange() {
+		this.disconnect();
 
-			if ( scope.domElement.ownerDocument.pointerLockElement === scope.domElement ) {
+	}
 
-				scope.dispatchEvent( _lockEvent );
+	getObject() { // retaining this method for backward compatibility
 
-				scope.isLocked = true;
+		return this.camera;
 
-			} else {
+	}
 
-				scope.dispatchEvent( _unlockEvent );
+	getDirection( v ) {
 
-				scope.isLocked = false;
+		return v.set( 0, 0, - 1 ).applyQuaternion( this.camera.quaternion );
 
-			}
+	}
 
-		}
+	moveForward( distance ) {
 
-		function onPointerlockError() {
+		// move forward parallel to the xz-plane
+		// assumes camera.up is y-up
 
-			console.error( 'THREE.PointerLockControls: Unable to use Pointer Lock API' );
+		const camera = this.camera;
 
-		}
+		_vector.setFromMatrixColumn( camera.matrix, 0 );
 
-		this.connect = function () {
+		_vector.crossVectors( camera.up, _vector );
 
-			scope.domElement.ownerDocument.addEventListener( 'mousemove', onMouseMove );
-			scope.domElement.ownerDocument.addEventListener( 'pointerlockchange', onPointerlockChange );
-			scope.domElement.ownerDocument.addEventListener( 'pointerlockerror', onPointerlockError );
+		camera.position.addScaledVector( _vector, distance );
 
-		};
+	}
 
-		this.disconnect = function () {
+	moveRight( distance ) {
 
-			scope.domElement.ownerDocument.removeEventListener( 'mousemove', onMouseMove );
-			scope.domElement.ownerDocument.removeEventListener( 'pointerlockchange', onPointerlockChange );
-			scope.domElement.ownerDocument.removeEventListener( 'pointerlockerror', onPointerlockError );
+		const camera = this.camera;
 
-		};
+		_vector.setFromMatrixColumn( camera.matrix, 0 );
 
-		this.dispose = function () {
+		camera.position.addScaledVector( _vector, distance );
 
-			this.disconnect();
+	}
 
-		};
+	lock() {
 
-		this.getObject = function () { // retaining this method for backward compatibility
+		this.domElement.requestPointerLock();
 
-			return camera;
+	}
 
-		};
+	unlock() {
 
-		this.getDirection = function () {
+		this.domElement.ownerDocument.exitPointerLock();
 
-			const direction = new Vector3( 0, 0, - 1 );
+	}
 
-			return function ( v ) {
+}
 
-				return v.copy( direction ).applyQuaternion( camera.quaternion );
+// event listeners
 
-			};
+function onMouseMove( event ) {
 
-		}();
+	if ( this.isLocked === false ) return;
 
-		this.moveForward = function ( distance ) {
+	const movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
+	const movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
 
-			// move forward parallel to the xz-plane
-			// assumes camera.up is y-up
+	const camera = this.camera;
+	_euler.setFromQuaternion( camera.quaternion );
 
-			_vector.setFromMatrixColumn( camera.matrix, 0 );
+	_euler.y -= movementX * 0.002 * this.pointerSpeed;
+	_euler.x -= movementY * 0.002 * this.pointerSpeed;
 
-			_vector.crossVectors( camera.up, _vector );
+	_euler.x = Math.max( _PI_2 - this.maxPolarAngle, Math.min( _PI_2 - this.minPolarAngle, _euler.x ) );
 
-			camera.position.addScaledVector( _vector, distance );
+	camera.quaternion.setFromEuler( _euler );
 
-		};
+	this.dispatchEvent( _changeEvent );
 
-		this.moveRight = function ( distance ) {
+}
 
-			_vector.setFromMatrixColumn( camera.matrix, 0 );
+function onPointerlockChange() {
 
-			camera.position.addScaledVector( _vector, distance );
+	if ( this.domElement.ownerDocument.pointerLockElement === this.domElement ) {
 
-		};
+		this.dispatchEvent( _lockEvent );
 
-		this.lock = function () {
+		this.isLocked = true;
 
-			this.domElement.requestPointerLock();
+	} else {
 
-		};
+		this.dispatchEvent( _unlockEvent );
 
-		this.unlock = function () {
+		this.isLocked = false;
 
-			scope.domElement.ownerDocument.exitPointerLock();
+	}
 
-		};
+}
 
-		this.connect();
+function onPointerlockError() {
 
-	}
+	console.error( 'THREE.PointerLockControls: Unable to use Pointer Lock API' );
 
 }