OrthographicTrackballControls.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626
  1. /**
  2. * @author Eberhard Graether / http://egraether.com/
  3. * @author Mark Lundin / http://mark-lundin.com
  4. * @author Patrick Fuller / http://patrick-fuller.com
  5. * @author Max Smolens / https://github.com/msmolens
  6. */
  7. THREE.OrthographicTrackballControls = function ( object, domElement ) {
  8. var _this = this;
  9. var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };
  10. this.object = object;
  11. this.domElement = ( domElement !== undefined ) ? domElement : document;
  12. // API
  13. this.enabled = true;
  14. this.screen = { left: 0, top: 0, width: 0, height: 0 };
  15. this.radius = 0;
  16. this.rotateSpeed = 1.0;
  17. this.zoomSpeed = 1.2;
  18. this.noRotate = false;
  19. this.noZoom = false;
  20. this.noPan = false;
  21. this.noRoll = false;
  22. this.staticMoving = false;
  23. this.dynamicDampingFactor = 0.2;
  24. this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
  25. // internals
  26. this.target = new THREE.Vector3();
  27. var EPS = 0.000001;
  28. var _changed = true;
  29. var _state = STATE.NONE,
  30. _prevState = STATE.NONE,
  31. _eye = new THREE.Vector3(),
  32. _rotateStart = new THREE.Vector3(),
  33. _rotateEnd = new THREE.Vector3(),
  34. _zoomStart = new THREE.Vector2(),
  35. _zoomEnd = new THREE.Vector2(),
  36. _touchZoomDistanceStart = 0,
  37. _touchZoomDistanceEnd = 0,
  38. _panStart = new THREE.Vector2(),
  39. _panEnd = new THREE.Vector2();
  40. // for reset
  41. this.target0 = this.target.clone();
  42. this.position0 = this.object.position.clone();
  43. this.up0 = this.object.up.clone();
  44. this.left0 = this.object.left;
  45. this.right0 = this.object.right;
  46. this.top0 = this.object.top;
  47. this.bottom0 = this.object.bottom;
  48. // events
  49. var changeEvent = { type: 'change' };
  50. var startEvent = { type: 'start' };
  51. var endEvent = { type: 'end' };
  52. // methods
  53. this.handleResize = function () {
  54. if ( this.domElement === document ) {
  55. this.screen.left = 0;
  56. this.screen.top = 0;
  57. this.screen.width = window.innerWidth;
  58. this.screen.height = window.innerHeight;
  59. } else {
  60. var box = this.domElement.getBoundingClientRect();
  61. // adjustments come from similar code in the jquery offset() function
  62. var d = this.domElement.ownerDocument.documentElement;
  63. this.screen.left = box.left + window.pageXOffset - d.clientLeft;
  64. this.screen.top = box.top + window.pageYOffset - d.clientTop;
  65. this.screen.width = box.width;
  66. this.screen.height = box.height;
  67. }
  68. this.radius = 0.5 * Math.min( this.screen.width, this.screen.height );
  69. this.left0 = this.object.left;
  70. this.right0 = this.object.right;
  71. this.top0 = this.object.top;
  72. this.bottom0 = this.object.bottom;
  73. };
  74. var getMouseOnScreen = ( function () {
  75. var vector = new THREE.Vector2();
  76. return function getMouseOnScreen( pageX, pageY ) {
  77. vector.set(
  78. ( pageX - _this.screen.left ) / _this.screen.width,
  79. ( pageY - _this.screen.top ) / _this.screen.height
  80. );
  81. return vector;
  82. };
  83. }() );
  84. var getMouseProjectionOnBall = ( function () {
  85. var vector = new THREE.Vector3();
  86. var objectUp = new THREE.Vector3();
  87. var mouseOnBall = new THREE.Vector3();
  88. return function getMouseProjectionOnBall( pageX, pageY ) {
  89. mouseOnBall.set(
  90. ( pageX - _this.screen.width * 0.5 - _this.screen.left ) / _this.radius,
  91. ( _this.screen.height * 0.5 + _this.screen.top - pageY ) / _this.radius,
  92. 0.0
  93. );
  94. var length = mouseOnBall.length();
  95. if ( _this.noRoll ) {
  96. if ( length < Math.SQRT1_2 ) {
  97. mouseOnBall.z = Math.sqrt( 1.0 - length * length );
  98. } else {
  99. mouseOnBall.z = .5 / length;
  100. }
  101. } else if ( length > 1.0 ) {
  102. mouseOnBall.normalize();
  103. } else {
  104. mouseOnBall.z = Math.sqrt( 1.0 - length * length );
  105. }
  106. _eye.copy( _this.object.position ).sub( _this.target );
  107. vector.copy( _this.object.up ).setLength( mouseOnBall.y );
  108. vector.add( objectUp.copy( _this.object.up ).cross( _eye ).setLength( mouseOnBall.x ) );
  109. vector.add( _eye.setLength( mouseOnBall.z ) );
  110. return vector;
  111. };
  112. }() );
  113. this.rotateCamera = ( function () {
  114. var axis = new THREE.Vector3(),
  115. quaternion = new THREE.Quaternion();
  116. return function rotateCamera() {
  117. var angle = Math.acos( _rotateStart.dot( _rotateEnd ) / _rotateStart.length() / _rotateEnd.length() );
  118. if ( angle ) {
  119. axis.crossVectors( _rotateStart, _rotateEnd ).normalize();
  120. angle *= _this.rotateSpeed;
  121. quaternion.setFromAxisAngle( axis, - angle );
  122. _eye.applyQuaternion( quaternion );
  123. _this.object.up.applyQuaternion( quaternion );
  124. _rotateEnd.applyQuaternion( quaternion );
  125. if ( _this.staticMoving ) {
  126. _rotateStart.copy( _rotateEnd );
  127. } else {
  128. quaternion.setFromAxisAngle( axis, angle * ( _this.dynamicDampingFactor - 1.0 ) );
  129. _rotateStart.applyQuaternion( quaternion );
  130. }
  131. _changed = true;
  132. }
  133. };
  134. }() );
  135. this.zoomCamera = function () {
  136. if ( _state === STATE.TOUCH_ZOOM_PAN ) {
  137. var factor = _touchZoomDistanceEnd / _touchZoomDistanceStart;
  138. _touchZoomDistanceStart = _touchZoomDistanceEnd;
  139. _this.object.zoom *= factor;
  140. _changed = true;
  141. } else {
  142. var factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;
  143. if ( Math.abs( factor - 1.0 ) > EPS && factor > 0.0 ) {
  144. _this.object.zoom /= factor;
  145. if ( _this.staticMoving ) {
  146. _zoomStart.copy( _zoomEnd );
  147. } else {
  148. _zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
  149. }
  150. _changed = true;
  151. }
  152. }
  153. };
  154. this.panCamera = ( function () {
  155. var mouseChange = new THREE.Vector2(),
  156. objectUp = new THREE.Vector3(),
  157. pan = new THREE.Vector3();
  158. return function panCamera() {
  159. mouseChange.copy( _panEnd ).sub( _panStart );
  160. if ( mouseChange.lengthSq() ) {
  161. // Scale movement to keep clicked/dragged position under cursor
  162. var scale_x = ( _this.object.right - _this.object.left ) / _this.object.zoom;
  163. var scale_y = ( _this.object.top - _this.object.bottom ) / _this.object.zoom;
  164. mouseChange.x *= scale_x;
  165. mouseChange.y *= scale_y;
  166. pan.copy( _eye ).cross( _this.object.up ).setLength( mouseChange.x );
  167. pan.add( objectUp.copy( _this.object.up ).setLength( mouseChange.y ) );
  168. _this.object.position.add( pan );
  169. _this.target.add( pan );
  170. if ( _this.staticMoving ) {
  171. _panStart.copy( _panEnd );
  172. } else {
  173. _panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) );
  174. }
  175. _changed = true;
  176. }
  177. };
  178. }() );
  179. this.update = function () {
  180. _eye.subVectors( _this.object.position, _this.target );
  181. if ( ! _this.noRotate ) {
  182. _this.rotateCamera();
  183. }
  184. if ( ! _this.noZoom ) {
  185. _this.zoomCamera();
  186. if ( _changed ) {
  187. _this.object.updateProjectionMatrix();
  188. }
  189. }
  190. if ( ! _this.noPan ) {
  191. _this.panCamera();
  192. }
  193. _this.object.position.addVectors( _this.target, _eye );
  194. _this.object.lookAt( _this.target );
  195. if ( _changed ) {
  196. _this.dispatchEvent( changeEvent );
  197. _changed = false;
  198. }
  199. };
  200. this.reset = function () {
  201. _state = STATE.NONE;
  202. _prevState = STATE.NONE;
  203. _this.target.copy( _this.target0 );
  204. _this.object.position.copy( _this.position0 );
  205. _this.object.up.copy( _this.up0 );
  206. _eye.subVectors( _this.object.position, _this.target );
  207. _this.object.left = _this.left0;
  208. _this.object.right = _this.right0;
  209. _this.object.top = _this.top0;
  210. _this.object.bottom = _this.bottom0;
  211. _this.object.lookAt( _this.target );
  212. _this.dispatchEvent( changeEvent );
  213. _changed = false;
  214. };
  215. // listeners
  216. function keydown( event ) {
  217. if ( _this.enabled === false ) return;
  218. window.removeEventListener( 'keydown', keydown );
  219. _prevState = _state;
  220. if ( _state !== STATE.NONE ) {
  221. return;
  222. } else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && ! _this.noRotate ) {
  223. _state = STATE.ROTATE;
  224. } else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && ! _this.noZoom ) {
  225. _state = STATE.ZOOM;
  226. } else if ( event.keyCode === _this.keys[ STATE.PAN ] && ! _this.noPan ) {
  227. _state = STATE.PAN;
  228. }
  229. }
  230. function keyup( event ) {
  231. if ( _this.enabled === false ) return;
  232. _state = _prevState;
  233. window.addEventListener( 'keydown', keydown, false );
  234. }
  235. function mousedown( event ) {
  236. if ( _this.enabled === false ) return;
  237. event.preventDefault();
  238. event.stopPropagation();
  239. if ( _state === STATE.NONE ) {
  240. _state = event.button;
  241. }
  242. if ( _state === STATE.ROTATE && ! _this.noRotate ) {
  243. _rotateStart.copy( getMouseProjectionOnBall( event.pageX, event.pageY ) );
  244. _rotateEnd.copy( _rotateStart );
  245. } else if ( _state === STATE.ZOOM && ! _this.noZoom ) {
  246. _zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
  247. _zoomEnd.copy( _zoomStart );
  248. } else if ( _state === STATE.PAN && ! _this.noPan ) {
  249. _panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
  250. _panEnd.copy( _panStart );
  251. }
  252. document.addEventListener( 'mousemove', mousemove, false );
  253. document.addEventListener( 'mouseup', mouseup, false );
  254. _this.dispatchEvent( startEvent );
  255. }
  256. function mousemove( event ) {
  257. if ( _this.enabled === false ) return;
  258. event.preventDefault();
  259. event.stopPropagation();
  260. if ( _state === STATE.ROTATE && ! _this.noRotate ) {
  261. _rotateEnd.copy( getMouseProjectionOnBall( event.pageX, event.pageY ) );
  262. } else if ( _state === STATE.ZOOM && ! _this.noZoom ) {
  263. _zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
  264. } else if ( _state === STATE.PAN && ! _this.noPan ) {
  265. _panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
  266. }
  267. }
  268. function mouseup( event ) {
  269. if ( _this.enabled === false ) return;
  270. event.preventDefault();
  271. event.stopPropagation();
  272. _state = STATE.NONE;
  273. document.removeEventListener( 'mousemove', mousemove );
  274. document.removeEventListener( 'mouseup', mouseup );
  275. _this.dispatchEvent( endEvent );
  276. }
  277. function mousewheel( event ) {
  278. if ( _this.enabled === false ) return;
  279. event.preventDefault();
  280. event.stopPropagation();
  281. _zoomStart.y += event.deltaY * 0.01;
  282. _this.dispatchEvent( startEvent );
  283. _this.dispatchEvent( endEvent );
  284. }
  285. function touchstart( event ) {
  286. if ( _this.enabled === false ) return;
  287. switch ( event.touches.length ) {
  288. case 1:
  289. _state = STATE.TOUCH_ROTATE;
  290. _rotateStart.copy( getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
  291. _rotateEnd.copy( _rotateStart );
  292. break;
  293. case 2:
  294. _state = STATE.TOUCH_ZOOM_PAN;
  295. var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
  296. var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
  297. _touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
  298. var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
  299. var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
  300. _panStart.copy( getMouseOnScreen( x, y ) );
  301. _panEnd.copy( _panStart );
  302. break;
  303. default:
  304. _state = STATE.NONE;
  305. }
  306. _this.dispatchEvent( startEvent );
  307. }
  308. function touchmove( event ) {
  309. if ( _this.enabled === false ) return;
  310. event.preventDefault();
  311. event.stopPropagation();
  312. switch ( event.touches.length ) {
  313. case 1:
  314. _rotateEnd.copy( getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
  315. break;
  316. case 2:
  317. var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
  318. var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
  319. _touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );
  320. var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
  321. var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
  322. _panEnd.copy( getMouseOnScreen( x, y ) );
  323. break;
  324. default:
  325. _state = STATE.NONE;
  326. }
  327. }
  328. function touchend( event ) {
  329. if ( _this.enabled === false ) return;
  330. switch ( event.touches.length ) {
  331. case 1:
  332. _rotateEnd.copy( getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
  333. _rotateStart.copy( _rotateEnd );
  334. break;
  335. case 2:
  336. _touchZoomDistanceStart = _touchZoomDistanceEnd = 0;
  337. var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
  338. var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
  339. _panEnd.copy( getMouseOnScreen( x, y ) );
  340. _panStart.copy( _panEnd );
  341. break;
  342. }
  343. _state = STATE.NONE;
  344. _this.dispatchEvent( endEvent );
  345. }
  346. function contextmenu( event ) {
  347. event.preventDefault();
  348. }
  349. this.dispose = function () {
  350. this.domElement.removeEventListener( 'contextmenu', contextmenu, false );
  351. this.domElement.removeEventListener( 'mousedown', mousedown, false );
  352. this.domElement.removeEventListener( 'wheel', mousewheel, false );
  353. this.domElement.removeEventListener( 'touchstart', touchstart, false );
  354. this.domElement.removeEventListener( 'touchend', touchend, false );
  355. this.domElement.removeEventListener( 'touchmove', touchmove, false );
  356. document.removeEventListener( 'mousemove', mousemove, false );
  357. document.removeEventListener( 'mouseup', mouseup, false );
  358. window.removeEventListener( 'keydown', keydown, false );
  359. window.removeEventListener( 'keyup', keyup, false );
  360. };
  361. this.domElement.addEventListener( 'contextmenu', contextmenu, false );
  362. this.domElement.addEventListener( 'mousedown', mousedown, false );
  363. this.domElement.addEventListener( 'wheel', mousewheel, false );
  364. this.domElement.addEventListener( 'touchstart', touchstart, false );
  365. this.domElement.addEventListener( 'touchend', touchend, false );
  366. this.domElement.addEventListener( 'touchmove', touchmove, false );
  367. window.addEventListener( 'keydown', keydown, false );
  368. window.addEventListener( 'keyup', keyup, false );
  369. this.handleResize();
  370. // force an update at start
  371. this.update();
  372. };
  373. THREE.OrthographicTrackballControls.prototype = Object.create( THREE.EventDispatcher.prototype );
  374. THREE.OrthographicTrackballControls.prototype.constructor = THREE.OrthographicTrackballControls;