123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706 |
- /**
- * @author Eberhard Graether / http://egraether.com/
- * @author Mark Lundin / http://mark-lundin.com
- * @author Simone Manini / http://daron1337.github.io
- * @author Luca Antiga / http://lantiga.github.io
- */
- import {
- EventDispatcher,
- MOUSE,
- Quaternion,
- Vector2,
- Vector3
- } from "../../../build/three.module.js";
- var TrackballControls = function ( object, domElement ) {
- if ( domElement === undefined ) console.warn( 'THREE.TrackballControls: The second parameter "domElement" is now mandatory.' );
- if ( domElement === document ) console.error( 'THREE.TrackballControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );
- var _this = this;
- var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };
- this.object = object;
- this.domElement = domElement;
- // 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.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
- this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.ZOOM, RIGHT: MOUSE.PAN };
- // internals
- this.target = new Vector3();
- var EPS = 0.000001;
- var lastPosition = new Vector3();
- var lastZoom = 1;
- var _state = STATE.NONE,
- _keyState = STATE.NONE,
- _eye = new Vector3(),
- _movePrev = new Vector2(),
- _moveCurr = new Vector2(),
- _lastAxis = new Vector3(),
- _lastAngle = 0,
- _zoomStart = new Vector2(),
- _zoomEnd = new Vector2(),
- _touchZoomDistanceStart = 0,
- _touchZoomDistanceEnd = 0,
- _panStart = new Vector2(),
- _panEnd = new Vector2();
- // for reset
- this.target0 = this.target.clone();
- this.position0 = this.object.position.clone();
- this.up0 = this.object.up.clone();
- this.zoom0 = this.object.zoom;
- // events
- var changeEvent = { type: 'change' };
- var startEvent = { type: 'start' };
- var endEvent = { type: 'end' };
- // methods
- this.handleResize = function () {
- var box = this.domElement.getBoundingClientRect();
- // adjustments come from similar code in the jquery offset() function
- var d = this.domElement.ownerDocument.documentElement;
- this.screen.left = box.left + window.pageXOffset - d.clientLeft;
- this.screen.top = box.top + window.pageYOffset - d.clientTop;
- this.screen.width = box.width;
- this.screen.height = box.height;
- };
- var getMouseOnScreen = ( function () {
- var vector = new Vector2();
- return function getMouseOnScreen( pageX, pageY ) {
- vector.set(
- ( pageX - _this.screen.left ) / _this.screen.width,
- ( pageY - _this.screen.top ) / _this.screen.height
- );
- return vector;
- };
- }() );
- var getMouseOnCircle = ( function () {
- var vector = new Vector2();
- return function getMouseOnCircle( pageX, pageY ) {
- vector.set(
- ( ( pageX - _this.screen.width * 0.5 - _this.screen.left ) / ( _this.screen.width * 0.5 ) ),
- ( ( _this.screen.height + 2 * ( _this.screen.top - pageY ) ) / _this.screen.width ) // screen.width intentional
- );
- return vector;
- };
- }() );
- this.rotateCamera = ( function () {
- var axis = new Vector3(),
- quaternion = new Quaternion(),
- eyeDirection = new Vector3(),
- objectUpDirection = new Vector3(),
- objectSidewaysDirection = new Vector3(),
- moveDirection = new Vector3(),
- angle;
- return function rotateCamera() {
- moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 );
- angle = moveDirection.length();
- if ( angle ) {
- _eye.copy( _this.object.position ).sub( _this.target );
- eyeDirection.copy( _eye ).normalize();
- objectUpDirection.copy( _this.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 *= _this.rotateSpeed;
- quaternion.setFromAxisAngle( axis, angle );
- _eye.applyQuaternion( quaternion );
- _this.object.up.applyQuaternion( quaternion );
- _lastAxis.copy( axis );
- _lastAngle = angle;
- } else if ( ! _this.staticMoving && _lastAngle ) {
- _lastAngle *= Math.sqrt( 1.0 - _this.dynamicDampingFactor );
- _eye.copy( _this.object.position ).sub( _this.target );
- quaternion.setFromAxisAngle( _lastAxis, _lastAngle );
- _eye.applyQuaternion( quaternion );
- _this.object.up.applyQuaternion( quaternion );
- }
- _movePrev.copy( _moveCurr );
- };
- }() );
- this.zoomCamera = function () {
- var factor;
- if ( _state === STATE.TOUCH_ZOOM_PAN ) {
- factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
- _touchZoomDistanceStart = _touchZoomDistanceEnd;
- if ( _this.object.isPerspectiveCamera ) {
- _eye.multiplyScalar( factor );
- } else if ( _this.object.isOrthographicCamera ) {
- _this.object.zoom *= factor;
- _this.object.updateProjectionMatrix();
- } else {
- console.warn( 'THREE.TrackballControls: Unsupported camera type' );
- }
- } else {
- factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;
- if ( factor !== 1.0 && factor > 0.0 ) {
- if ( _this.object.isPerspectiveCamera ) {
- _eye.multiplyScalar( factor );
- } else if ( _this.object.isOrthographicCamera ) {
- _this.object.zoom /= factor;
- _this.object.updateProjectionMatrix();
- } else {
- console.warn( 'THREE.TrackballControls: Unsupported camera type' );
- }
- }
- if ( _this.staticMoving ) {
- _zoomStart.copy( _zoomEnd );
- } else {
- _zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
- }
- }
- };
- this.panCamera = ( function () {
- var mouseChange = new Vector2(),
- objectUp = new Vector3(),
- pan = new Vector3();
- return function panCamera() {
- mouseChange.copy( _panEnd ).sub( _panStart );
- if ( mouseChange.lengthSq() ) {
- if ( _this.object.isOrthographicCamera ) {
- var scale_x = ( _this.object.right - _this.object.left ) / _this.object.zoom / _this.domElement.clientWidth;
- var scale_y = ( _this.object.top - _this.object.bottom ) / _this.object.zoom / _this.domElement.clientWidth;
- mouseChange.x *= scale_x;
- mouseChange.y *= scale_y;
- }
- mouseChange.multiplyScalar( _eye.length() * _this.panSpeed );
- pan.copy( _eye ).cross( _this.object.up ).setLength( mouseChange.x );
- pan.add( objectUp.copy( _this.object.up ).setLength( mouseChange.y ) );
- _this.object.position.add( pan );
- _this.target.add( pan );
- if ( _this.staticMoving ) {
- _panStart.copy( _panEnd );
- } else {
- _panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) );
- }
- }
- };
- }() );
- this.checkDistances = function () {
- if ( ! _this.noZoom || ! _this.noPan ) {
- if ( _eye.lengthSq() > _this.maxDistance * _this.maxDistance ) {
- _this.object.position.addVectors( _this.target, _eye.setLength( _this.maxDistance ) );
- _zoomStart.copy( _zoomEnd );
- }
- if ( _eye.lengthSq() < _this.minDistance * _this.minDistance ) {
- _this.object.position.addVectors( _this.target, _eye.setLength( _this.minDistance ) );
- _zoomStart.copy( _zoomEnd );
- }
- }
- };
- this.update = function () {
- _eye.subVectors( _this.object.position, _this.target );
- if ( ! _this.noRotate ) {
- _this.rotateCamera();
- }
- if ( ! _this.noZoom ) {
- _this.zoomCamera();
- }
- if ( ! _this.noPan ) {
- _this.panCamera();
- }
- _this.object.position.addVectors( _this.target, _eye );
- if ( _this.object.isPerspectiveCamera ) {
- _this.checkDistances();
- _this.object.lookAt( _this.target );
- if ( lastPosition.distanceToSquared( _this.object.position ) > EPS ) {
- _this.dispatchEvent( changeEvent );
- lastPosition.copy( _this.object.position );
- }
- } else if ( _this.object.isOrthographicCamera ) {
- _this.object.lookAt( _this.target );
- if ( lastPosition.distanceToSquared( _this.object.position ) > EPS || lastZoom !== _this.object.zoom ) {
- _this.dispatchEvent( changeEvent );
- lastPosition.copy( _this.object.position );
- lastZoom = _this.object.zoom;
- }
- } else {
- console.warn( 'THREE.TrackballControls: Unsupported camera type' );
- }
- };
- this.reset = function () {
- _state = STATE.NONE;
- _keyState = STATE.NONE;
- _this.target.copy( _this.target0 );
- _this.object.position.copy( _this.position0 );
- _this.object.up.copy( _this.up0 );
- _this.object.zoom = _this.zoom0;
- _this.object.updateProjectionMatrix();
- _eye.subVectors( _this.object.position, _this.target );
- _this.object.lookAt( _this.target );
- _this.dispatchEvent( changeEvent );
- lastPosition.copy( _this.object.position );
- lastZoom = _this.object.zoom;
- };
- // listeners
- function keydown( event ) {
- if ( _this.enabled === false ) return;
- window.removeEventListener( 'keydown', keydown );
- if ( _keyState !== STATE.NONE ) {
- return;
- } else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && ! _this.noRotate ) {
- _keyState = STATE.ROTATE;
- } else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && ! _this.noZoom ) {
- _keyState = STATE.ZOOM;
- } else if ( event.keyCode === _this.keys[ STATE.PAN ] && ! _this.noPan ) {
- _keyState = STATE.PAN;
- }
- }
- function keyup() {
- if ( _this.enabled === false ) return;
- _keyState = STATE.NONE;
- window.addEventListener( 'keydown', keydown, false );
- }
- function mousedown( event ) {
- if ( _this.enabled === false ) return;
- event.preventDefault();
- event.stopPropagation();
- if ( _state === STATE.NONE ) {
- switch ( event.button ) {
- case _this.mouseButtons.LEFT:
- _state = STATE.ROTATE;
- break;
- case _this.mouseButtons.MIDDLE:
- _state = STATE.ZOOM;
- break;
- case _this.mouseButtons.RIGHT:
- _state = STATE.PAN;
- break;
- default:
- _state = STATE.NONE;
- }
- }
- var state = ( _keyState !== STATE.NONE ) ? _keyState : _state;
- if ( state === STATE.ROTATE && ! _this.noRotate ) {
- _moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
- _movePrev.copy( _moveCurr );
- } else if ( state === STATE.ZOOM && ! _this.noZoom ) {
- _zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
- _zoomEnd.copy( _zoomStart );
- } else if ( state === STATE.PAN && ! _this.noPan ) {
- _panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
- _panEnd.copy( _panStart );
- }
- document.addEventListener( 'mousemove', mousemove, false );
- document.addEventListener( 'mouseup', mouseup, false );
- _this.dispatchEvent( startEvent );
- }
- function mousemove( event ) {
- if ( _this.enabled === false ) return;
- event.preventDefault();
- event.stopPropagation();
- var state = ( _keyState !== STATE.NONE ) ? _keyState : _state;
- if ( state === STATE.ROTATE && ! _this.noRotate ) {
- _movePrev.copy( _moveCurr );
- _moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
- } else if ( state === STATE.ZOOM && ! _this.noZoom ) {
- _zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
- } else if ( state === STATE.PAN && ! _this.noPan ) {
- _panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
- }
- }
- function mouseup( event ) {
- if ( _this.enabled === false ) return;
- event.preventDefault();
- event.stopPropagation();
- _state = STATE.NONE;
- document.removeEventListener( 'mousemove', mousemove );
- document.removeEventListener( 'mouseup', mouseup );
- _this.dispatchEvent( endEvent );
- }
- function mousewheel( event ) {
- if ( _this.enabled === false ) return;
- if ( _this.noZoom === true ) return;
- event.preventDefault();
- event.stopPropagation();
- 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;
- }
- _this.dispatchEvent( startEvent );
- _this.dispatchEvent( endEvent );
- }
- function touchstart( event ) {
- if ( _this.enabled === false ) return;
- event.preventDefault();
- switch ( event.touches.length ) {
- case 1:
- _state = STATE.TOUCH_ROTATE;
- _moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
- _movePrev.copy( _moveCurr );
- break;
- default: // 2 or more
- _state = STATE.TOUCH_ZOOM_PAN;
- var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
- var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
- _touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
- var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
- var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
- _panStart.copy( getMouseOnScreen( x, y ) );
- _panEnd.copy( _panStart );
- break;
- }
- _this.dispatchEvent( startEvent );
- }
- function touchmove( event ) {
- if ( _this.enabled === false ) return;
- event.preventDefault();
- event.stopPropagation();
- switch ( event.touches.length ) {
- case 1:
- _movePrev.copy( _moveCurr );
- _moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
- break;
- default: // 2 or more
- var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
- var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
- _touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );
- var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
- var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
- _panEnd.copy( getMouseOnScreen( x, y ) );
- break;
- }
- }
- function touchend( event ) {
- if ( _this.enabled === false ) return;
- switch ( event.touches.length ) {
- case 0:
- _state = STATE.NONE;
- break;
- case 1:
- _state = STATE.TOUCH_ROTATE;
- _moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
- _movePrev.copy( _moveCurr );
- break;
- }
- _this.dispatchEvent( endEvent );
- }
- function contextmenu( event ) {
- if ( _this.enabled === false ) return;
- event.preventDefault();
- }
- this.dispose = function () {
- this.domElement.removeEventListener( 'contextmenu', contextmenu, false );
- this.domElement.removeEventListener( 'mousedown', mousedown, false );
- this.domElement.removeEventListener( 'wheel', mousewheel, false );
- this.domElement.removeEventListener( 'touchstart', touchstart, false );
- this.domElement.removeEventListener( 'touchend', touchend, false );
- this.domElement.removeEventListener( 'touchmove', touchmove, false );
- document.removeEventListener( 'mousemove', mousemove, false );
- document.removeEventListener( 'mouseup', mouseup, false );
- window.removeEventListener( 'keydown', keydown, false );
- window.removeEventListener( 'keyup', keyup, false );
- };
- this.domElement.addEventListener( 'contextmenu', contextmenu, false );
- this.domElement.addEventListener( 'mousedown', mousedown, false );
- this.domElement.addEventListener( 'wheel', mousewheel, false );
- this.domElement.addEventListener( 'touchstart', touchstart, false );
- this.domElement.addEventListener( 'touchend', touchend, false );
- this.domElement.addEventListener( 'touchmove', touchmove, false );
- window.addEventListener( 'keydown', keydown, false );
- window.addEventListener( 'keyup', keyup, false );
- this.handleResize();
- // force an update at start
- this.update();
- };
- TrackballControls.prototype = Object.create( EventDispatcher.prototype );
- TrackballControls.prototype.constructor = TrackballControls;
- export { TrackballControls };
|