In the process of converting my Flight Simulation Demo to modules, I needed to create a version of PointerLockControls that did not automatically rotate the camera. Instead, I merely wanted it to return the XY differences so that I could decide what to do with them. (I use them to fly the plane and, if the shift key is pressed, to rotate the camera.)
Here is the code for the stripped down version (r136):
import {
EventDispatcher
} from '../../../build/three.module.js';
const _changeEvent = { type: 'change' };
const _lockEvent = { type: 'lock' };
const _unlockEvent = { type: 'unlock' };
const _PI_2 = Math.PI / 2;
class PointerLockControls extends EventDispatcher {
constructor( camera, domElement ) {
super();
if ( domElement === undefined ) {
console.warn( 'THREE.PointerLockControls: The second parameter "domElement" is now mandatory.' );
domElement = document.body;
}
this.domElement = domElement;
this.isLocked = false;
const scope = this;
function onMouseMove( event ) {
if ( scope.isLocked === false ) return;
const movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
const movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
MosXDf = movementX;
MosYDf = movementY;
}
function onPointerlockChange() {
if ( scope.domElement.ownerDocument.pointerLockElement === scope.domElement ) {
scope.dispatchEvent( _lockEvent );
scope.isLocked = true;
} else {
scope.dispatchEvent( _unlockEvent );
scope.isLocked = false;
}
}
function onPointerlockError() {
console.error( 'THREE.PointerLockControls: Unable to use Pointer Lock API' );
}
this.connect = function () {
scope.domElement.ownerDocument.addEventListener( 'mousemove', onMouseMove );
scope.domElement.ownerDocument.addEventListener( 'pointerlockchange', onPointerlockChange );
scope.domElement.ownerDocument.addEventListener( 'pointerlockerror', onPointerlockError );
};
this.disconnect = function () {
scope.domElement.ownerDocument.removeEventListener( 'mousemove', onMouseMove );
scope.domElement.ownerDocument.removeEventListener( 'pointerlockchange', onPointerlockChange );
scope.domElement.ownerDocument.removeEventListener( 'pointerlockerror', onPointerlockError );
};
this.dispose = function () {
this.disconnect();
};
this.lock = function () {
this.domElement.requestPointerLock();
};
this.unlock = function () {
scope.domElement.ownerDocument.exitPointerLock();
};
this.connect();
}
}
export { PointerLockControls };
In the operating program, I had to define MosXDf and MosYDf prior to importing the PointerLockControls module. I used essentially all of the setup from the example (misc_controls_pointerlock.html) verbatim, except that I did not include:
scene.add( controls.getObject() );
Let me know if this all looks okay or if I have overlooked something critical.
You can see the revised module in action here.
NOTE: The reason I needed to use PointerLockControl is that the normal MouseMove routine is designed to operate within the limits of a screen. So, when using the normal routine, it was easy to get jammed up against a side of a screen, such that the controls would no longer work in that direction. In contrast, the PointerLockControls only detect changes in Mouse position