EditorControls.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. /**
  2. * @author qiao / https://github.com/qiao
  3. * @author mrdoob / http://mrdoob.com
  4. * @author alteredq / http://alteredqualia.com/
  5. * @author WestLangley / http://github.com/WestLangley
  6. */
  7. THREE.EditorControls = function ( object, domElement ) {
  8. domElement = ( domElement !== undefined ) ? domElement : document;
  9. // API
  10. this.enabled = true;
  11. this.center = new THREE.Vector3();
  12. this.panSpeed = 0.001;
  13. this.zoomSpeed = 0.1;
  14. this.rotationSpeed = 0.005;
  15. // internals
  16. var scope = this;
  17. var vector = new THREE.Vector3();
  18. var delta = new THREE.Vector3();
  19. var box = new THREE.Box3();
  20. var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2 };
  21. var state = STATE.NONE;
  22. var center = this.center;
  23. var normalMatrix = new THREE.Matrix3();
  24. var pointer = new THREE.Vector2();
  25. var pointerOld = new THREE.Vector2();
  26. var spherical = new THREE.Spherical();
  27. var sphere = new THREE.Sphere();
  28. // events
  29. var changeEvent = { type: 'change' };
  30. this.focus = function ( target ) {
  31. var distance;
  32. box.setFromObject( target );
  33. if ( box.isEmpty() === false ) {
  34. box.getCenter( center );
  35. distance = box.getBoundingSphere( sphere ).radius;
  36. } else {
  37. // Focusing on an Group, AmbientLight, etc
  38. center.setFromMatrixPosition( target.matrixWorld );
  39. distance = 0.1;
  40. }
  41. delta.set( 0, 0, 1 );
  42. delta.applyQuaternion( object.quaternion );
  43. delta.multiplyScalar( distance * 4 );
  44. object.position.copy( center ).add( delta );
  45. scope.dispatchEvent( changeEvent );
  46. };
  47. this.pan = function ( delta ) {
  48. var distance = object.position.distanceTo( center );
  49. delta.multiplyScalar( distance * scope.panSpeed );
  50. delta.applyMatrix3( normalMatrix.getNormalMatrix( object.matrix ) );
  51. object.position.add( delta );
  52. center.add( delta );
  53. scope.dispatchEvent( changeEvent );
  54. };
  55. this.zoom = function ( delta ) {
  56. var distance = object.position.distanceTo( center );
  57. delta.multiplyScalar( distance * scope.zoomSpeed );
  58. if ( delta.length() > distance ) return;
  59. delta.applyMatrix3( normalMatrix.getNormalMatrix( object.matrix ) );
  60. object.position.add( delta );
  61. scope.dispatchEvent( changeEvent );
  62. };
  63. this.rotate = function ( delta ) {
  64. vector.copy( object.position ).sub( center );
  65. spherical.setFromVector3( vector );
  66. spherical.theta += delta.x;
  67. spherical.phi += delta.y;
  68. spherical.makeSafe();
  69. vector.setFromSpherical( spherical );
  70. object.position.copy( center ).add( vector );
  71. object.lookAt( center );
  72. scope.dispatchEvent( changeEvent );
  73. };
  74. // mouse
  75. function onMouseDown( event ) {
  76. if ( scope.enabled === false ) return;
  77. if ( event.button === 0 ) {
  78. state = STATE.ROTATE;
  79. } else if ( event.button === 1 ) {
  80. state = STATE.ZOOM;
  81. } else if ( event.button === 2 ) {
  82. state = STATE.PAN;
  83. }
  84. pointerOld.set( event.clientX, event.clientY );
  85. domElement.addEventListener( 'mousemove', onMouseMove, false );
  86. domElement.addEventListener( 'mouseup', onMouseUp, false );
  87. domElement.addEventListener( 'mouseout', onMouseUp, false );
  88. domElement.addEventListener( 'dblclick', onMouseUp, false );
  89. }
  90. function onMouseMove( event ) {
  91. if ( scope.enabled === false ) return;
  92. pointer.set( event.clientX, event.clientY );
  93. var movementX = pointer.x - pointerOld.x;
  94. var movementY = pointer.y - pointerOld.y;
  95. if ( state === STATE.ROTATE ) {
  96. scope.rotate( delta.set( - movementX * scope.rotationSpeed, - movementY * scope.rotationSpeed, 0 ) );
  97. } else if ( state === STATE.ZOOM ) {
  98. scope.zoom( delta.set( 0, 0, movementY ) );
  99. } else if ( state === STATE.PAN ) {
  100. scope.pan( delta.set( - movementX, movementY, 0 ) );
  101. }
  102. pointerOld.set( event.clientX, event.clientY );
  103. }
  104. function onMouseUp( event ) {
  105. domElement.removeEventListener( 'mousemove', onMouseMove, false );
  106. domElement.removeEventListener( 'mouseup', onMouseUp, false );
  107. domElement.removeEventListener( 'mouseout', onMouseUp, false );
  108. domElement.removeEventListener( 'dblclick', onMouseUp, false );
  109. state = STATE.NONE;
  110. }
  111. function onMouseWheel( event ) {
  112. event.preventDefault();
  113. // Normalize deltaY due to https://bugzilla.mozilla.org/show_bug.cgi?id=1392460
  114. scope.zoom( delta.set( 0, 0, event.deltaY > 0 ? 1 : - 1 ) );
  115. }
  116. function contextmenu( event ) {
  117. event.preventDefault();
  118. }
  119. this.dispose = function () {
  120. domElement.removeEventListener( 'contextmenu', contextmenu, false );
  121. domElement.removeEventListener( 'mousedown', onMouseDown, false );
  122. domElement.removeEventListener( 'wheel', onMouseWheel, false );
  123. domElement.removeEventListener( 'mousemove', onMouseMove, false );
  124. domElement.removeEventListener( 'mouseup', onMouseUp, false );
  125. domElement.removeEventListener( 'mouseout', onMouseUp, false );
  126. domElement.removeEventListener( 'dblclick', onMouseUp, false );
  127. domElement.removeEventListener( 'touchstart', touchStart, false );
  128. domElement.removeEventListener( 'touchmove', touchMove, false );
  129. };
  130. domElement.addEventListener( 'contextmenu', contextmenu, false );
  131. domElement.addEventListener( 'mousedown', onMouseDown, false );
  132. domElement.addEventListener( 'wheel', onMouseWheel, false );
  133. // touch
  134. var touches = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
  135. var prevTouches = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
  136. var prevDistance = null;
  137. function touchStart( event ) {
  138. if ( scope.enabled === false ) return;
  139. switch ( event.touches.length ) {
  140. case 1:
  141. touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 );
  142. touches[ 1 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 );
  143. break;
  144. case 2:
  145. touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 );
  146. touches[ 1 ].set( event.touches[ 1 ].pageX, event.touches[ 1 ].pageY, 0 );
  147. prevDistance = touches[ 0 ].distanceTo( touches[ 1 ] );
  148. break;
  149. }
  150. prevTouches[ 0 ].copy( touches[ 0 ] );
  151. prevTouches[ 1 ].copy( touches[ 1 ] );
  152. }
  153. function touchMove( event ) {
  154. if ( scope.enabled === false ) return;
  155. event.preventDefault();
  156. event.stopPropagation();
  157. function getClosest( touch, touches ) {
  158. var closest = touches[ 0 ];
  159. for ( var i in touches ) {
  160. if ( closest.distanceTo( touch ) > touches[ i ].distanceTo( touch ) ) closest = touches[ i ];
  161. }
  162. return closest;
  163. }
  164. switch ( event.touches.length ) {
  165. case 1:
  166. touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 );
  167. touches[ 1 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 );
  168. scope.rotate( touches[ 0 ].sub( getClosest( touches[ 0 ], prevTouches ) ).multiplyScalar( - scope.rotationSpeed ) );
  169. break;
  170. case 2:
  171. touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 );
  172. touches[ 1 ].set( event.touches[ 1 ].pageX, event.touches[ 1 ].pageY, 0 );
  173. var distance = touches[ 0 ].distanceTo( touches[ 1 ] );
  174. scope.zoom( delta.set( 0, 0, prevDistance - distance ) );
  175. prevDistance = distance;
  176. var offset0 = touches[ 0 ].clone().sub( getClosest( touches[ 0 ], prevTouches ) );
  177. var offset1 = touches[ 1 ].clone().sub( getClosest( touches[ 1 ], prevTouches ) );
  178. offset0.x = - offset0.x;
  179. offset1.x = - offset1.x;
  180. scope.pan( offset0.add( offset1 ).multiplyScalar( 0.5 ) );
  181. break;
  182. }
  183. prevTouches[ 0 ].copy( touches[ 0 ] );
  184. prevTouches[ 1 ].copy( touches[ 1 ] );
  185. }
  186. domElement.addEventListener( 'touchstart', touchStart, false );
  187. domElement.addEventListener( 'touchmove', touchMove, false );
  188. };
  189. THREE.EditorControls.prototype = Object.create( THREE.EventDispatcher.prototype );
  190. THREE.EditorControls.prototype.constructor = THREE.EditorControls;