TrackballControls.js 17 KB

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