FirstPersonControls.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. * @author alteredq / http://alteredqualia.com/
  4. * @author paulirish / http://paulirish.com/
  5. */
  6. THREE.FirstPersonControls = function ( object, domElement ) {
  7. this.object = object;
  8. this.target = new THREE.Vector3( 0, 0, 0 );
  9. this.domElement = ( domElement !== undefined ) ? domElement : document;
  10. this.enabled = true;
  11. this.movementSpeed = 1.0;
  12. this.lookSpeed = 0.005;
  13. this.lookVertical = true;
  14. this.autoForward = false;
  15. this.activeLook = true;
  16. this.heightSpeed = false;
  17. this.heightCoef = 1.0;
  18. this.heightMin = 0.0;
  19. this.heightMax = 1.0;
  20. this.constrainVertical = false;
  21. this.verticalMin = 0;
  22. this.verticalMax = Math.PI;
  23. this.autoSpeedFactor = 0.0;
  24. this.mouseX = 0;
  25. this.mouseY = 0;
  26. this.lat = 0;
  27. this.lon = 0;
  28. this.phi = 0;
  29. this.theta = 0;
  30. this.moveForward = false;
  31. this.moveBackward = false;
  32. this.moveLeft = false;
  33. this.moveRight = false;
  34. this.mouseDragOn = false;
  35. this.viewHalfX = 0;
  36. this.viewHalfY = 0;
  37. if ( this.domElement !== document ) {
  38. this.domElement.setAttribute( 'tabindex', - 1 );
  39. }
  40. //
  41. this.handleResize = function () {
  42. if ( this.domElement === document ) {
  43. this.viewHalfX = window.innerWidth / 2;
  44. this.viewHalfY = window.innerHeight / 2;
  45. } else {
  46. this.viewHalfX = this.domElement.offsetWidth / 2;
  47. this.viewHalfY = this.domElement.offsetHeight / 2;
  48. }
  49. };
  50. this.onMouseDown = function ( event ) {
  51. if ( this.domElement !== document ) {
  52. this.domElement.focus();
  53. }
  54. event.preventDefault();
  55. event.stopPropagation();
  56. if ( this.activeLook ) {
  57. switch ( event.button ) {
  58. case 0: this.moveForward = true; break;
  59. case 2: this.moveBackward = true; break;
  60. }
  61. }
  62. this.mouseDragOn = true;
  63. };
  64. this.onMouseUp = function ( event ) {
  65. event.preventDefault();
  66. event.stopPropagation();
  67. if ( this.activeLook ) {
  68. switch ( event.button ) {
  69. case 0: this.moveForward = false; break;
  70. case 2: this.moveBackward = false; break;
  71. }
  72. }
  73. this.mouseDragOn = false;
  74. };
  75. this.onMouseMove = function ( event ) {
  76. if ( this.domElement === document ) {
  77. this.mouseX = event.pageX - this.viewHalfX;
  78. this.mouseY = event.pageY - this.viewHalfY;
  79. } else {
  80. this.mouseX = event.pageX - this.domElement.offsetLeft - this.viewHalfX;
  81. this.mouseY = event.pageY - this.domElement.offsetTop - this.viewHalfY;
  82. }
  83. };
  84. this.onKeyDown = function ( event ) {
  85. //event.preventDefault();
  86. switch ( event.keyCode ) {
  87. case 38: /*up*/
  88. case 87: /*W*/ this.moveForward = true; break;
  89. case 37: /*left*/
  90. case 65: /*A*/ this.moveLeft = true; break;
  91. case 40: /*down*/
  92. case 83: /*S*/ this.moveBackward = true; break;
  93. case 39: /*right*/
  94. case 68: /*D*/ this.moveRight = true; break;
  95. case 82: /*R*/ this.moveUp = true; break;
  96. case 70: /*F*/ this.moveDown = true; break;
  97. }
  98. };
  99. this.onKeyUp = function ( event ) {
  100. switch ( event.keyCode ) {
  101. case 38: /*up*/
  102. case 87: /*W*/ this.moveForward = false; break;
  103. case 37: /*left*/
  104. case 65: /*A*/ this.moveLeft = false; break;
  105. case 40: /*down*/
  106. case 83: /*S*/ this.moveBackward = false; break;
  107. case 39: /*right*/
  108. case 68: /*D*/ this.moveRight = false; break;
  109. case 82: /*R*/ this.moveUp = false; break;
  110. case 70: /*F*/ this.moveDown = false; break;
  111. }
  112. };
  113. this.update = function( delta ) {
  114. if ( this.enabled === false ) return;
  115. if ( this.heightSpeed ) {
  116. var y = THREE.Math.clamp( this.object.position.y, this.heightMin, this.heightMax );
  117. var heightDelta = y - this.heightMin;
  118. this.autoSpeedFactor = delta * ( heightDelta * this.heightCoef );
  119. } else {
  120. this.autoSpeedFactor = 0.0;
  121. }
  122. var actualMoveSpeed = delta * this.movementSpeed;
  123. if ( this.moveForward || ( this.autoForward && ! this.moveBackward ) ) this.object.translateZ( - ( actualMoveSpeed + this.autoSpeedFactor ) );
  124. if ( this.moveBackward ) this.object.translateZ( actualMoveSpeed );
  125. if ( this.moveLeft ) this.object.translateX( - actualMoveSpeed );
  126. if ( this.moveRight ) this.object.translateX( actualMoveSpeed );
  127. if ( this.moveUp ) this.object.translateY( actualMoveSpeed );
  128. if ( this.moveDown ) this.object.translateY( - actualMoveSpeed );
  129. var actualLookSpeed = delta * this.lookSpeed;
  130. if ( ! this.activeLook ) {
  131. actualLookSpeed = 0;
  132. }
  133. var verticalLookRatio = 1;
  134. if ( this.constrainVertical ) {
  135. verticalLookRatio = Math.PI / ( this.verticalMax - this.verticalMin );
  136. }
  137. this.lon += this.mouseX * actualLookSpeed;
  138. if ( this.lookVertical ) this.lat -= this.mouseY * actualLookSpeed * verticalLookRatio;
  139. this.lat = Math.max( - 85, Math.min( 85, this.lat ) );
  140. this.phi = THREE.Math.degToRad( 90 - this.lat );
  141. this.theta = THREE.Math.degToRad( this.lon );
  142. if ( this.constrainVertical ) {
  143. this.phi = THREE.Math.mapLinear( this.phi, 0, Math.PI, this.verticalMin, this.verticalMax );
  144. }
  145. var targetPosition = this.target,
  146. position = this.object.position;
  147. targetPosition.x = position.x + 100 * Math.sin( this.phi ) * Math.cos( this.theta );
  148. targetPosition.y = position.y + 100 * Math.cos( this.phi );
  149. targetPosition.z = position.z + 100 * Math.sin( this.phi ) * Math.sin( this.theta );
  150. this.object.lookAt( targetPosition );
  151. };
  152. function contextmenu( event ) {
  153. event.preventDefault();
  154. }
  155. this.dispose = function() {
  156. this.domElement.removeEventListener( 'contextmenu', contextmenu, false );
  157. this.domElement.removeEventListener( 'mousedown', _onMouseDown, false );
  158. this.domElement.removeEventListener( 'mousemove', _onMouseMove, false );
  159. this.domElement.removeEventListener( 'mouseup', _onMouseUp, false );
  160. window.removeEventListener( 'keydown', _onKeyDown, false );
  161. window.removeEventListener( 'keyup', _onKeyUp, false );
  162. };
  163. var _onMouseMove = bind( this, this.onMouseMove );
  164. var _onMouseDown = bind( this, this.onMouseDown );
  165. var _onMouseUp = bind( this, this.onMouseUp );
  166. var _onKeyDown = bind( this, this.onKeyDown );
  167. var _onKeyUp = bind( this, this.onKeyUp );
  168. this.domElement.addEventListener( 'contextmenu', contextmenu, false );
  169. this.domElement.addEventListener( 'mousemove', _onMouseMove, false );
  170. this.domElement.addEventListener( 'mousedown', _onMouseDown, false );
  171. this.domElement.addEventListener( 'mouseup', _onMouseUp, false );
  172. window.addEventListener( 'keydown', _onKeyDown, false );
  173. window.addEventListener( 'keyup', _onKeyUp, false );
  174. function bind( scope, fn ) {
  175. return function () {
  176. fn.apply( scope, arguments );
  177. };
  178. }
  179. this.handleResize();
  180. };