FlyControls.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. ( function () {
  2. const _changeEvent = {
  3. type: 'change'
  4. };
  5. class FlyControls extends THREE.EventDispatcher {
  6. constructor( object, domElement ) {
  7. super();
  8. this.object = object;
  9. this.domElement = domElement;
  10. // API
  11. this.movementSpeed = 1.0;
  12. this.rollSpeed = 0.005;
  13. this.dragToLook = false;
  14. this.autoForward = false;
  15. // disable default target object behavior
  16. // internals
  17. const scope = this;
  18. const EPS = 0.000001;
  19. const lastQuaternion = new THREE.Quaternion();
  20. const lastPosition = new THREE.Vector3();
  21. this.tmpQuaternion = new THREE.Quaternion();
  22. this.status = 0;
  23. this.moveState = {
  24. up: 0,
  25. down: 0,
  26. left: 0,
  27. right: 0,
  28. forward: 0,
  29. back: 0,
  30. pitchUp: 0,
  31. pitchDown: 0,
  32. yawLeft: 0,
  33. yawRight: 0,
  34. rollLeft: 0,
  35. rollRight: 0
  36. };
  37. this.moveVector = new THREE.Vector3( 0, 0, 0 );
  38. this.rotationVector = new THREE.Vector3( 0, 0, 0 );
  39. this.keydown = function ( event ) {
  40. if ( event.altKey ) {
  41. return;
  42. }
  43. switch ( event.code ) {
  44. case 'ShiftLeft':
  45. case 'ShiftRight':
  46. this.movementSpeedMultiplier = .1;
  47. break;
  48. case 'KeyW':
  49. this.moveState.forward = 1;
  50. break;
  51. case 'KeyS':
  52. this.moveState.back = 1;
  53. break;
  54. case 'KeyA':
  55. this.moveState.left = 1;
  56. break;
  57. case 'KeyD':
  58. this.moveState.right = 1;
  59. break;
  60. case 'KeyR':
  61. this.moveState.up = 1;
  62. break;
  63. case 'KeyF':
  64. this.moveState.down = 1;
  65. break;
  66. case 'ArrowUp':
  67. this.moveState.pitchUp = 1;
  68. break;
  69. case 'ArrowDown':
  70. this.moveState.pitchDown = 1;
  71. break;
  72. case 'ArrowLeft':
  73. this.moveState.yawLeft = 1;
  74. break;
  75. case 'ArrowRight':
  76. this.moveState.yawRight = 1;
  77. break;
  78. case 'KeyQ':
  79. this.moveState.rollLeft = 1;
  80. break;
  81. case 'KeyE':
  82. this.moveState.rollRight = 1;
  83. break;
  84. }
  85. this.updateMovementVector();
  86. this.updateRotationVector();
  87. };
  88. this.keyup = function ( event ) {
  89. switch ( event.code ) {
  90. case 'ShiftLeft':
  91. case 'ShiftRight':
  92. this.movementSpeedMultiplier = 1;
  93. break;
  94. case 'KeyW':
  95. this.moveState.forward = 0;
  96. break;
  97. case 'KeyS':
  98. this.moveState.back = 0;
  99. break;
  100. case 'KeyA':
  101. this.moveState.left = 0;
  102. break;
  103. case 'KeyD':
  104. this.moveState.right = 0;
  105. break;
  106. case 'KeyR':
  107. this.moveState.up = 0;
  108. break;
  109. case 'KeyF':
  110. this.moveState.down = 0;
  111. break;
  112. case 'ArrowUp':
  113. this.moveState.pitchUp = 0;
  114. break;
  115. case 'ArrowDown':
  116. this.moveState.pitchDown = 0;
  117. break;
  118. case 'ArrowLeft':
  119. this.moveState.yawLeft = 0;
  120. break;
  121. case 'ArrowRight':
  122. this.moveState.yawRight = 0;
  123. break;
  124. case 'KeyQ':
  125. this.moveState.rollLeft = 0;
  126. break;
  127. case 'KeyE':
  128. this.moveState.rollRight = 0;
  129. break;
  130. }
  131. this.updateMovementVector();
  132. this.updateRotationVector();
  133. };
  134. this.pointerdown = function ( event ) {
  135. if ( this.dragToLook ) {
  136. this.status ++;
  137. } else {
  138. switch ( event.button ) {
  139. case 0:
  140. this.moveState.forward = 1;
  141. break;
  142. case 2:
  143. this.moveState.back = 1;
  144. break;
  145. }
  146. this.updateMovementVector();
  147. }
  148. };
  149. this.pointermove = function ( event ) {
  150. if ( ! this.dragToLook || this.status > 0 ) {
  151. const container = this.getContainerDimensions();
  152. const halfWidth = container.size[ 0 ] / 2;
  153. const halfHeight = container.size[ 1 ] / 2;
  154. this.moveState.yawLeft = - ( event.pageX - container.offset[ 0 ] - halfWidth ) / halfWidth;
  155. this.moveState.pitchDown = ( event.pageY - container.offset[ 1 ] - halfHeight ) / halfHeight;
  156. this.updateRotationVector();
  157. }
  158. };
  159. this.pointerup = function ( event ) {
  160. if ( this.dragToLook ) {
  161. this.status --;
  162. this.moveState.yawLeft = this.moveState.pitchDown = 0;
  163. } else {
  164. switch ( event.button ) {
  165. case 0:
  166. this.moveState.forward = 0;
  167. break;
  168. case 2:
  169. this.moveState.back = 0;
  170. break;
  171. }
  172. this.updateMovementVector();
  173. }
  174. this.updateRotationVector();
  175. };
  176. this.update = function ( delta ) {
  177. const moveMult = delta * scope.movementSpeed;
  178. const rotMult = delta * scope.rollSpeed;
  179. scope.object.translateX( scope.moveVector.x * moveMult );
  180. scope.object.translateY( scope.moveVector.y * moveMult );
  181. scope.object.translateZ( scope.moveVector.z * moveMult );
  182. scope.tmpQuaternion.set( scope.rotationVector.x * rotMult, scope.rotationVector.y * rotMult, scope.rotationVector.z * rotMult, 1 ).normalize();
  183. scope.object.quaternion.multiply( scope.tmpQuaternion );
  184. if ( lastPosition.distanceToSquared( scope.object.position ) > EPS || 8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {
  185. scope.dispatchEvent( _changeEvent );
  186. lastQuaternion.copy( scope.object.quaternion );
  187. lastPosition.copy( scope.object.position );
  188. }
  189. };
  190. this.updateMovementVector = function () {
  191. const forward = this.moveState.forward || this.autoForward && ! this.moveState.back ? 1 : 0;
  192. this.moveVector.x = - this.moveState.left + this.moveState.right;
  193. this.moveVector.y = - this.moveState.down + this.moveState.up;
  194. this.moveVector.z = - forward + this.moveState.back;
  195. //console.log( 'move:', [ this.moveVector.x, this.moveVector.y, this.moveVector.z ] );
  196. };
  197. this.updateRotationVector = function () {
  198. this.rotationVector.x = - this.moveState.pitchDown + this.moveState.pitchUp;
  199. this.rotationVector.y = - this.moveState.yawRight + this.moveState.yawLeft;
  200. this.rotationVector.z = - this.moveState.rollRight + this.moveState.rollLeft;
  201. //console.log( 'rotate:', [ this.rotationVector.x, this.rotationVector.y, this.rotationVector.z ] );
  202. };
  203. this.getContainerDimensions = function () {
  204. if ( this.domElement != document ) {
  205. return {
  206. size: [ this.domElement.offsetWidth, this.domElement.offsetHeight ],
  207. offset: [ this.domElement.offsetLeft, this.domElement.offsetTop ]
  208. };
  209. } else {
  210. return {
  211. size: [ window.innerWidth, window.innerHeight ],
  212. offset: [ 0, 0 ]
  213. };
  214. }
  215. };
  216. this.dispose = function () {
  217. this.domElement.removeEventListener( 'contextmenu', contextmenu );
  218. this.domElement.removeEventListener( 'pointerdown', _pointerdown );
  219. this.domElement.removeEventListener( 'pointermove', _pointermove );
  220. this.domElement.removeEventListener( 'pointerup', _pointerup );
  221. window.removeEventListener( 'keydown', _keydown );
  222. window.removeEventListener( 'keyup', _keyup );
  223. };
  224. const _pointermove = this.pointermove.bind( this );
  225. const _pointerdown = this.pointerdown.bind( this );
  226. const _pointerup = this.pointerup.bind( this );
  227. const _keydown = this.keydown.bind( this );
  228. const _keyup = this.keyup.bind( this );
  229. this.domElement.addEventListener( 'contextmenu', contextmenu );
  230. this.domElement.addEventListener( 'pointerdown', _pointerdown );
  231. this.domElement.addEventListener( 'pointermove', _pointermove );
  232. this.domElement.addEventListener( 'pointerup', _pointerup );
  233. window.addEventListener( 'keydown', _keydown );
  234. window.addEventListener( 'keyup', _keyup );
  235. this.updateMovementVector();
  236. this.updateRotationVector();
  237. }
  238. }
  239. function contextmenu( event ) {
  240. event.preventDefault();
  241. }
  242. THREE.FlyControls = FlyControls;
  243. } )();