TrackballControls.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729
  1. ( function () {
  2. const _changeEvent = {
  3. type: 'change'
  4. };
  5. const _startEvent = {
  6. type: 'start'
  7. };
  8. const _endEvent = {
  9. type: 'end'
  10. };
  11. class TrackballControls extends THREE.EventDispatcher {
  12. constructor( object, domElement ) {
  13. super();
  14. const scope = this;
  15. const STATE = {
  16. NONE: - 1,
  17. ROTATE: 0,
  18. ZOOM: 1,
  19. PAN: 2,
  20. TOUCH_ROTATE: 3,
  21. TOUCH_ZOOM_PAN: 4
  22. };
  23. this.object = object;
  24. this.domElement = domElement;
  25. this.domElement.style.touchAction = 'none'; // disable touch scroll
  26. // API
  27. this.enabled = true;
  28. this.screen = {
  29. left: 0,
  30. top: 0,
  31. width: 0,
  32. height: 0
  33. };
  34. this.rotateSpeed = 1.0;
  35. this.zoomSpeed = 1.2;
  36. this.panSpeed = 0.3;
  37. this.noRotate = false;
  38. this.noZoom = false;
  39. this.noPan = false;
  40. this.staticMoving = false;
  41. this.dynamicDampingFactor = 0.2;
  42. this.minDistance = 0;
  43. this.maxDistance = Infinity;
  44. this.keys = [ 'KeyA' /*A*/, 'KeyS' /*S*/, 'KeyD' /*D*/];
  45. this.mouseButtons = {
  46. LEFT: THREE.MOUSE.ROTATE,
  47. MIDDLE: THREE.MOUSE.DOLLY,
  48. RIGHT: THREE.MOUSE.PAN
  49. };
  50. // internals
  51. this.target = new THREE.Vector3();
  52. const EPS = 0.000001;
  53. const lastPosition = new THREE.Vector3();
  54. let lastZoom = 1;
  55. let _state = STATE.NONE,
  56. _keyState = STATE.NONE,
  57. _touchZoomDistanceStart = 0,
  58. _touchZoomDistanceEnd = 0,
  59. _lastAngle = 0;
  60. const _eye = new THREE.Vector3(),
  61. _movePrev = new THREE.Vector2(),
  62. _moveCurr = new THREE.Vector2(),
  63. _lastAxis = new THREE.Vector3(),
  64. _zoomStart = new THREE.Vector2(),
  65. _zoomEnd = new THREE.Vector2(),
  66. _panStart = new THREE.Vector2(),
  67. _panEnd = new THREE.Vector2(),
  68. _pointers = [],
  69. _pointerPositions = {};
  70. // for reset
  71. this.target0 = this.target.clone();
  72. this.position0 = this.object.position.clone();
  73. this.up0 = this.object.up.clone();
  74. this.zoom0 = this.object.zoom;
  75. // methods
  76. this.handleResize = function () {
  77. const box = scope.domElement.getBoundingClientRect();
  78. // adjustments come from similar code in the jquery offset() function
  79. const d = scope.domElement.ownerDocument.documentElement;
  80. scope.screen.left = box.left + window.pageXOffset - d.clientLeft;
  81. scope.screen.top = box.top + window.pageYOffset - d.clientTop;
  82. scope.screen.width = box.width;
  83. scope.screen.height = box.height;
  84. };
  85. const getMouseOnScreen = function () {
  86. const vector = new THREE.Vector2();
  87. return function getMouseOnScreen( pageX, pageY ) {
  88. vector.set( ( pageX - scope.screen.left ) / scope.screen.width, ( pageY - scope.screen.top ) / scope.screen.height );
  89. return vector;
  90. };
  91. }();
  92. const getMouseOnCircle = function () {
  93. const vector = new THREE.Vector2();
  94. return function getMouseOnCircle( pageX, pageY ) {
  95. vector.set( ( pageX - scope.screen.width * 0.5 - scope.screen.left ) / ( scope.screen.width * 0.5 ), ( scope.screen.height + 2 * ( scope.screen.top - pageY ) ) / scope.screen.width // screen.width intentional
  96. );
  97. return vector;
  98. };
  99. }();
  100. this.rotateCamera = function () {
  101. const axis = new THREE.Vector3(),
  102. quaternion = new THREE.Quaternion(),
  103. eyeDirection = new THREE.Vector3(),
  104. objectUpDirection = new THREE.Vector3(),
  105. objectSidewaysDirection = new THREE.Vector3(),
  106. moveDirection = new THREE.Vector3();
  107. return function rotateCamera() {
  108. moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 );
  109. let angle = moveDirection.length();
  110. if ( angle ) {
  111. _eye.copy( scope.object.position ).sub( scope.target );
  112. eyeDirection.copy( _eye ).normalize();
  113. objectUpDirection.copy( scope.object.up ).normalize();
  114. objectSidewaysDirection.crossVectors( objectUpDirection, eyeDirection ).normalize();
  115. objectUpDirection.setLength( _moveCurr.y - _movePrev.y );
  116. objectSidewaysDirection.setLength( _moveCurr.x - _movePrev.x );
  117. moveDirection.copy( objectUpDirection.add( objectSidewaysDirection ) );
  118. axis.crossVectors( moveDirection, _eye ).normalize();
  119. angle *= scope.rotateSpeed;
  120. quaternion.setFromAxisAngle( axis, angle );
  121. _eye.applyQuaternion( quaternion );
  122. scope.object.up.applyQuaternion( quaternion );
  123. _lastAxis.copy( axis );
  124. _lastAngle = angle;
  125. } else if ( ! scope.staticMoving && _lastAngle ) {
  126. _lastAngle *= Math.sqrt( 1.0 - scope.dynamicDampingFactor );
  127. _eye.copy( scope.object.position ).sub( scope.target );
  128. quaternion.setFromAxisAngle( _lastAxis, _lastAngle );
  129. _eye.applyQuaternion( quaternion );
  130. scope.object.up.applyQuaternion( quaternion );
  131. }
  132. _movePrev.copy( _moveCurr );
  133. };
  134. }();
  135. this.zoomCamera = function () {
  136. let factor;
  137. if ( _state === STATE.TOUCH_ZOOM_PAN ) {
  138. factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
  139. _touchZoomDistanceStart = _touchZoomDistanceEnd;
  140. if ( scope.object.isPerspectiveCamera ) {
  141. _eye.multiplyScalar( factor );
  142. } else if ( scope.object.isOrthographicCamera ) {
  143. scope.object.zoom /= factor;
  144. scope.object.updateProjectionMatrix();
  145. } else {
  146. console.warn( 'THREE.TrackballControls: Unsupported camera type' );
  147. }
  148. } else {
  149. factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * scope.zoomSpeed;
  150. if ( factor !== 1.0 && factor > 0.0 ) {
  151. if ( scope.object.isPerspectiveCamera ) {
  152. _eye.multiplyScalar( factor );
  153. } else if ( scope.object.isOrthographicCamera ) {
  154. scope.object.zoom /= factor;
  155. scope.object.updateProjectionMatrix();
  156. } else {
  157. console.warn( 'THREE.TrackballControls: Unsupported camera type' );
  158. }
  159. }
  160. if ( scope.staticMoving ) {
  161. _zoomStart.copy( _zoomEnd );
  162. } else {
  163. _zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
  164. }
  165. }
  166. };
  167. this.panCamera = function () {
  168. const mouseChange = new THREE.Vector2(),
  169. objectUp = new THREE.Vector3(),
  170. pan = new THREE.Vector3();
  171. return function panCamera() {
  172. mouseChange.copy( _panEnd ).sub( _panStart );
  173. if ( mouseChange.lengthSq() ) {
  174. if ( scope.object.isOrthographicCamera ) {
  175. const scale_x = ( scope.object.right - scope.object.left ) / scope.object.zoom / scope.domElement.clientWidth;
  176. const scale_y = ( scope.object.top - scope.object.bottom ) / scope.object.zoom / scope.domElement.clientWidth;
  177. mouseChange.x *= scale_x;
  178. mouseChange.y *= scale_y;
  179. }
  180. mouseChange.multiplyScalar( _eye.length() * scope.panSpeed );
  181. pan.copy( _eye ).cross( scope.object.up ).setLength( mouseChange.x );
  182. pan.add( objectUp.copy( scope.object.up ).setLength( mouseChange.y ) );
  183. scope.object.position.add( pan );
  184. scope.target.add( pan );
  185. if ( scope.staticMoving ) {
  186. _panStart.copy( _panEnd );
  187. } else {
  188. _panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( scope.dynamicDampingFactor ) );
  189. }
  190. }
  191. };
  192. }();
  193. this.checkDistances = function () {
  194. if ( ! scope.noZoom || ! scope.noPan ) {
  195. if ( _eye.lengthSq() > scope.maxDistance * scope.maxDistance ) {
  196. scope.object.position.addVectors( scope.target, _eye.setLength( scope.maxDistance ) );
  197. _zoomStart.copy( _zoomEnd );
  198. }
  199. if ( _eye.lengthSq() < scope.minDistance * scope.minDistance ) {
  200. scope.object.position.addVectors( scope.target, _eye.setLength( scope.minDistance ) );
  201. _zoomStart.copy( _zoomEnd );
  202. }
  203. }
  204. };
  205. this.update = function () {
  206. _eye.subVectors( scope.object.position, scope.target );
  207. if ( ! scope.noRotate ) {
  208. scope.rotateCamera();
  209. }
  210. if ( ! scope.noZoom ) {
  211. scope.zoomCamera();
  212. }
  213. if ( ! scope.noPan ) {
  214. scope.panCamera();
  215. }
  216. scope.object.position.addVectors( scope.target, _eye );
  217. if ( scope.object.isPerspectiveCamera ) {
  218. scope.checkDistances();
  219. scope.object.lookAt( scope.target );
  220. if ( lastPosition.distanceToSquared( scope.object.position ) > EPS ) {
  221. scope.dispatchEvent( _changeEvent );
  222. lastPosition.copy( scope.object.position );
  223. }
  224. } else if ( scope.object.isOrthographicCamera ) {
  225. scope.object.lookAt( scope.target );
  226. if ( lastPosition.distanceToSquared( scope.object.position ) > EPS || lastZoom !== scope.object.zoom ) {
  227. scope.dispatchEvent( _changeEvent );
  228. lastPosition.copy( scope.object.position );
  229. lastZoom = scope.object.zoom;
  230. }
  231. } else {
  232. console.warn( 'THREE.TrackballControls: Unsupported camera type' );
  233. }
  234. };
  235. this.reset = function () {
  236. _state = STATE.NONE;
  237. _keyState = STATE.NONE;
  238. scope.target.copy( scope.target0 );
  239. scope.object.position.copy( scope.position0 );
  240. scope.object.up.copy( scope.up0 );
  241. scope.object.zoom = scope.zoom0;
  242. scope.object.updateProjectionMatrix();
  243. _eye.subVectors( scope.object.position, scope.target );
  244. scope.object.lookAt( scope.target );
  245. scope.dispatchEvent( _changeEvent );
  246. lastPosition.copy( scope.object.position );
  247. lastZoom = scope.object.zoom;
  248. };
  249. // listeners
  250. function onPointerDown( event ) {
  251. if ( scope.enabled === false ) return;
  252. if ( _pointers.length === 0 ) {
  253. scope.domElement.setPointerCapture( event.pointerId );
  254. scope.domElement.addEventListener( 'pointermove', onPointerMove );
  255. scope.domElement.addEventListener( 'pointerup', onPointerUp );
  256. }
  257. //
  258. addPointer( event );
  259. if ( event.pointerType === 'touch' ) {
  260. onTouchStart( event );
  261. } else {
  262. onMouseDown( event );
  263. }
  264. }
  265. function onPointerMove( event ) {
  266. if ( scope.enabled === false ) return;
  267. if ( event.pointerType === 'touch' ) {
  268. onTouchMove( event );
  269. } else {
  270. onMouseMove( event );
  271. }
  272. }
  273. function onPointerUp( event ) {
  274. if ( scope.enabled === false ) return;
  275. if ( event.pointerType === 'touch' ) {
  276. onTouchEnd( event );
  277. } else {
  278. onMouseUp();
  279. }
  280. //
  281. removePointer( event );
  282. if ( _pointers.length === 0 ) {
  283. scope.domElement.releasePointerCapture( event.pointerId );
  284. scope.domElement.removeEventListener( 'pointermove', onPointerMove );
  285. scope.domElement.removeEventListener( 'pointerup', onPointerUp );
  286. }
  287. }
  288. function onPointerCancel( event ) {
  289. removePointer( event );
  290. }
  291. function keydown( event ) {
  292. if ( scope.enabled === false ) return;
  293. window.removeEventListener( 'keydown', keydown );
  294. if ( _keyState !== STATE.NONE ) {
  295. return;
  296. } else if ( event.code === scope.keys[ STATE.ROTATE ] && ! scope.noRotate ) {
  297. _keyState = STATE.ROTATE;
  298. } else if ( event.code === scope.keys[ STATE.ZOOM ] && ! scope.noZoom ) {
  299. _keyState = STATE.ZOOM;
  300. } else if ( event.code === scope.keys[ STATE.PAN ] && ! scope.noPan ) {
  301. _keyState = STATE.PAN;
  302. }
  303. }
  304. function keyup() {
  305. if ( scope.enabled === false ) return;
  306. _keyState = STATE.NONE;
  307. window.addEventListener( 'keydown', keydown );
  308. }
  309. function onMouseDown( event ) {
  310. if ( _state === STATE.NONE ) {
  311. switch ( event.button ) {
  312. case scope.mouseButtons.LEFT:
  313. _state = STATE.ROTATE;
  314. break;
  315. case scope.mouseButtons.MIDDLE:
  316. _state = STATE.ZOOM;
  317. break;
  318. case scope.mouseButtons.RIGHT:
  319. _state = STATE.PAN;
  320. break;
  321. }
  322. }
  323. const state = _keyState !== STATE.NONE ? _keyState : _state;
  324. if ( state === STATE.ROTATE && ! scope.noRotate ) {
  325. _moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
  326. _movePrev.copy( _moveCurr );
  327. } else if ( state === STATE.ZOOM && ! scope.noZoom ) {
  328. _zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
  329. _zoomEnd.copy( _zoomStart );
  330. } else if ( state === STATE.PAN && ! scope.noPan ) {
  331. _panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
  332. _panEnd.copy( _panStart );
  333. }
  334. scope.dispatchEvent( _startEvent );
  335. }
  336. function onMouseMove( event ) {
  337. const state = _keyState !== STATE.NONE ? _keyState : _state;
  338. if ( state === STATE.ROTATE && ! scope.noRotate ) {
  339. _movePrev.copy( _moveCurr );
  340. _moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
  341. } else if ( state === STATE.ZOOM && ! scope.noZoom ) {
  342. _zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
  343. } else if ( state === STATE.PAN && ! scope.noPan ) {
  344. _panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
  345. }
  346. }
  347. function onMouseUp() {
  348. _state = STATE.NONE;
  349. scope.dispatchEvent( _endEvent );
  350. }
  351. function onMouseWheel( event ) {
  352. if ( scope.enabled === false ) return;
  353. if ( scope.noZoom === true ) return;
  354. event.preventDefault();
  355. switch ( event.deltaMode ) {
  356. case 2:
  357. // Zoom in pages
  358. _zoomStart.y -= event.deltaY * 0.025;
  359. break;
  360. case 1:
  361. // Zoom in lines
  362. _zoomStart.y -= event.deltaY * 0.01;
  363. break;
  364. default:
  365. // undefined, 0, assume pixels
  366. _zoomStart.y -= event.deltaY * 0.00025;
  367. break;
  368. }
  369. scope.dispatchEvent( _startEvent );
  370. scope.dispatchEvent( _endEvent );
  371. }
  372. function onTouchStart( event ) {
  373. trackPointer( event );
  374. switch ( _pointers.length ) {
  375. case 1:
  376. _state = STATE.TOUCH_ROTATE;
  377. _moveCurr.copy( getMouseOnCircle( _pointers[ 0 ].pageX, _pointers[ 0 ].pageY ) );
  378. _movePrev.copy( _moveCurr );
  379. break;
  380. default:
  381. // 2 or more
  382. _state = STATE.TOUCH_ZOOM_PAN;
  383. const dx = _pointers[ 0 ].pageX - _pointers[ 1 ].pageX;
  384. const dy = _pointers[ 0 ].pageY - _pointers[ 1 ].pageY;
  385. _touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
  386. const x = ( _pointers[ 0 ].pageX + _pointers[ 1 ].pageX ) / 2;
  387. const y = ( _pointers[ 0 ].pageY + _pointers[ 1 ].pageY ) / 2;
  388. _panStart.copy( getMouseOnScreen( x, y ) );
  389. _panEnd.copy( _panStart );
  390. break;
  391. }
  392. scope.dispatchEvent( _startEvent );
  393. }
  394. function onTouchMove( event ) {
  395. trackPointer( event );
  396. switch ( _pointers.length ) {
  397. case 1:
  398. _movePrev.copy( _moveCurr );
  399. _moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
  400. break;
  401. default:
  402. // 2 or more
  403. const position = getSecondPointerPosition( event );
  404. const dx = event.pageX - position.x;
  405. const dy = event.pageY - position.y;
  406. _touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );
  407. const x = ( event.pageX + position.x ) / 2;
  408. const y = ( event.pageY + position.y ) / 2;
  409. _panEnd.copy( getMouseOnScreen( x, y ) );
  410. break;
  411. }
  412. }
  413. function onTouchEnd( event ) {
  414. switch ( _pointers.length ) {
  415. case 0:
  416. _state = STATE.NONE;
  417. break;
  418. case 1:
  419. _state = STATE.TOUCH_ROTATE;
  420. _moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
  421. _movePrev.copy( _moveCurr );
  422. break;
  423. case 2:
  424. _state = STATE.TOUCH_ZOOM_PAN;
  425. for ( let i = 0; i < _pointers.length; i ++ ) {
  426. if ( _pointers[ i ].pointerId !== event.pointerId ) {
  427. const position = _pointerPositions[ _pointers[ i ].pointerId ];
  428. _moveCurr.copy( getMouseOnCircle( position.x, position.y ) );
  429. _movePrev.copy( _moveCurr );
  430. break;
  431. }
  432. }
  433. break;
  434. }
  435. scope.dispatchEvent( _endEvent );
  436. }
  437. function contextmenu( event ) {
  438. if ( scope.enabled === false ) return;
  439. event.preventDefault();
  440. }
  441. function addPointer( event ) {
  442. _pointers.push( event );
  443. }
  444. function removePointer( event ) {
  445. delete _pointerPositions[ event.pointerId ];
  446. for ( let i = 0; i < _pointers.length; i ++ ) {
  447. if ( _pointers[ i ].pointerId == event.pointerId ) {
  448. _pointers.splice( i, 1 );
  449. return;
  450. }
  451. }
  452. }
  453. function trackPointer( event ) {
  454. let position = _pointerPositions[ event.pointerId ];
  455. if ( position === undefined ) {
  456. position = new THREE.Vector2();
  457. _pointerPositions[ event.pointerId ] = position;
  458. }
  459. position.set( event.pageX, event.pageY );
  460. }
  461. function getSecondPointerPosition( event ) {
  462. const pointer = event.pointerId === _pointers[ 0 ].pointerId ? _pointers[ 1 ] : _pointers[ 0 ];
  463. return _pointerPositions[ pointer.pointerId ];
  464. }
  465. this.dispose = function () {
  466. scope.domElement.removeEventListener( 'contextmenu', contextmenu );
  467. scope.domElement.removeEventListener( 'pointerdown', onPointerDown );
  468. scope.domElement.removeEventListener( 'pointercancel', onPointerCancel );
  469. scope.domElement.removeEventListener( 'wheel', onMouseWheel );
  470. scope.domElement.removeEventListener( 'pointermove', onPointerMove );
  471. scope.domElement.removeEventListener( 'pointerup', onPointerUp );
  472. window.removeEventListener( 'keydown', keydown );
  473. window.removeEventListener( 'keyup', keyup );
  474. };
  475. this.domElement.addEventListener( 'contextmenu', contextmenu );
  476. this.domElement.addEventListener( 'pointerdown', onPointerDown );
  477. this.domElement.addEventListener( 'pointercancel', onPointerCancel );
  478. this.domElement.addEventListener( 'wheel', onMouseWheel, {
  479. passive: false
  480. } );
  481. window.addEventListener( 'keydown', keydown );
  482. window.addEventListener( 'keyup', keyup );
  483. this.handleResize();
  484. // force an update at start
  485. this.update();
  486. }
  487. }
  488. THREE.TrackballControls = TrackballControls;
  489. } )();