FirstPersonControls.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
  1. import {
  2. MathUtils,
  3. Spherical,
  4. Vector3
  5. } from '../../../build/three.module.js';
  6. const _lookDirection = new Vector3();
  7. const _spherical = new Spherical();
  8. const _target = new Vector3();
  9. class FirstPersonControls {
  10. constructor( object, domElement ) {
  11. if ( domElement === undefined ) {
  12. console.warn( 'THREE.FirstPersonControls: The second parameter "domElement" is now mandatory.' );
  13. domElement = document;
  14. }
  15. this.object = object;
  16. this.domElement = domElement;
  17. // API
  18. this.enabled = true;
  19. this.movementSpeed = 1.0;
  20. this.lookSpeed = 0.005;
  21. this.lookVertical = true;
  22. this.autoForward = false;
  23. this.activeLook = true;
  24. this.heightSpeed = false;
  25. this.heightCoef = 1.0;
  26. this.heightMin = 0.0;
  27. this.heightMax = 1.0;
  28. this.constrainVertical = false;
  29. this.verticalMin = 0;
  30. this.verticalMax = Math.PI;
  31. this.mouseDragOn = false;
  32. // internals
  33. this.autoSpeedFactor = 0.0;
  34. this.mouseX = 0;
  35. this.mouseY = 0;
  36. this.moveForward = false;
  37. this.moveBackward = false;
  38. this.moveLeft = false;
  39. this.moveRight = false;
  40. this.viewHalfX = 0;
  41. this.viewHalfY = 0;
  42. // private variables
  43. let lat = 0;
  44. let lon = 0;
  45. //
  46. this.handleResize = function () {
  47. if ( this.domElement === document ) {
  48. this.viewHalfX = window.innerWidth / 2;
  49. this.viewHalfY = window.innerHeight / 2;
  50. } else {
  51. this.viewHalfX = this.domElement.offsetWidth / 2;
  52. this.viewHalfY = this.domElement.offsetHeight / 2;
  53. }
  54. };
  55. this.onMouseDown = function ( event ) {
  56. if ( this.domElement !== document ) {
  57. this.domElement.focus();
  58. }
  59. if ( this.activeLook ) {
  60. switch ( event.button ) {
  61. case 0: this.moveForward = true; break;
  62. case 2: this.moveBackward = true; break;
  63. }
  64. }
  65. this.mouseDragOn = true;
  66. };
  67. this.onMouseUp = function ( event ) {
  68. if ( this.activeLook ) {
  69. switch ( event.button ) {
  70. case 0: this.moveForward = false; break;
  71. case 2: this.moveBackward = false; break;
  72. }
  73. }
  74. this.mouseDragOn = false;
  75. };
  76. this.onMouseMove = function ( event ) {
  77. if ( this.domElement === document ) {
  78. this.mouseX = event.pageX - this.viewHalfX;
  79. this.mouseY = event.pageY - this.viewHalfY;
  80. } else {
  81. this.mouseX = event.pageX - this.domElement.offsetLeft - this.viewHalfX;
  82. this.mouseY = event.pageY - this.domElement.offsetTop - this.viewHalfY;
  83. }
  84. };
  85. this.onKeyDown = function ( event ) {
  86. switch ( event.code ) {
  87. case 'ArrowUp':
  88. case 'KeyW': this.moveForward = true; break;
  89. case 'ArrowLeft':
  90. case 'KeyA': this.moveLeft = true; break;
  91. case 'ArrowDown':
  92. case 'KeyS': this.moveBackward = true; break;
  93. case 'ArrowRight':
  94. case 'KeyD': this.moveRight = true; break;
  95. case 'KeyR': this.moveUp = true; break;
  96. case 'KeyF': this.moveDown = true; break;
  97. }
  98. };
  99. this.onKeyUp = function ( event ) {
  100. switch ( event.code ) {
  101. case 'ArrowUp':
  102. case 'KeyW': this.moveForward = false; break;
  103. case 'ArrowLeft':
  104. case 'KeyA': this.moveLeft = false; break;
  105. case 'ArrowDown':
  106. case 'KeyS': this.moveBackward = false; break;
  107. case 'ArrowRight':
  108. case 'KeyD': this.moveRight = false; break;
  109. case 'KeyR': this.moveUp = false; break;
  110. case 'KeyF': this.moveDown = false; break;
  111. }
  112. };
  113. this.lookAt = function ( x, y, z ) {
  114. if ( x.isVector3 ) {
  115. _target.copy( x );
  116. } else {
  117. _target.set( x, y, z );
  118. }
  119. this.object.lookAt( _target );
  120. setOrientation( this );
  121. return this;
  122. };
  123. this.update = function () {
  124. const targetPosition = new Vector3();
  125. return function update( delta ) {
  126. if ( this.enabled === false ) return;
  127. if ( this.heightSpeed ) {
  128. const y = MathUtils.clamp( this.object.position.y, this.heightMin, this.heightMax );
  129. const heightDelta = y - this.heightMin;
  130. this.autoSpeedFactor = delta * ( heightDelta * this.heightCoef );
  131. } else {
  132. this.autoSpeedFactor = 0.0;
  133. }
  134. const actualMoveSpeed = delta * this.movementSpeed;
  135. if ( this.moveForward || ( this.autoForward && ! this.moveBackward ) ) this.object.translateZ( - ( actualMoveSpeed + this.autoSpeedFactor ) );
  136. if ( this.moveBackward ) this.object.translateZ( actualMoveSpeed );
  137. if ( this.moveLeft ) this.object.translateX( - actualMoveSpeed );
  138. if ( this.moveRight ) this.object.translateX( actualMoveSpeed );
  139. if ( this.moveUp ) this.object.translateY( actualMoveSpeed );
  140. if ( this.moveDown ) this.object.translateY( - actualMoveSpeed );
  141. let actualLookSpeed = delta * this.lookSpeed;
  142. if ( ! this.activeLook ) {
  143. actualLookSpeed = 0;
  144. }
  145. let verticalLookRatio = 1;
  146. if ( this.constrainVertical ) {
  147. verticalLookRatio = Math.PI / ( this.verticalMax - this.verticalMin );
  148. }
  149. lon -= this.mouseX * actualLookSpeed;
  150. if ( this.lookVertical ) lat -= this.mouseY * actualLookSpeed * verticalLookRatio;
  151. lat = Math.max( - 85, Math.min( 85, lat ) );
  152. let phi = MathUtils.degToRad( 90 - lat );
  153. const theta = MathUtils.degToRad( lon );
  154. if ( this.constrainVertical ) {
  155. phi = MathUtils.mapLinear( phi, 0, Math.PI, this.verticalMin, this.verticalMax );
  156. }
  157. const position = this.object.position;
  158. targetPosition.setFromSphericalCoords( 1, phi, theta ).add( position );
  159. this.object.lookAt( targetPosition );
  160. };
  161. }();
  162. this.dispose = function () {
  163. this.domElement.removeEventListener( 'contextmenu', contextmenu );
  164. this.domElement.removeEventListener( 'mousedown', _onMouseDown );
  165. this.domElement.removeEventListener( 'mousemove', _onMouseMove );
  166. this.domElement.removeEventListener( 'mouseup', _onMouseUp );
  167. window.removeEventListener( 'keydown', _onKeyDown );
  168. window.removeEventListener( 'keyup', _onKeyUp );
  169. };
  170. const _onMouseMove = this.onMouseMove.bind( this );
  171. const _onMouseDown = this.onMouseDown.bind( this );
  172. const _onMouseUp = this.onMouseUp.bind( this );
  173. const _onKeyDown = this.onKeyDown.bind( this );
  174. const _onKeyUp = this.onKeyUp.bind( this );
  175. this.domElement.addEventListener( 'contextmenu', contextmenu );
  176. this.domElement.addEventListener( 'mousemove', _onMouseMove );
  177. this.domElement.addEventListener( 'mousedown', _onMouseDown );
  178. this.domElement.addEventListener( 'mouseup', _onMouseUp );
  179. window.addEventListener( 'keydown', _onKeyDown );
  180. window.addEventListener( 'keyup', _onKeyUp );
  181. function setOrientation( controls ) {
  182. const quaternion = controls.object.quaternion;
  183. _lookDirection.set( 0, 0, - 1 ).applyQuaternion( quaternion );
  184. _spherical.setFromVector3( _lookDirection );
  185. lat = 90 - MathUtils.radToDeg( _spherical.phi );
  186. lon = MathUtils.radToDeg( _spherical.theta );
  187. }
  188. this.handleResize();
  189. setOrientation( this );
  190. }
  191. }
  192. function contextmenu( event ) {
  193. event.preventDefault();
  194. }
  195. export { FirstPersonControls };