PointerLockControls.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. import {
  2. Controls,
  3. Euler,
  4. Vector3
  5. } from 'three';
  6. const _euler = new Euler( 0, 0, 0, 'YXZ' );
  7. const _vector = new Vector3();
  8. /**
  9. * Fires when the user moves the mouse.
  10. *
  11. * @event PointerLockControls#change
  12. * @type {Object}
  13. */
  14. const _changeEvent = { type: 'change' };
  15. /**
  16. * Fires when the pointer lock status is "locked" (in other words: the mouse is captured).
  17. *
  18. * @event PointerLockControls#lock
  19. * @type {Object}
  20. */
  21. const _lockEvent = { type: 'lock' };
  22. /**
  23. * Fires when the pointer lock status is "unlocked" (in other words: the mouse is not captured anymore).
  24. *
  25. * @event PointerLockControls#unlock
  26. * @type {Object}
  27. */
  28. const _unlockEvent = { type: 'unlock' };
  29. const _MOUSE_SENSITIVITY = 0.002;
  30. const _PI_2 = Math.PI / 2;
  31. /**
  32. * 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}.
  33. * `PointerLockControls` is a perfect choice for first person 3D games.
  34. *
  35. * ```js
  36. * const controls = new PointerLockControls( camera, document.body );
  37. *
  38. * // add event listener to show/hide a UI (e.g. the game's menu)
  39. * controls.addEventListener( 'lock', function () {
  40. *
  41. * menu.style.display = 'none';
  42. *
  43. * } );
  44. *
  45. * controls.addEventListener( 'unlock', function () {
  46. *
  47. * menu.style.display = 'block';
  48. *
  49. * } );
  50. * ```
  51. *
  52. * @augments Controls
  53. * @three_import import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
  54. */
  55. class PointerLockControls extends Controls {
  56. /**
  57. * Constructs a new controls instance.
  58. *
  59. * @param {Camera} camera - The camera that is managed by the controls.
  60. * @param {?HTMLDOMElement} domElement - The HTML element used for event listeners.
  61. */
  62. constructor( camera, domElement = null ) {
  63. super( camera, domElement );
  64. /**
  65. * Whether the controls are locked or not.
  66. *
  67. * @type {boolean}
  68. * @readonly
  69. * @default false
  70. */
  71. this.isLocked = false;
  72. /**
  73. * Camera pitch, lower limit. Range is '[0, Math.PI]' in radians.
  74. *
  75. * @type {number}
  76. * @default 0
  77. */
  78. this.minPolarAngle = 0;
  79. /**
  80. * Camera pitch, upper limit. Range is '[0, Math.PI]' in radians.
  81. *
  82. * @type {number}
  83. * @default Math.PI
  84. */
  85. this.maxPolarAngle = Math.PI;
  86. /**
  87. * Multiplier for how much the pointer movement influences the camera rotation.
  88. *
  89. * @type {number}
  90. * @default 1
  91. */
  92. this.pointerSpeed = 1.0;
  93. // event listeners
  94. this._onMouseMove = onMouseMove.bind( this );
  95. this._onPointerlockChange = onPointerlockChange.bind( this );
  96. this._onPointerlockError = onPointerlockError.bind( this );
  97. if ( this.domElement !== null ) {
  98. this.connect( this.domElement );
  99. }
  100. }
  101. connect( element ) {
  102. super.connect( element );
  103. this.domElement.ownerDocument.addEventListener( 'mousemove', this._onMouseMove );
  104. this.domElement.ownerDocument.addEventListener( 'pointerlockchange', this._onPointerlockChange );
  105. this.domElement.ownerDocument.addEventListener( 'pointerlockerror', this._onPointerlockError );
  106. }
  107. disconnect() {
  108. this.domElement.ownerDocument.removeEventListener( 'mousemove', this._onMouseMove );
  109. this.domElement.ownerDocument.removeEventListener( 'pointerlockchange', this._onPointerlockChange );
  110. this.domElement.ownerDocument.removeEventListener( 'pointerlockerror', this._onPointerlockError );
  111. }
  112. dispose() {
  113. this.disconnect();
  114. }
  115. getObject() {
  116. console.warn( 'THREE.PointerLockControls: getObject() has been deprecated. Use controls.object instead.' ); // @deprecated r169
  117. return this.object;
  118. }
  119. /**
  120. * Returns the look direction of the camera.
  121. *
  122. * @param {Vector3} v - The target vector that is used to store the method's result.
  123. * @return {Vector3} The normalized direction vector.
  124. */
  125. getDirection( v ) {
  126. return v.set( 0, 0, - 1 ).applyQuaternion( this.object.quaternion );
  127. }
  128. /**
  129. * Moves the camera forward parallel to the xz-plane. Assumes camera.up is y-up.
  130. *
  131. * @param {number} distance - The signed distance.
  132. */
  133. moveForward( distance ) {
  134. if ( this.enabled === false ) return;
  135. // move forward parallel to the xz-plane
  136. // assumes camera.up is y-up
  137. const camera = this.object;
  138. _vector.setFromMatrixColumn( camera.matrix, 0 );
  139. _vector.crossVectors( camera.up, _vector );
  140. camera.position.addScaledVector( _vector, distance );
  141. }
  142. /**
  143. * Moves the camera sidewards parallel to the xz-plane.
  144. *
  145. * @param {number} distance - The signed distance.
  146. */
  147. moveRight( distance ) {
  148. if ( this.enabled === false ) return;
  149. const camera = this.object;
  150. _vector.setFromMatrixColumn( camera.matrix, 0 );
  151. camera.position.addScaledVector( _vector, distance );
  152. }
  153. /**
  154. * Activates the pointer lock.
  155. *
  156. * @param {boolean} [unadjustedMovement=false] - Disables OS-level adjustment for mouse acceleration, and accesses raw mouse input instead.
  157. * Setting it to true will disable mouse acceleration.
  158. */
  159. lock( unadjustedMovement = false ) {
  160. this.domElement.requestPointerLock( {
  161. unadjustedMovement
  162. } );
  163. }
  164. /**
  165. * Exits the pointer lock.
  166. */
  167. unlock() {
  168. this.domElement.ownerDocument.exitPointerLock();
  169. }
  170. }
  171. // event listeners
  172. function onMouseMove( event ) {
  173. if ( this.enabled === false || this.isLocked === false ) return;
  174. const camera = this.object;
  175. _euler.setFromQuaternion( camera.quaternion );
  176. _euler.y -= event.movementX * _MOUSE_SENSITIVITY * this.pointerSpeed;
  177. _euler.x -= event.movementY * _MOUSE_SENSITIVITY * this.pointerSpeed;
  178. _euler.x = Math.max( _PI_2 - this.maxPolarAngle, Math.min( _PI_2 - this.minPolarAngle, _euler.x ) );
  179. camera.quaternion.setFromEuler( _euler );
  180. this.dispatchEvent( _changeEvent );
  181. }
  182. function onPointerlockChange() {
  183. if ( this.domElement.ownerDocument.pointerLockElement === this.domElement ) {
  184. this.dispatchEvent( _lockEvent );
  185. this.isLocked = true;
  186. } else {
  187. this.dispatchEvent( _unlockEvent );
  188. this.isLocked = false;
  189. }
  190. }
  191. function onPointerlockError() {
  192. console.error( 'THREE.PointerLockControls: Unable to use Pointer Lock API' );
  193. }
  194. export { PointerLockControls };