FirstPersonControls.js 7.1 KB

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