import { EventDispatcher, MathUtils, MOUSE, Quaternion, Vector2, Vector3 } from 'three'; const _changeEvent = { type: 'change' }; const _startEvent = { type: 'start' }; const _endEvent = { type: 'end' }; class TrackballControls extends EventDispatcher { constructor( object, domElement ) { super(); const scope = this; const STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 }; this.object = object; this.domElement = domElement; this.domElement.style.touchAction = 'none'; // disable touch scroll // API this.enabled = true; this.screen = { left: 0, top: 0, width: 0, height: 0 }; this.rotateSpeed = 1.0; this.zoomSpeed = 1.2; this.panSpeed = 0.3; this.noRotate = false; this.noZoom = false; this.noPan = false; this.staticMoving = false; this.dynamicDampingFactor = 0.2; this.minDistance = 0; this.maxDistance = Infinity; this.minZoom = 0; this.maxZoom = Infinity; this.keys = [ 'KeyA' /*A*/, 'KeyS' /*S*/, 'KeyD' /*D*/ ]; this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }; // internals this.target = new Vector3(); const EPS = 0.000001; const lastPosition = new Vector3(); let lastZoom = 1; let _state = STATE.NONE, _keyState = STATE.NONE, _touchZoomDistanceStart = 0, _touchZoomDistanceEnd = 0, _lastAngle = 0; const _eye = new Vector3(), _movePrev = new Vector2(), _moveCurr = new Vector2(), _lastAxis = new Vector3(), _zoomStart = new Vector2(), _zoomEnd = new Vector2(), _panStart = new Vector2(), _panEnd = new Vector2(), _pointers = [], _pointerPositions = {}; // for reset this.target0 = this.target.clone(); this.position0 = this.object.position.clone(); this.up0 = this.object.up.clone(); this.zoom0 = this.object.zoom; // methods this.handleResize = function () { const box = scope.domElement.getBoundingClientRect(); // adjustments come from similar code in the jquery offset() function const d = scope.domElement.ownerDocument.documentElement; scope.screen.left = box.left + window.pageXOffset - d.clientLeft; scope.screen.top = box.top + window.pageYOffset - d.clientTop; scope.screen.width = box.width; scope.screen.height = box.height; }; const getMouseOnScreen = ( function () { const vector = new Vector2(); return function getMouseOnScreen( pageX, pageY ) { vector.set( ( pageX - scope.screen.left ) / scope.screen.width, ( pageY - scope.screen.top ) / scope.screen.height ); return vector; }; }() ); const getMouseOnCircle = ( function () { const vector = new Vector2(); return function getMouseOnCircle( pageX, pageY ) { 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 ); return vector; }; }() ); this.rotateCamera = ( function () { const axis = new Vector3(), quaternion = new Quaternion(), eyeDirection = new Vector3(), objectUpDirection = new Vector3(), objectSidewaysDirection = new Vector3(), moveDirection = new Vector3(); return function rotateCamera() { moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 ); let angle = moveDirection.length(); if ( angle ) { _eye.copy( scope.object.position ).sub( scope.target ); eyeDirection.copy( _eye ).normalize(); objectUpDirection.copy( scope.object.up ).normalize(); objectSidewaysDirection.crossVectors( objectUpDirection, eyeDirection ).normalize(); objectUpDirection.setLength( _moveCurr.y - _movePrev.y ); objectSidewaysDirection.setLength( _moveCurr.x - _movePrev.x ); moveDirection.copy( objectUpDirection.add( objectSidewaysDirection ) ); axis.crossVectors( moveDirection, _eye ).normalize(); angle *= scope.rotateSpeed; quaternion.setFromAxisAngle( axis, angle ); _eye.applyQuaternion( quaternion ); scope.object.up.applyQuaternion( quaternion ); _lastAxis.copy( axis ); _lastAngle = angle; } else if ( ! scope.staticMoving && _lastAngle ) { _lastAngle *= Math.sqrt( 1.0 - scope.dynamicDampingFactor ); _eye.copy( scope.object.position ).sub( scope.target ); quaternion.setFromAxisAngle( _lastAxis, _lastAngle ); _eye.applyQuaternion( quaternion ); scope.object.up.applyQuaternion( quaternion ); } _movePrev.copy( _moveCurr ); }; }() ); this.zoomCamera = function () { let factor; if ( _state === STATE.TOUCH_ZOOM_PAN ) { factor = _touchZoomDistanceStart / _touchZoomDistanceEnd; _touchZoomDistanceStart = _touchZoomDistanceEnd; if ( scope.object.isPerspectiveCamera ) { _eye.multiplyScalar( factor ); } else if ( scope.object.isOrthographicCamera ) { scope.object.zoom = MathUtils.clamp( scope.object.zoom / factor, scope.minZoom, scope.maxZoom ); if ( lastZoom !== scope.object.zoom ) { scope.object.updateProjectionMatrix(); } } else { console.warn( 'THREE.TrackballControls: Unsupported camera type' ); } } else { factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * scope.zoomSpeed; if ( factor !== 1.0 && factor > 0.0 ) { if ( scope.object.isPerspectiveCamera ) { _eye.multiplyScalar( factor ); } else if ( scope.object.isOrthographicCamera ) { scope.object.zoom = MathUtils.clamp( scope.object.zoom / factor, scope.minZoom, scope.maxZoom ); if ( lastZoom !== scope.object.zoom ) { scope.object.updateProjectionMatrix(); } } else { console.warn( 'THREE.TrackballControls: Unsupported camera type' ); } } if ( scope.staticMoving ) { _zoomStart.copy( _zoomEnd ); } else { _zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor; } } }; this.panCamera = ( function () { const mouseChange = new Vector2(), objectUp = new Vector3(), pan = new Vector3(); return function panCamera() { mouseChange.copy( _panEnd ).sub( _panStart ); if ( mouseChange.lengthSq() ) { if ( scope.object.isOrthographicCamera ) { const scale_x = ( scope.object.right - scope.object.left ) / scope.object.zoom / scope.domElement.clientWidth; const scale_y = ( scope.object.top - scope.object.bottom ) / scope.object.zoom / scope.domElement.clientWidth; mouseChange.x *= scale_x; mouseChange.y *= scale_y; } mouseChange.multiplyScalar( _eye.length() * scope.panSpeed ); pan.copy( _eye ).cross( scope.object.up ).setLength( mouseChange.x ); pan.add( objectUp.copy( scope.object.up ).setLength( mouseChange.y ) ); scope.object.position.add( pan ); scope.target.add( pan ); if ( scope.staticMoving ) { _panStart.copy( _panEnd ); } else { _panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( scope.dynamicDampingFactor ) ); } } }; }() ); this.checkDistances = function () { if ( ! scope.noZoom || ! scope.noPan ) { if ( _eye.lengthSq() > scope.maxDistance * scope.maxDistance ) { scope.object.position.addVectors( scope.target, _eye.setLength( scope.maxDistance ) ); _zoomStart.copy( _zoomEnd ); } if ( _eye.lengthSq() < scope.minDistance * scope.minDistance ) { scope.object.position.addVectors( scope.target, _eye.setLength( scope.minDistance ) ); _zoomStart.copy( _zoomEnd ); } } }; this.update = function () { _eye.subVectors( scope.object.position, scope.target ); if ( ! scope.noRotate ) { scope.rotateCamera(); } if ( ! scope.noZoom ) { scope.zoomCamera(); } if ( ! scope.noPan ) { scope.panCamera(); } scope.object.position.addVectors( scope.target, _eye ); if ( scope.object.isPerspectiveCamera ) { scope.checkDistances(); scope.object.lookAt( scope.target ); if ( lastPosition.distanceToSquared( scope.object.position ) > EPS ) { scope.dispatchEvent( _changeEvent ); lastPosition.copy( scope.object.position ); } } else if ( scope.object.isOrthographicCamera ) { scope.object.lookAt( scope.target ); if ( lastPosition.distanceToSquared( scope.object.position ) > EPS || lastZoom !== scope.object.zoom ) { scope.dispatchEvent( _changeEvent ); lastPosition.copy( scope.object.position ); lastZoom = scope.object.zoom; } } else { console.warn( 'THREE.TrackballControls: Unsupported camera type' ); } }; this.reset = function () { _state = STATE.NONE; _keyState = STATE.NONE; scope.target.copy( scope.target0 ); scope.object.position.copy( scope.position0 ); scope.object.up.copy( scope.up0 ); scope.object.zoom = scope.zoom0; scope.object.updateProjectionMatrix(); _eye.subVectors( scope.object.position, scope.target ); scope.object.lookAt( scope.target ); scope.dispatchEvent( _changeEvent ); lastPosition.copy( scope.object.position ); lastZoom = scope.object.zoom; }; // listeners function onPointerDown( event ) { if ( scope.enabled === false ) return; if ( _pointers.length === 0 ) { scope.domElement.setPointerCapture( event.pointerId ); scope.domElement.addEventListener( 'pointermove', onPointerMove ); scope.domElement.addEventListener( 'pointerup', onPointerUp ); } // addPointer( event ); if ( event.pointerType === 'touch' ) { onTouchStart( event ); } else { onMouseDown( event ); } } function onPointerMove( event ) { if ( scope.enabled === false ) return; if ( event.pointerType === 'touch' ) { onTouchMove( event ); } else { onMouseMove( event ); } } function onPointerUp( event ) { if ( scope.enabled === false ) return; if ( event.pointerType === 'touch' ) { onTouchEnd( event ); } else { onMouseUp(); } // removePointer( event ); if ( _pointers.length === 0 ) { scope.domElement.releasePointerCapture( event.pointerId ); scope.domElement.removeEventListener( 'pointermove', onPointerMove ); scope.domElement.removeEventListener( 'pointerup', onPointerUp ); } } function onPointerCancel( event ) { removePointer( event ); } function keydown( event ) { if ( scope.enabled === false ) return; window.removeEventListener( 'keydown', keydown ); if ( _keyState !== STATE.NONE ) { return; } else if ( event.code === scope.keys[ STATE.ROTATE ] && ! scope.noRotate ) { _keyState = STATE.ROTATE; } else if ( event.code === scope.keys[ STATE.ZOOM ] && ! scope.noZoom ) { _keyState = STATE.ZOOM; } else if ( event.code === scope.keys[ STATE.PAN ] && ! scope.noPan ) { _keyState = STATE.PAN; } } function keyup() { if ( scope.enabled === false ) return; _keyState = STATE.NONE; window.addEventListener( 'keydown', keydown ); } function onMouseDown( event ) { if ( _state === STATE.NONE ) { switch ( event.button ) { case scope.mouseButtons.LEFT: _state = STATE.ROTATE; break; case scope.mouseButtons.MIDDLE: _state = STATE.ZOOM; break; case scope.mouseButtons.RIGHT: _state = STATE.PAN; break; } } const state = ( _keyState !== STATE.NONE ) ? _keyState : _state; if ( state === STATE.ROTATE && ! scope.noRotate ) { _moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) ); _movePrev.copy( _moveCurr ); } else if ( state === STATE.ZOOM && ! scope.noZoom ) { _zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) ); _zoomEnd.copy( _zoomStart ); } else if ( state === STATE.PAN && ! scope.noPan ) { _panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) ); _panEnd.copy( _panStart ); } scope.dispatchEvent( _startEvent ); } function onMouseMove( event ) { const state = ( _keyState !== STATE.NONE ) ? _keyState : _state; if ( state === STATE.ROTATE && ! scope.noRotate ) { _movePrev.copy( _moveCurr ); _moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) ); } else if ( state === STATE.ZOOM && ! scope.noZoom ) { _zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) ); } else if ( state === STATE.PAN && ! scope.noPan ) { _panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) ); } } function onMouseUp() { _state = STATE.NONE; scope.dispatchEvent( _endEvent ); } function onMouseWheel( event ) { if ( scope.enabled === false ) return; if ( scope.noZoom === true ) return; event.preventDefault(); switch ( event.deltaMode ) { case 2: // Zoom in pages _zoomStart.y -= event.deltaY * 0.025; break; case 1: // Zoom in lines _zoomStart.y -= event.deltaY * 0.01; break; default: // undefined, 0, assume pixels _zoomStart.y -= event.deltaY * 0.00025; break; } scope.dispatchEvent( _startEvent ); scope.dispatchEvent( _endEvent ); } function onTouchStart( event ) { trackPointer( event ); switch ( _pointers.length ) { case 1: _state = STATE.TOUCH_ROTATE; _moveCurr.copy( getMouseOnCircle( _pointers[ 0 ].pageX, _pointers[ 0 ].pageY ) ); _movePrev.copy( _moveCurr ); break; default: // 2 or more _state = STATE.TOUCH_ZOOM_PAN; const dx = _pointers[ 0 ].pageX - _pointers[ 1 ].pageX; const dy = _pointers[ 0 ].pageY - _pointers[ 1 ].pageY; _touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy ); const x = ( _pointers[ 0 ].pageX + _pointers[ 1 ].pageX ) / 2; const y = ( _pointers[ 0 ].pageY + _pointers[ 1 ].pageY ) / 2; _panStart.copy( getMouseOnScreen( x, y ) ); _panEnd.copy( _panStart ); break; } scope.dispatchEvent( _startEvent ); } function onTouchMove( event ) { trackPointer( event ); switch ( _pointers.length ) { case 1: _movePrev.copy( _moveCurr ); _moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) ); break; default: // 2 or more const position = getSecondPointerPosition( event ); const dx = event.pageX - position.x; const dy = event.pageY - position.y; _touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy ); const x = ( event.pageX + position.x ) / 2; const y = ( event.pageY + position.y ) / 2; _panEnd.copy( getMouseOnScreen( x, y ) ); break; } } function onTouchEnd( event ) { switch ( _pointers.length ) { case 0: _state = STATE.NONE; break; case 1: _state = STATE.TOUCH_ROTATE; _moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) ); _movePrev.copy( _moveCurr ); break; case 2: _state = STATE.TOUCH_ZOOM_PAN; for ( let i = 0; i < _pointers.length; i ++ ) { if ( _pointers[ i ].pointerId !== event.pointerId ) { const position = _pointerPositions[ _pointers[ i ].pointerId ]; _moveCurr.copy( getMouseOnCircle( position.x, position.y ) ); _movePrev.copy( _moveCurr ); break; } } break; } scope.dispatchEvent( _endEvent ); } function contextmenu( event ) { if ( scope.enabled === false ) return; event.preventDefault(); } function addPointer( event ) { _pointers.push( event ); } function removePointer( event ) { delete _pointerPositions[ event.pointerId ]; for ( let i = 0; i < _pointers.length; i ++ ) { if ( _pointers[ i ].pointerId == event.pointerId ) { _pointers.splice( i, 1 ); return; } } } function trackPointer( event ) { let position = _pointerPositions[ event.pointerId ]; if ( position === undefined ) { position = new Vector2(); _pointerPositions[ event.pointerId ] = position; } position.set( event.pageX, event.pageY ); } function getSecondPointerPosition( event ) { const pointer = ( event.pointerId === _pointers[ 0 ].pointerId ) ? _pointers[ 1 ] : _pointers[ 0 ]; return _pointerPositions[ pointer.pointerId ]; } this.dispose = function () { scope.domElement.removeEventListener( 'contextmenu', contextmenu ); scope.domElement.removeEventListener( 'pointerdown', onPointerDown ); scope.domElement.removeEventListener( 'pointercancel', onPointerCancel ); scope.domElement.removeEventListener( 'wheel', onMouseWheel ); scope.domElement.removeEventListener( 'pointermove', onPointerMove ); scope.domElement.removeEventListener( 'pointerup', onPointerUp ); window.removeEventListener( 'keydown', keydown ); window.removeEventListener( 'keyup', keyup ); }; this.domElement.addEventListener( 'contextmenu', contextmenu ); this.domElement.addEventListener( 'pointerdown', onPointerDown ); this.domElement.addEventListener( 'pointercancel', onPointerCancel ); this.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } ); window.addEventListener( 'keydown', keydown ); window.addEventListener( 'keyup', keyup ); this.handleResize(); // force an update at start this.update(); } } export { TrackballControls };