123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272 |
- import {
- Controls,
- Euler,
- Vector3
- } from 'three';
- const _euler = new Euler( 0, 0, 0, 'YXZ' );
- const _vector = new Vector3();
- /**
- * Fires when the user moves the mouse.
- *
- * @event PointerLockControls#change
- * @type {Object}
- */
- const _changeEvent = { type: 'change' };
- /**
- * Fires when the pointer lock status is "locked" (in other words: the mouse is captured).
- *
- * @event PointerLockControls#lock
- * @type {Object}
- */
- const _lockEvent = { type: 'lock' };
- /**
- * Fires when the pointer lock status is "unlocked" (in other words: the mouse is not captured anymore).
- *
- * @event PointerLockControls#unlock
- * @type {Object}
- */
- const _unlockEvent = { type: 'unlock' };
- const _MOUSE_SENSITIVITY = 0.002;
- const _PI_2 = Math.PI / 2;
- /**
- * The implementation of this class is based on the [Pointer Lock API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API}.
- * `PointerLockControls` is a perfect choice for first person 3D games.
- *
- * ```js
- * const controls = new PointerLockControls( camera, document.body );
- *
- * // add event listener to show/hide a UI (e.g. the game's menu)
- * controls.addEventListener( 'lock', function () {
- *
- * menu.style.display = 'none';
- *
- * } );
- *
- * controls.addEventListener( 'unlock', function () {
- *
- * menu.style.display = 'block';
- *
- * } );
- * ```
- *
- * @augments Controls
- * @three_import import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
- */
- class PointerLockControls extends Controls {
- /**
- * Constructs a new controls instance.
- *
- * @param {Camera} camera - The camera that is managed by the controls.
- * @param {?HTMLDOMElement} domElement - The HTML element used for event listeners.
- */
- constructor( camera, domElement = null ) {
- super( camera, domElement );
- /**
- * Whether the controls are locked or not.
- *
- * @type {boolean}
- * @readonly
- * @default false
- */
- this.isLocked = false;
- /**
- * Camera pitch, lower limit. Range is '[0, Math.PI]' in radians.
- *
- * @type {number}
- * @default 0
- */
- this.minPolarAngle = 0;
- /**
- * Camera pitch, upper limit. Range is '[0, Math.PI]' in radians.
- *
- * @type {number}
- * @default Math.PI
- */
- this.maxPolarAngle = Math.PI;
- /**
- * Multiplier for how much the pointer movement influences the camera rotation.
- *
- * @type {number}
- * @default 1
- */
- this.pointerSpeed = 1.0;
- // event listeners
- this._onMouseMove = onMouseMove.bind( this );
- this._onPointerlockChange = onPointerlockChange.bind( this );
- this._onPointerlockError = onPointerlockError.bind( this );
- if ( this.domElement !== null ) {
- this.connect( this.domElement );
- }
- }
- connect( element ) {
- super.connect( element );
- this.domElement.ownerDocument.addEventListener( 'mousemove', this._onMouseMove );
- this.domElement.ownerDocument.addEventListener( 'pointerlockchange', this._onPointerlockChange );
- this.domElement.ownerDocument.addEventListener( 'pointerlockerror', this._onPointerlockError );
- }
- disconnect() {
- this.domElement.ownerDocument.removeEventListener( 'mousemove', this._onMouseMove );
- this.domElement.ownerDocument.removeEventListener( 'pointerlockchange', this._onPointerlockChange );
- this.domElement.ownerDocument.removeEventListener( 'pointerlockerror', this._onPointerlockError );
- }
- dispose() {
- this.disconnect();
- }
- getObject() {
- console.warn( 'THREE.PointerLockControls: getObject() has been deprecated. Use controls.object instead.' ); // @deprecated r169
- return this.object;
- }
- /**
- * Returns the look direction of the camera.
- *
- * @param {Vector3} v - The target vector that is used to store the method's result.
- * @return {Vector3} The normalized direction vector.
- */
- getDirection( v ) {
- return v.set( 0, 0, - 1 ).applyQuaternion( this.object.quaternion );
- }
- /**
- * Moves the camera forward parallel to the xz-plane. Assumes camera.up is y-up.
- *
- * @param {number} distance - The signed distance.
- */
- moveForward( distance ) {
- if ( this.enabled === false ) return;
- // move forward parallel to the xz-plane
- // assumes camera.up is y-up
- const camera = this.object;
- _vector.setFromMatrixColumn( camera.matrix, 0 );
- _vector.crossVectors( camera.up, _vector );
- camera.position.addScaledVector( _vector, distance );
- }
- /**
- * Moves the camera sidewards parallel to the xz-plane.
- *
- * @param {number} distance - The signed distance.
- */
- moveRight( distance ) {
- if ( this.enabled === false ) return;
- const camera = this.object;
- _vector.setFromMatrixColumn( camera.matrix, 0 );
- camera.position.addScaledVector( _vector, distance );
- }
- /**
- * Activates the pointer lock.
- *
- * @param {boolean} [unadjustedMovement=false] - Disables OS-level adjustment for mouse acceleration, and accesses raw mouse input instead.
- * Setting it to true will disable mouse acceleration.
- */
- lock( unadjustedMovement = false ) {
- this.domElement.requestPointerLock( {
- unadjustedMovement
- } );
- }
- /**
- * Exits the pointer lock.
- */
- unlock() {
- this.domElement.ownerDocument.exitPointerLock();
- }
- }
- // event listeners
- function onMouseMove( event ) {
- if ( this.enabled === false || this.isLocked === false ) return;
- const camera = this.object;
- _euler.setFromQuaternion( camera.quaternion );
- _euler.y -= event.movementX * _MOUSE_SENSITIVITY * this.pointerSpeed;
- _euler.x -= event.movementY * _MOUSE_SENSITIVITY * this.pointerSpeed;
- _euler.x = Math.max( _PI_2 - this.maxPolarAngle, Math.min( _PI_2 - this.minPolarAngle, _euler.x ) );
- camera.quaternion.setFromEuler( _euler );
- this.dispatchEvent( _changeEvent );
- }
- function onPointerlockChange() {
- if ( this.domElement.ownerDocument.pointerLockElement === this.domElement ) {
- this.dispatchEvent( _lockEvent );
- this.isLocked = true;
- } else {
- this.dispatchEvent( _unlockEvent );
- this.isLocked = false;
- }
- }
- function onPointerlockError() {
- console.error( 'THREE.PointerLockControls: Unable to use Pointer Lock API' );
- }
- export { PointerLockControls };
|