OrthographicTrackballControls.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541
  1. /**
  2. * @author Eberhard Graether / http://egraether.com/
  3. * @author Patrick Fuller / http://patrick-fuller.com
  4. */
  5. THREE.OrthographicTrackballControls = function ( object, domElement ) {
  6. var _this = this;
  7. var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM: 4, TOUCH_PAN: 5 };
  8. this.object = object;
  9. this.domElement = ( domElement !== undefined ) ? domElement : document;
  10. // API
  11. this.enabled = true;
  12. this.screen = { width: 0, height: 0, offsetLeft: 0, offsetTop: 0 };
  13. this.radius = ( this.screen.width + this.screen.height ) / 4;
  14. this.rotateSpeed = 1.0;
  15. this.zoomSpeed = 1.2;
  16. this.panSpeed = 0.3;
  17. this.noRotate = false;
  18. this.noZoom = false;
  19. this.noPan = false;
  20. this.staticMoving = false;
  21. this.dynamicDampingFactor = 0.2;
  22. this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
  23. // internals
  24. this.target = new THREE.Vector3();
  25. var lastPosition = new THREE.Vector3();
  26. var _state = STATE.NONE,
  27. _prevState = STATE.NONE,
  28. _eye = new THREE.Vector3(),
  29. _rotateStart = new THREE.Vector3(),
  30. _rotateEnd = new THREE.Vector3(),
  31. _zoomStart = new THREE.Vector2(),
  32. _zoomEnd = new THREE.Vector2(),
  33. _zoomFactor = 1,
  34. _touchZoomDistanceStart = 0,
  35. _touchZoomDistanceEnd = 0,
  36. _panStart = new THREE.Vector2(),
  37. _panEnd = new THREE.Vector2();
  38. // for reset
  39. this.target0 = this.target.clone();
  40. this.position0 = this.object.position.clone();
  41. this.up0 = this.object.up.clone();
  42. this.left0 = this.object.left;
  43. this.right0 = this.object.right;
  44. this.top0 = this.object.top;
  45. this.bottom0 = this.object.bottom;
  46. this.center0 = new THREE.Vector2((this.left0 + this.right0) / 2.0, (this.top0 + this.bottom0) / 2.0);
  47. // events
  48. var changeEvent = { type: 'change' };
  49. // methods
  50. this.handleResize = function () {
  51. this.screen.width = window.innerWidth;
  52. this.screen.height = window.innerHeight;
  53. this.screen.offsetLeft = 0;
  54. this.screen.offsetTop = 0;
  55. this.radius = ( this.screen.width + this.screen.height ) / 4;
  56. this.left0 = this.object.left;
  57. this.right0 = this.object.right;
  58. this.top0 = this.object.top;
  59. this.bottom0 = this.object.bottom;
  60. this.center0 = new THREE.Vector2((this.left0 + this.right0) / 2.0, (this.top0 + this.bottom0) / 2.0);
  61. };
  62. this.handleEvent = function ( event ) {
  63. if ( typeof this[ event.type ] == 'function' ) {
  64. this[ event.type ]( event );
  65. }
  66. };
  67. this.getMouseOnScreen = function ( clientX, clientY ) {
  68. return new THREE.Vector2(
  69. ( clientX - _this.screen.offsetLeft ) / _this.radius * 0.5,
  70. ( clientY - _this.screen.offsetTop ) / _this.radius * 0.5
  71. );
  72. };
  73. this.getMouseProjectionOnBall = function ( clientX, clientY ) {
  74. var mouseOnBall = new THREE.Vector3(
  75. ( clientX - _this.screen.width * 0.5 - _this.screen.offsetLeft ) / _this.radius,
  76. ( _this.screen.height * 0.5 + _this.screen.offsetTop - clientY ) / _this.radius,
  77. 0.0
  78. );
  79. var length = mouseOnBall.length();
  80. if ( length > 1.0 ) {
  81. mouseOnBall.normalize();
  82. } else {
  83. mouseOnBall.z = Math.sqrt( 1.0 - length * length );
  84. }
  85. _eye.copy( _this.object.position ).sub( _this.target );
  86. var projection = _this.object.up.clone().setLength( mouseOnBall.y );
  87. projection.add( _this.object.up.clone().cross( _eye ).setLength( mouseOnBall.x ) );
  88. projection.add( _eye.setLength( mouseOnBall.z ) );
  89. return projection;
  90. };
  91. this.rotateCamera = function () {
  92. var angle = Math.acos( _rotateStart.dot( _rotateEnd ) / _rotateStart.length() / _rotateEnd.length() );
  93. if ( angle ) {
  94. var axis = ( new THREE.Vector3() ).crossVectors( _rotateStart, _rotateEnd ).normalize(),
  95. quaternion = new THREE.Quaternion();
  96. angle *= _this.rotateSpeed;
  97. quaternion.setFromAxisAngle( axis, -angle );
  98. _eye.applyQuaternion( quaternion );
  99. _this.object.up.applyQuaternion( quaternion );
  100. _rotateEnd.applyQuaternion( quaternion );
  101. if ( _this.staticMoving ) {
  102. _rotateStart.copy( _rotateEnd );
  103. } else {
  104. quaternion.setFromAxisAngle( axis, angle * ( _this.dynamicDampingFactor - 1.0 ) );
  105. _rotateStart.applyQuaternion( quaternion );
  106. }
  107. }
  108. };
  109. this.zoomCamera = function () {
  110. if ( _state === STATE.TOUCH_ZOOM ) {
  111. var factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
  112. _touchZoomDistanceStart = _touchZoomDistanceEnd;
  113. _zoomFactor *= factor;
  114. _this.object.left = _zoomFactor * _this.left0 + ( 1 - _zoomFactor ) * _this.center0.x;
  115. _this.object.right = _zoomFactor * _this.right0 + ( 1 - _zoomFactor ) * _this.center0.x;
  116. _this.object.top = _zoomFactor * _this.top0 + ( 1 - _zoomFactor ) * _this.center0.y;
  117. _this.object.bottom = _zoomFactor * _this.bottom0 + ( 1 - _zoomFactor ) * _this.center0.y;
  118. } else {
  119. var factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;
  120. if ( factor !== 1.0 && factor > 0.0 ) {
  121. _zoomFactor *= factor;
  122. _this.object.left = _zoomFactor * _this.left0 + ( 1 - _zoomFactor ) * _this.center0.x;
  123. _this.object.right = _zoomFactor * _this.right0 + ( 1 - _zoomFactor ) * _this.center0.x;
  124. _this.object.top = _zoomFactor * _this.top0 + ( 1 - _zoomFactor ) * _this.center0.y;
  125. _this.object.bottom = _zoomFactor * _this.bottom0 + ( 1 - _zoomFactor ) * _this.center0.y;
  126. if ( _this.staticMoving ) {
  127. _zoomStart.copy( _zoomEnd );
  128. } else {
  129. _zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
  130. }
  131. }
  132. }
  133. };
  134. this.panCamera = function () {
  135. var mouseChange = _panEnd.clone().sub( _panStart );
  136. if ( mouseChange.lengthSq() ) {
  137. mouseChange.multiplyScalar( _eye.length() * _this.panSpeed );
  138. var pan = _eye.clone().cross( _this.object.up ).setLength( mouseChange.x );
  139. pan.add( _this.object.up.clone().setLength( mouseChange.y ) );
  140. _this.object.position.add( pan );
  141. _this.target.add( pan );
  142. if ( _this.staticMoving ) {
  143. _panStart = _panEnd;
  144. } else {
  145. _panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) );
  146. }
  147. }
  148. };
  149. this.update = function () {
  150. _eye.subVectors( _this.object.position, _this.target );
  151. if ( !_this.noRotate ) {
  152. _this.rotateCamera();
  153. }
  154. if ( !_this.noZoom ) {
  155. _this.zoomCamera();
  156. _this.object.updateProjectionMatrix();
  157. }
  158. if ( !_this.noPan ) {
  159. _this.panCamera();
  160. }
  161. _this.object.position.addVectors( _this.target, _eye );
  162. _this.object.lookAt( _this.target );
  163. if ( lastPosition.distanceToSquared( _this.object.position ) > 0 ) {
  164. _this.dispatchEvent( changeEvent );
  165. lastPosition.copy( _this.object.position );
  166. }
  167. };
  168. this.reset = function () {
  169. _state = STATE.NONE;
  170. _prevState = STATE.NONE;
  171. _this.target.copy( _this.target0 );
  172. _this.object.position.copy( _this.position0 );
  173. _this.object.up.copy( _this.up0 );
  174. _eye.subVectors( _this.object.position, _this.target );
  175. _this.object.left = _this.left0;
  176. _this.object.right = _this.right0;
  177. _this.object.top = _this.top0;
  178. _this.object.bottom = _this.bottom0;
  179. _this.object.lookAt( _this.target );
  180. _this.dispatchEvent( changeEvent );
  181. lastPosition.copy( _this.object.position );
  182. };
  183. // listeners
  184. function keydown( event ) {
  185. if ( _this.enabled === false ) return;
  186. window.removeEventListener( 'keydown', keydown );
  187. _prevState = _state;
  188. if ( _state !== STATE.NONE ) {
  189. return;
  190. } else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && !_this.noRotate ) {
  191. _state = STATE.ROTATE;
  192. } else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && !_this.noZoom ) {
  193. _state = STATE.ZOOM;
  194. } else if ( event.keyCode === _this.keys[ STATE.PAN ] && !_this.noPan ) {
  195. _state = STATE.PAN;
  196. }
  197. }
  198. function keyup( event ) {
  199. if ( _this.enabled === false ) return;
  200. _state = _prevState;
  201. window.addEventListener( 'keydown', keydown, false );
  202. }
  203. function mousedown( event ) {
  204. if ( _this.enabled === false ) return;
  205. event.preventDefault();
  206. event.stopPropagation();
  207. if ( _state === STATE.NONE ) {
  208. _state = event.button;
  209. }
  210. if ( _state === STATE.ROTATE && !_this.noRotate ) {
  211. _rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.clientX, event.clientY );
  212. } else if ( _state === STATE.ZOOM && !_this.noZoom ) {
  213. _zoomStart = _zoomEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
  214. } else if ( _state === STATE.PAN && !_this.noPan ) {
  215. _panStart = _panEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
  216. }
  217. document.addEventListener( 'mousemove', mousemove, false );
  218. document.addEventListener( 'mouseup', mouseup, false );
  219. }
  220. function mousemove( event ) {
  221. if ( _this.enabled === false ) return;
  222. event.preventDefault();
  223. event.stopPropagation();
  224. if ( _state === STATE.ROTATE && !_this.noRotate ) {
  225. _rotateEnd = _this.getMouseProjectionOnBall( event.clientX, event.clientY );
  226. } else if ( _state === STATE.ZOOM && !_this.noZoom ) {
  227. _zoomEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
  228. } else if ( _state === STATE.PAN && !_this.noPan ) {
  229. _panEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
  230. }
  231. }
  232. function mouseup( event ) {
  233. if ( _this.enabled === false ) return;
  234. event.preventDefault();
  235. event.stopPropagation();
  236. _state = STATE.NONE;
  237. document.removeEventListener( 'mousemove', mousemove );
  238. document.removeEventListener( 'mouseup', mouseup );
  239. }
  240. function mousewheel( event ) {
  241. if ( _this.enabled === false ) return;
  242. event.preventDefault();
  243. event.stopPropagation();
  244. var delta = 0;
  245. if ( event.wheelDelta ) { // WebKit / Opera / Explorer 9
  246. delta = event.wheelDelta / 40;
  247. } else if ( event.detail ) { // Firefox
  248. delta = - event.detail / 3;
  249. }
  250. _zoomStart.y += delta * 0.01;
  251. }
  252. function touchstart( event ) {
  253. if ( _this.enabled === false ) return;
  254. switch ( event.touches.length ) {
  255. case 1:
  256. _state = STATE.TOUCH_ROTATE;
  257. _rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
  258. break;
  259. case 2:
  260. _state = STATE.TOUCH_ZOOM;
  261. var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
  262. var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
  263. _touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
  264. break;
  265. case 3:
  266. _state = STATE.TOUCH_PAN;
  267. _panStart = _panEnd = _this.getMouseOnScreen( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
  268. break;
  269. default:
  270. _state = STATE.NONE;
  271. }
  272. }
  273. function touchmove( event ) {
  274. if ( _this.enabled === false ) return;
  275. event.preventDefault();
  276. event.stopPropagation();
  277. switch ( event.touches.length ) {
  278. case 1:
  279. _rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
  280. break;
  281. case 2:
  282. var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
  283. var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
  284. _touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy )
  285. break;
  286. case 3:
  287. _panEnd = _this.getMouseOnScreen( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
  288. break;
  289. default:
  290. _state = STATE.NONE;
  291. }
  292. }
  293. function touchend( event ) {
  294. if ( _this.enabled === false ) return;
  295. switch ( event.touches.length ) {
  296. case 1:
  297. _rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
  298. break;
  299. case 2:
  300. _touchZoomDistanceStart = _touchZoomDistanceEnd = 0;
  301. break;
  302. case 3:
  303. _panStart = _panEnd = _this.getMouseOnScreen( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
  304. break;
  305. }
  306. _state = STATE.NONE;
  307. }
  308. this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
  309. this.domElement.addEventListener( 'mousedown', mousedown, false );
  310. this.domElement.addEventListener( 'mousewheel', mousewheel, false );
  311. this.domElement.addEventListener( 'DOMMouseScroll', mousewheel, false ); // firefox
  312. this.domElement.addEventListener( 'touchstart', touchstart, false );
  313. this.domElement.addEventListener( 'touchend', touchend, false );
  314. this.domElement.addEventListener( 'touchmove', touchmove, false );
  315. window.addEventListener( 'keydown', keydown, false );
  316. window.addEventListener( 'keyup', keyup, false );
  317. this.handleResize();
  318. };
  319. THREE.OrthographicTrackballControls.prototype = Object.create( THREE.EventDispatcher.prototype );