TrackballControls.js 12 KB

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