|
|
@@ -230,2986 +230,2993 @@ class ArcballControls extends EventDispatcher {
|
|
|
|
|
|
this.initializeMouseActions();
|
|
|
|
|
|
- this.domElement.addEventListener( 'contextmenu', this.onContextMenu );
|
|
|
- this.domElement.addEventListener( 'wheel', this.onWheel );
|
|
|
- this.domElement.addEventListener( 'pointerdown', this.onPointerDown );
|
|
|
- this.domElement.addEventListener( 'pointercancel', this.onPointerCancel );
|
|
|
+ this._onContextMenu = onContextMenu.bind( this );
|
|
|
+ this._onWheel = onWheel.bind( this );
|
|
|
+ this._onPointerUp = onPointerUp.bind( this );
|
|
|
+ this._onPointerMove = onPointerMove.bind( this );
|
|
|
+ this._onPointerDown = onPointerDown.bind( this );
|
|
|
+ this._onPointerCancel = onPointerCancel.bind( this );
|
|
|
+ this._onWindowResize = onWindowResize.bind( this );
|
|
|
|
|
|
- window.addEventListener( 'resize', this.onWindowResize );
|
|
|
+ this.domElement.addEventListener( 'contextmenu', this._onContextMenu );
|
|
|
+ this.domElement.addEventListener( 'wheel', this._onWheel );
|
|
|
+ this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
|
|
|
+ this.domElement.addEventListener( 'pointercancel', this._onPointerCancel );
|
|
|
|
|
|
- }
|
|
|
-
|
|
|
- //listeners
|
|
|
+ window.addEventListener( 'resize', this._onWindowResize );
|
|
|
|
|
|
- onWindowResize = () => {
|
|
|
-
|
|
|
- const scale = ( this._gizmos.scale.x + this._gizmos.scale.y + this._gizmos.scale.z ) / 3;
|
|
|
- this._tbRadius = this.calculateTbRadius( this.camera );
|
|
|
+ }
|
|
|
|
|
|
- const newRadius = this._tbRadius / scale;
|
|
|
- const curve = new EllipseCurve( 0, 0, newRadius, newRadius );
|
|
|
- const points = curve.getPoints( this._curvePts );
|
|
|
- const curveGeometry = new BufferGeometry().setFromPoints( points );
|
|
|
+ onSinglePanStart( event, operation ) {
|
|
|
|
|
|
+ if ( this.enabled ) {
|
|
|
|
|
|
- for ( const gizmo in this._gizmos.children ) {
|
|
|
+ this.dispatchEvent( _startEvent );
|
|
|
|
|
|
- this._gizmos.children[ gizmo ].geometry = curveGeometry;
|
|
|
+ this.setCenter( event.clientX, event.clientY );
|
|
|
|
|
|
- }
|
|
|
+ switch ( operation ) {
|
|
|
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ case 'PAN':
|
|
|
|
|
|
- };
|
|
|
+ if ( ! this.enablePan ) {
|
|
|
|
|
|
- onContextMenu = ( event ) => {
|
|
|
+ return;
|
|
|
|
|
|
- if ( ! this.enabled ) {
|
|
|
+ }
|
|
|
|
|
|
- return;
|
|
|
+ if ( this._animationId != - 1 ) {
|
|
|
|
|
|
- }
|
|
|
+ cancelAnimationFrame( this._animationId );
|
|
|
+ this._animationId = - 1;
|
|
|
+ this._timeStart = - 1;
|
|
|
|
|
|
- for ( let i = 0; i < this.mouseActions.length; i ++ ) {
|
|
|
+ this.activateGizmos( false );
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- if ( this.mouseActions[ i ].mouse == 2 ) {
|
|
|
+ }
|
|
|
|
|
|
- //prevent only if button 2 is actually used
|
|
|
- event.preventDefault();
|
|
|
- break;
|
|
|
+ this.updateTbState( STATE.PAN, true );
|
|
|
+ this._startCursorPosition.copy( this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement ) );
|
|
|
+ if ( this.enableGrid ) {
|
|
|
|
|
|
- }
|
|
|
+ this.drawGrid();
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- };
|
|
|
+ break;
|
|
|
|
|
|
- onPointerCancel = () => {
|
|
|
+ case 'ROTATE':
|
|
|
|
|
|
- this._touchStart.splice( 0, this._touchStart.length );
|
|
|
- this._touchCurrent.splice( 0, this._touchCurrent.length );
|
|
|
- this._input = INPUT.NONE;
|
|
|
+ if ( ! this.enableRotate ) {
|
|
|
|
|
|
- };
|
|
|
+ return;
|
|
|
|
|
|
- onPointerDown = ( event ) => {
|
|
|
+ }
|
|
|
|
|
|
- if ( event.button == 0 && event.isPrimary ) {
|
|
|
+ if ( this._animationId != - 1 ) {
|
|
|
|
|
|
- this._downValid = true;
|
|
|
- this._downEvents.push( event );
|
|
|
- this._downStart = performance.now();
|
|
|
+ cancelAnimationFrame( this._animationId );
|
|
|
+ this._animationId = - 1;
|
|
|
+ this._timeStart = - 1;
|
|
|
|
|
|
- } else {
|
|
|
+ }
|
|
|
|
|
|
- this._downValid = false;
|
|
|
+ this.updateTbState( STATE.ROTATE, true );
|
|
|
+ this._startCursorPosition.copy( this.unprojectOnTbSurface( this.camera, _center.x, _center.y, this.domElement, this._tbRadius ) );
|
|
|
+ this.activateGizmos( true );
|
|
|
+ if ( this.enableAnimations ) {
|
|
|
|
|
|
- }
|
|
|
+ this._timePrev = this._timeCurrent = performance.now();
|
|
|
+ this._angleCurrent = this._anglePrev = 0;
|
|
|
+ this._cursorPosPrev.copy( this._startCursorPosition );
|
|
|
+ this._cursorPosCurr.copy( this._cursorPosPrev );
|
|
|
+ this._wCurr = 0;
|
|
|
+ this._wPrev = this._wCurr;
|
|
|
|
|
|
- if ( event.pointerType == 'touch' && this._input != INPUT.CURSOR ) {
|
|
|
+ }
|
|
|
|
|
|
- this._touchStart.push( event );
|
|
|
- this._touchCurrent.push( event );
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
+ break;
|
|
|
|
|
|
- switch ( this._input ) {
|
|
|
+ case 'FOV':
|
|
|
|
|
|
- case INPUT.NONE:
|
|
|
+ if ( ! this.camera.isPerspectiveCamera || ! this.enableZoom ) {
|
|
|
|
|
|
- //singleStart
|
|
|
- this._input = INPUT.ONE_FINGER;
|
|
|
- this.onSinglePanStart( event, 'ROTATE' );
|
|
|
+ return;
|
|
|
|
|
|
- window.addEventListener( 'pointermove', this.onPointerMove );
|
|
|
- window.addEventListener( 'pointerup', this.onPointerUp );
|
|
|
+ }
|
|
|
|
|
|
- break;
|
|
|
+ if ( this._animationId != - 1 ) {
|
|
|
|
|
|
- case INPUT.ONE_FINGER:
|
|
|
- case INPUT.ONE_FINGER_SWITCHED:
|
|
|
+ cancelAnimationFrame( this._animationId );
|
|
|
+ this._animationId = - 1;
|
|
|
+ this._timeStart = - 1;
|
|
|
|
|
|
- //doubleStart
|
|
|
- this._input = INPUT.TWO_FINGER;
|
|
|
+ this.activateGizmos( false );
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- this.onRotateStart();
|
|
|
- this.onPinchStart();
|
|
|
- this.onDoublePanStart();
|
|
|
+ }
|
|
|
|
|
|
+ this.updateTbState( STATE.FOV, true );
|
|
|
+ this._startCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
+ this._currentCursorPosition.copy( this._startCursorPosition );
|
|
|
break;
|
|
|
|
|
|
- case INPUT.TWO_FINGER:
|
|
|
+ case 'ZOOM':
|
|
|
|
|
|
- //multipleStart
|
|
|
- this._input = INPUT.MULT_FINGER;
|
|
|
- this.onTriplePanStart( event );
|
|
|
- break;
|
|
|
+ if ( ! this.enableZoom ) {
|
|
|
|
|
|
- }
|
|
|
+ return;
|
|
|
|
|
|
- } else if ( event.pointerType != 'touch' && this._input == INPUT.NONE ) {
|
|
|
+ }
|
|
|
|
|
|
- let modifier = null;
|
|
|
+ if ( this._animationId != - 1 ) {
|
|
|
|
|
|
- if ( event.ctrlKey || event.metaKey ) {
|
|
|
+ cancelAnimationFrame( this._animationId );
|
|
|
+ this._animationId = - 1;
|
|
|
+ this._timeStart = - 1;
|
|
|
|
|
|
- modifier = 'CTRL';
|
|
|
+ this.activateGizmos( false );
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- } else if ( event.shiftKey ) {
|
|
|
+ }
|
|
|
|
|
|
- modifier = 'SHIFT';
|
|
|
+ this.updateTbState( STATE.SCALE, true );
|
|
|
+ this._startCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
+ this._currentCursorPosition.copy( this._startCursorPosition );
|
|
|
+ break;
|
|
|
|
|
|
}
|
|
|
|
|
|
- this._mouseOp = this.getOpFromAction( event.button, modifier );
|
|
|
- if ( this._mouseOp != null ) {
|
|
|
+ }
|
|
|
|
|
|
- window.addEventListener( 'pointermove', this.onPointerMove );
|
|
|
- window.addEventListener( 'pointerup', this.onPointerUp );
|
|
|
+ }
|
|
|
|
|
|
- //singleStart
|
|
|
- this._input = INPUT.CURSOR;
|
|
|
- this._button = event.button;
|
|
|
- this.onSinglePanStart( event, this._mouseOp );
|
|
|
+ onSinglePanMove( event, opState ) {
|
|
|
|
|
|
- }
|
|
|
+ if ( this.enabled ) {
|
|
|
|
|
|
- }
|
|
|
+ const restart = opState != this._state;
|
|
|
+ this.setCenter( event.clientX, event.clientY );
|
|
|
|
|
|
- };
|
|
|
+ switch ( opState ) {
|
|
|
|
|
|
- onPointerMove = ( event ) => {
|
|
|
+ case STATE.PAN:
|
|
|
|
|
|
- if ( event.pointerType == 'touch' && this._input != INPUT.CURSOR ) {
|
|
|
+ if ( this.enablePan ) {
|
|
|
|
|
|
- switch ( this._input ) {
|
|
|
+ if ( restart ) {
|
|
|
|
|
|
- case INPUT.ONE_FINGER:
|
|
|
+ //switch to pan operation
|
|
|
|
|
|
- //singleMove
|
|
|
- this.updateTouchEvent( event );
|
|
|
+ this.dispatchEvent( _endEvent );
|
|
|
+ this.dispatchEvent( _startEvent );
|
|
|
|
|
|
- this.onSinglePanMove( event, STATE.ROTATE );
|
|
|
- break;
|
|
|
+ this.updateTbState( opState, true );
|
|
|
+ this._startCursorPosition.copy( this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement ) );
|
|
|
+ if ( this.enableGrid ) {
|
|
|
+
|
|
|
+ this.drawGrid();
|
|
|
|
|
|
- case INPUT.ONE_FINGER_SWITCHED:
|
|
|
+ }
|
|
|
|
|
|
- const movement = this.calculatePointersDistance( this._touchCurrent[ 0 ], event ) * this._devPxRatio;
|
|
|
+ this.activateGizmos( false );
|
|
|
|
|
|
- if ( movement >= this._switchSensibility ) {
|
|
|
+ } else {
|
|
|
|
|
|
- //singleMove
|
|
|
- this._input = INPUT.ONE_FINGER;
|
|
|
- this.updateTouchEvent( event );
|
|
|
+ //continue with pan operation
|
|
|
+ this._currentCursorPosition.copy( this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement ) );
|
|
|
+ this.applyTransformMatrix( this.pan( this._startCursorPosition, this._currentCursorPosition ) );
|
|
|
|
|
|
- this.onSinglePanStart( event, 'ROTATE' );
|
|
|
- break;
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
break;
|
|
|
|
|
|
- case INPUT.TWO_FINGER:
|
|
|
+ case STATE.ROTATE:
|
|
|
|
|
|
- //rotate/pan/pinchMove
|
|
|
- this.updateTouchEvent( event );
|
|
|
+ if ( this.enableRotate ) {
|
|
|
|
|
|
- this.onRotateMove();
|
|
|
- this.onPinchMove();
|
|
|
- this.onDoublePanMove();
|
|
|
+ if ( restart ) {
|
|
|
|
|
|
- break;
|
|
|
+ //switch to rotate operation
|
|
|
|
|
|
- case INPUT.MULT_FINGER:
|
|
|
+ this.dispatchEvent( _endEvent );
|
|
|
+ this.dispatchEvent( _startEvent );
|
|
|
|
|
|
- //multMove
|
|
|
- this.updateTouchEvent( event );
|
|
|
+ this.updateTbState( opState, true );
|
|
|
+ this._startCursorPosition.copy( this.unprojectOnTbSurface( this.camera, _center.x, _center.y, this.domElement, this._tbRadius ) );
|
|
|
|
|
|
- this.onTriplePanMove( event );
|
|
|
- break;
|
|
|
+ if ( this.enableGrid ) {
|
|
|
|
|
|
- }
|
|
|
+ this.disposeGrid();
|
|
|
|
|
|
- } else if ( event.pointerType != 'touch' && this._input == INPUT.CURSOR ) {
|
|
|
+ }
|
|
|
|
|
|
- let modifier = null;
|
|
|
+ this.activateGizmos( true );
|
|
|
|
|
|
- if ( event.ctrlKey || event.metaKey ) {
|
|
|
+ } else {
|
|
|
|
|
|
- modifier = 'CTRL';
|
|
|
+ //continue with rotate operation
|
|
|
+ this._currentCursorPosition.copy( this.unprojectOnTbSurface( this.camera, _center.x, _center.y, this.domElement, this._tbRadius ) );
|
|
|
|
|
|
- } else if ( event.shiftKey ) {
|
|
|
+ const distance = this._startCursorPosition.distanceTo( this._currentCursorPosition );
|
|
|
+ const angle = this._startCursorPosition.angleTo( this._currentCursorPosition );
|
|
|
+ const amount = Math.max( distance / this._tbRadius, angle ); //effective rotation angle
|
|
|
|
|
|
- modifier = 'SHIFT';
|
|
|
+ this.applyTransformMatrix( this.rotate( this.calculateRotationAxis( this._startCursorPosition, this._currentCursorPosition ), amount ) );
|
|
|
|
|
|
- }
|
|
|
+ if ( this.enableAnimations ) {
|
|
|
|
|
|
- const mouseOpState = this.getOpStateFromAction( this._button, modifier );
|
|
|
+ this._timePrev = this._timeCurrent;
|
|
|
+ this._timeCurrent = performance.now();
|
|
|
+ this._anglePrev = this._angleCurrent;
|
|
|
+ this._angleCurrent = amount;
|
|
|
+ this._cursorPosPrev.copy( this._cursorPosCurr );
|
|
|
+ this._cursorPosCurr.copy( this._currentCursorPosition );
|
|
|
+ this._wPrev = this._wCurr;
|
|
|
+ this._wCurr = this.calculateAngularSpeed( this._anglePrev, this._angleCurrent, this._timePrev, this._timeCurrent );
|
|
|
|
|
|
- if ( mouseOpState != null ) {
|
|
|
+ }
|
|
|
|
|
|
- this.onSinglePanMove( event, mouseOpState );
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ break;
|
|
|
|
|
|
- //checkDistance
|
|
|
- if ( this._downValid ) {
|
|
|
+ case STATE.SCALE:
|
|
|
|
|
|
- const movement = this.calculatePointersDistance( this._downEvents[ this._downEvents.length - 1 ], event ) * this._devPxRatio;
|
|
|
- if ( movement > this._movementThreshold ) {
|
|
|
+ if ( this.enableZoom ) {
|
|
|
|
|
|
- this._downValid = false;
|
|
|
+ if ( restart ) {
|
|
|
|
|
|
- }
|
|
|
+ //switch to zoom operation
|
|
|
|
|
|
- }
|
|
|
+ this.dispatchEvent( _endEvent );
|
|
|
+ this.dispatchEvent( _startEvent );
|
|
|
|
|
|
- };
|
|
|
+ this.updateTbState( opState, true );
|
|
|
+ this._startCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
+ this._currentCursorPosition.copy( this._startCursorPosition );
|
|
|
|
|
|
- onPointerUp = ( event ) => {
|
|
|
+ if ( this.enableGrid ) {
|
|
|
|
|
|
- if ( event.pointerType == 'touch' && this._input != INPUT.CURSOR ) {
|
|
|
+ this.disposeGrid();
|
|
|
|
|
|
- const nTouch = this._touchCurrent.length;
|
|
|
+ }
|
|
|
|
|
|
- for ( let i = 0; i < nTouch; i ++ ) {
|
|
|
+ this.activateGizmos( false );
|
|
|
|
|
|
- if ( this._touchCurrent[ i ].pointerId == event.pointerId ) {
|
|
|
+ } else {
|
|
|
|
|
|
- this._touchCurrent.splice( i, 1 );
|
|
|
- this._touchStart.splice( i, 1 );
|
|
|
- break;
|
|
|
+ //continue with zoom operation
|
|
|
+ const screenNotches = 8; //how many wheel notches corresponds to a full screen pan
|
|
|
+ this._currentCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
|
|
|
- }
|
|
|
+ const movement = this._currentCursorPosition.y - this._startCursorPosition.y;
|
|
|
|
|
|
- }
|
|
|
+ let size = 1;
|
|
|
|
|
|
- switch ( this._input ) {
|
|
|
+ if ( movement < 0 ) {
|
|
|
|
|
|
- case INPUT.ONE_FINGER:
|
|
|
- case INPUT.ONE_FINGER_SWITCHED:
|
|
|
+ size = 1 / ( Math.pow( this.scaleFactor, - movement * screenNotches ) );
|
|
|
|
|
|
- //singleEnd
|
|
|
- window.removeEventListener( 'pointermove', this.onPointerMove );
|
|
|
- window.removeEventListener( 'pointerup', this.onPointerUp );
|
|
|
+ } else if ( movement > 0 ) {
|
|
|
|
|
|
- this._input = INPUT.NONE;
|
|
|
- this.onSinglePanEnd();
|
|
|
+ size = Math.pow( this.scaleFactor, movement * screenNotches );
|
|
|
|
|
|
- break;
|
|
|
+ }
|
|
|
+
|
|
|
+ this._v3_1.setFromMatrixPosition( this._gizmoMatrixState );
|
|
|
|
|
|
- case INPUT.TWO_FINGER:
|
|
|
+ this.applyTransformMatrix( this.scale( size, this._v3_1 ) );
|
|
|
|
|
|
- //doubleEnd
|
|
|
- this.onDoublePanEnd( event );
|
|
|
- this.onPinchEnd( event );
|
|
|
- this.onRotateEnd( event );
|
|
|
+ }
|
|
|
|
|
|
- //switching to singleStart
|
|
|
- this._input = INPUT.ONE_FINGER_SWITCHED;
|
|
|
+ }
|
|
|
|
|
|
break;
|
|
|
|
|
|
- case INPUT.MULT_FINGER:
|
|
|
+ case STATE.FOV:
|
|
|
|
|
|
- if ( this._touchCurrent.length == 0 ) {
|
|
|
+ if ( this.enableZoom && this.camera.isPerspectiveCamera ) {
|
|
|
|
|
|
- window.removeEventListener( 'pointermove', this.onPointerMove );
|
|
|
- window.removeEventListener( 'pointerup', this.onPointerUp );
|
|
|
+ if ( restart ) {
|
|
|
|
|
|
- //multCancel
|
|
|
- this._input = INPUT.NONE;
|
|
|
- this.onTriplePanEnd();
|
|
|
+ //switch to fov operation
|
|
|
|
|
|
- }
|
|
|
+ this.dispatchEvent( _endEvent );
|
|
|
+ this.dispatchEvent( _startEvent );
|
|
|
|
|
|
- break;
|
|
|
+ this.updateTbState( opState, true );
|
|
|
+ this._startCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
+ this._currentCursorPosition.copy( this._startCursorPosition );
|
|
|
|
|
|
- }
|
|
|
+ if ( this.enableGrid ) {
|
|
|
|
|
|
- } else if ( event.pointerType != 'touch' && this._input == INPUT.CURSOR ) {
|
|
|
+ this.disposeGrid();
|
|
|
|
|
|
- window.removeEventListener( 'pointermove', this.onPointerMove );
|
|
|
- window.removeEventListener( 'pointerup', this.onPointerUp );
|
|
|
+ }
|
|
|
|
|
|
- this._input = INPUT.NONE;
|
|
|
- this.onSinglePanEnd();
|
|
|
- this._button = - 1;
|
|
|
+ this.activateGizmos( false );
|
|
|
|
|
|
- }
|
|
|
+ } else {
|
|
|
|
|
|
- if ( event.isPrimary ) {
|
|
|
+ //continue with fov operation
|
|
|
+ const screenNotches = 8; //how many wheel notches corresponds to a full screen pan
|
|
|
+ this._currentCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
|
|
|
- if ( this._downValid ) {
|
|
|
+ const movement = this._currentCursorPosition.y - this._startCursorPosition.y;
|
|
|
|
|
|
- const downTime = event.timeStamp - this._downEvents[ this._downEvents.length - 1 ].timeStamp;
|
|
|
+ let size = 1;
|
|
|
|
|
|
- if ( downTime <= this._maxDownTime ) {
|
|
|
+ if ( movement < 0 ) {
|
|
|
|
|
|
- if ( this._nclicks == 0 ) {
|
|
|
+ size = 1 / ( Math.pow( this.scaleFactor, - movement * screenNotches ) );
|
|
|
|
|
|
- //first valid click detected
|
|
|
- this._nclicks = 1;
|
|
|
- this._clickStart = performance.now();
|
|
|
+ } else if ( movement > 0 ) {
|
|
|
|
|
|
- } else {
|
|
|
+ size = Math.pow( this.scaleFactor, movement * screenNotches );
|
|
|
|
|
|
- const clickInterval = event.timeStamp - this._clickStart;
|
|
|
- const movement = this.calculatePointersDistance( this._downEvents[ 1 ], this._downEvents[ 0 ] ) * this._devPxRatio;
|
|
|
+ }
|
|
|
|
|
|
- if ( clickInterval <= this._maxInterval && movement <= this._posThreshold ) {
|
|
|
+ this._v3_1.setFromMatrixPosition( this._cameraMatrixState );
|
|
|
+ const x = this._v3_1.distanceTo( this._gizmos.position );
|
|
|
+ let xNew = x / size; //distance between camera and gizmos if scale(size, scalepoint) would be performed
|
|
|
|
|
|
- //second valid click detected
|
|
|
- //fire double tap and reset values
|
|
|
- this._nclicks = 0;
|
|
|
- this._downEvents.splice( 0, this._downEvents.length );
|
|
|
- this.onDoubleTap( event );
|
|
|
+ //check min and max distance
|
|
|
+ xNew = MathUtils.clamp( xNew, this.minDistance, this.maxDistance );
|
|
|
|
|
|
- } else {
|
|
|
+ const y = x * Math.tan( MathUtils.DEG2RAD * this._fovState * 0.5 );
|
|
|
|
|
|
- //new 'first click'
|
|
|
- this._nclicks = 1;
|
|
|
- this._downEvents.shift();
|
|
|
- this._clickStart = performance.now();
|
|
|
+ //calculate new fov
|
|
|
+ let newFov = MathUtils.RAD2DEG * ( Math.atan( y / xNew ) * 2 );
|
|
|
|
|
|
- }
|
|
|
+ //check min and max fov
|
|
|
+ newFov = MathUtils.clamp( newFov, this.minFov, this.maxFov );
|
|
|
|
|
|
- }
|
|
|
+ const newDistance = y / Math.tan( MathUtils.DEG2RAD * ( newFov / 2 ) );
|
|
|
+ size = x / newDistance;
|
|
|
+ this._v3_2.setFromMatrixPosition( this._gizmoMatrixState );
|
|
|
|
|
|
- } else {
|
|
|
+ this.setFov( newFov );
|
|
|
+ this.applyTransformMatrix( this.scale( size, this._v3_2, false ) );
|
|
|
|
|
|
- this._downValid = false;
|
|
|
- this._nclicks = 0;
|
|
|
- this._downEvents.splice( 0, this._downEvents.length );
|
|
|
+ //adjusting distance
|
|
|
+ _offset.copy( this._gizmos.position ).sub( this.camera.position ).normalize().multiplyScalar( newDistance / x );
|
|
|
+ this._m4_1.makeTranslation( _offset.x, _offset.y, _offset.z );
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- } else {
|
|
|
+ }
|
|
|
|
|
|
- this._nclicks = 0;
|
|
|
- this._downEvents.splice( 0, this._downEvents.length );
|
|
|
+ break;
|
|
|
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
-
|
|
|
- };
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- onWheel = ( event ) => {
|
|
|
+ }
|
|
|
|
|
|
- if ( this.enabled && this.enableZoom ) {
|
|
|
+ }
|
|
|
|
|
|
- let modifier = null;
|
|
|
+ onSinglePanEnd() {
|
|
|
|
|
|
- if ( event.ctrlKey || event.metaKey ) {
|
|
|
+ if ( this._state == STATE.ROTATE ) {
|
|
|
|
|
|
- modifier = 'CTRL';
|
|
|
|
|
|
- } else if ( event.shiftKey ) {
|
|
|
+ if ( ! this.enableRotate ) {
|
|
|
|
|
|
- modifier = 'SHIFT';
|
|
|
+ return;
|
|
|
|
|
|
}
|
|
|
|
|
|
- const mouseOp = this.getOpFromAction( 'WHEEL', modifier );
|
|
|
+ if ( this.enableAnimations ) {
|
|
|
|
|
|
- if ( mouseOp != null ) {
|
|
|
+ //perform rotation animation
|
|
|
+ const deltaTime = ( performance.now() - this._timeCurrent );
|
|
|
+ if ( deltaTime < 120 ) {
|
|
|
|
|
|
- event.preventDefault();
|
|
|
- this.dispatchEvent( _startEvent );
|
|
|
+ const w = Math.abs( ( this._wPrev + this._wCurr ) / 2 );
|
|
|
|
|
|
- const notchDeltaY = 125; //distance of one notch of mouse wheel
|
|
|
- let sgn = event.deltaY / notchDeltaY;
|
|
|
+ const self = this;
|
|
|
+ this._animationId = window.requestAnimationFrame( function ( t ) {
|
|
|
|
|
|
- let size = 1;
|
|
|
+ self.updateTbState( STATE.ANIMATION_ROTATE, true );
|
|
|
+ const rotationAxis = self.calculateRotationAxis( self._cursorPosPrev, self._cursorPosCurr );
|
|
|
|
|
|
- if ( sgn > 0 ) {
|
|
|
+ self.onRotationAnim( t, rotationAxis, Math.min( w, self.wMax ) );
|
|
|
|
|
|
- size = 1 / this.scaleFactor;
|
|
|
+ } );
|
|
|
|
|
|
- } else if ( sgn < 0 ) {
|
|
|
+ } else {
|
|
|
|
|
|
- size = this.scaleFactor;
|
|
|
+ //cursor has been standing still for over 120 ms since last movement
|
|
|
+ this.updateTbState( STATE.IDLE, false );
|
|
|
+ this.activateGizmos( false );
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
}
|
|
|
|
|
|
- switch ( mouseOp ) {
|
|
|
+ } else {
|
|
|
|
|
|
- case 'ZOOM':
|
|
|
+ this.updateTbState( STATE.IDLE, false );
|
|
|
+ this.activateGizmos( false );
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- this.updateTbState( STATE.SCALE, true );
|
|
|
+ }
|
|
|
|
|
|
- if ( sgn > 0 ) {
|
|
|
+ } else if ( this._state == STATE.PAN || this._state == STATE.IDLE ) {
|
|
|
|
|
|
- size = 1 / ( Math.pow( this.scaleFactor, sgn ) );
|
|
|
+ this.updateTbState( STATE.IDLE, false );
|
|
|
|
|
|
- } else if ( sgn < 0 ) {
|
|
|
+ if ( this.enableGrid ) {
|
|
|
|
|
|
- size = Math.pow( this.scaleFactor, - sgn );
|
|
|
+ this.disposeGrid();
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- if ( this.cursorZoom && this.enablePan ) {
|
|
|
+ this.activateGizmos( false );
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- let scalePoint;
|
|
|
|
|
|
- if ( this.camera.isOrthographicCamera ) {
|
|
|
+ }
|
|
|
|
|
|
- scalePoint = this.unprojectOnTbPlane( this.camera, event.clientX, event.clientY, this.domElement ).applyQuaternion( this.camera.quaternion ).multiplyScalar( 1 / this.camera.zoom ).add( this._gizmos.position );
|
|
|
+ this.dispatchEvent( _endEvent );
|
|
|
|
|
|
- } else if ( this.camera.isPerspectiveCamera ) {
|
|
|
+ }
|
|
|
|
|
|
- scalePoint = this.unprojectOnTbPlane( this.camera, event.clientX, event.clientY, this.domElement ).applyQuaternion( this.camera.quaternion ).add( this._gizmos.position );
|
|
|
+ onDoubleTap( event ) {
|
|
|
|
|
|
- }
|
|
|
+ if ( this.enabled && this.enablePan && this.scene != null ) {
|
|
|
|
|
|
- this.applyTransformMatrix( this.scale( size, scalePoint ) );
|
|
|
+ this.dispatchEvent( _startEvent );
|
|
|
|
|
|
- } else {
|
|
|
+ this.setCenter( event.clientX, event.clientY );
|
|
|
+ const hitP = this.unprojectOnObj( this.getCursorNDC( _center.x, _center.y, this.domElement ), this.camera );
|
|
|
|
|
|
- this.applyTransformMatrix( this.scale( size, this._gizmos.position ) );
|
|
|
+ if ( hitP != null && this.enableAnimations ) {
|
|
|
|
|
|
- }
|
|
|
+ const self = this;
|
|
|
+ if ( this._animationId != - 1 ) {
|
|
|
|
|
|
- if ( this._grid != null ) {
|
|
|
+ window.cancelAnimationFrame( this._animationId );
|
|
|
|
|
|
- this.disposeGrid();
|
|
|
- this.drawGrid();
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ this._timeStart = - 1;
|
|
|
+ this._animationId = window.requestAnimationFrame( function ( t ) {
|
|
|
|
|
|
- this.updateTbState( STATE.IDLE, false );
|
|
|
+ self.updateTbState( STATE.ANIMATION_FOCUS, true );
|
|
|
+ self.onFocusAnim( t, hitP, self._cameraMatrixState, self._gizmoMatrixState );
|
|
|
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
- this.dispatchEvent( _endEvent );
|
|
|
+ } );
|
|
|
|
|
|
- break;
|
|
|
+ } else if ( hitP != null && ! this.enableAnimations ) {
|
|
|
|
|
|
- case 'FOV':
|
|
|
+ this.updateTbState( STATE.FOCUS, true );
|
|
|
+ this.focus( hitP, this.scaleFactor );
|
|
|
+ this.updateTbState( STATE.IDLE, false );
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- if ( this.camera.isPerspectiveCamera ) {
|
|
|
+ }
|
|
|
|
|
|
- this.updateTbState( STATE.FOV, true );
|
|
|
+ }
|
|
|
|
|
|
+ this.dispatchEvent( _endEvent );
|
|
|
|
|
|
- //Vertigo effect
|
|
|
+ }
|
|
|
|
|
|
- // fov / 2
|
|
|
- // |\
|
|
|
- // | \
|
|
|
- // | \
|
|
|
- // x | \
|
|
|
- // | \
|
|
|
- // | \
|
|
|
- // | _ _ _\
|
|
|
- // y
|
|
|
+ onDoublePanStart() {
|
|
|
|
|
|
- //check for iOs shift shortcut
|
|
|
- if ( event.deltaX != 0 ) {
|
|
|
+ if ( this.enabled && this.enablePan ) {
|
|
|
|
|
|
- sgn = event.deltaX / notchDeltaY;
|
|
|
+ this.dispatchEvent( _startEvent );
|
|
|
|
|
|
- size = 1;
|
|
|
+ this.updateTbState( STATE.PAN, true );
|
|
|
|
|
|
- if ( sgn > 0 ) {
|
|
|
+ this.setCenter( ( this._touchCurrent[ 0 ].clientX + this._touchCurrent[ 1 ].clientX ) / 2, ( this._touchCurrent[ 0 ].clientY + this._touchCurrent[ 1 ].clientY ) / 2 );
|
|
|
+ this._startCursorPosition.copy( this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement, true ) );
|
|
|
+ this._currentCursorPosition.copy( this._startCursorPosition );
|
|
|
|
|
|
- size = 1 / ( Math.pow( this.scaleFactor, sgn ) );
|
|
|
+ this.activateGizmos( false );
|
|
|
|
|
|
- } else if ( sgn < 0 ) {
|
|
|
+ }
|
|
|
|
|
|
- size = Math.pow( this.scaleFactor, - sgn );
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ onDoublePanMove() {
|
|
|
|
|
|
- }
|
|
|
+ if ( this.enabled && this.enablePan ) {
|
|
|
|
|
|
- this._v3_1.setFromMatrixPosition( this._cameraMatrixState );
|
|
|
- const x = this._v3_1.distanceTo( this._gizmos.position );
|
|
|
- let xNew = x / size; //distance between camera and gizmos if scale(size, scalepoint) would be performed
|
|
|
+ this.setCenter( ( this._touchCurrent[ 0 ].clientX + this._touchCurrent[ 1 ].clientX ) / 2, ( this._touchCurrent[ 0 ].clientY + this._touchCurrent[ 1 ].clientY ) / 2 );
|
|
|
|
|
|
- //check min and max distance
|
|
|
- xNew = MathUtils.clamp( xNew, this.minDistance, this.maxDistance );
|
|
|
+ if ( this._state != STATE.PAN ) {
|
|
|
|
|
|
- const y = x * Math.tan( MathUtils.DEG2RAD * this.camera.fov * 0.5 );
|
|
|
+ this.updateTbState( STATE.PAN, true );
|
|
|
+ this._startCursorPosition.copy( this._currentCursorPosition );
|
|
|
|
|
|
- //calculate new fov
|
|
|
- let newFov = MathUtils.RAD2DEG * ( Math.atan( y / xNew ) * 2 );
|
|
|
+ }
|
|
|
|
|
|
- //check min and max fov
|
|
|
- if ( newFov > this.maxFov ) {
|
|
|
+ this._currentCursorPosition.copy( this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement, true ) );
|
|
|
+ this.applyTransformMatrix( this.pan( this._startCursorPosition, this._currentCursorPosition, true ) );
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- newFov = this.maxFov;
|
|
|
+ }
|
|
|
|
|
|
- } else if ( newFov < this.minFov ) {
|
|
|
+ }
|
|
|
|
|
|
- newFov = this.minFov;
|
|
|
+ onDoublePanEnd() {
|
|
|
|
|
|
- }
|
|
|
+ this.updateTbState( STATE.IDLE, false );
|
|
|
+ this.dispatchEvent( _endEvent );
|
|
|
|
|
|
- const newDistance = y / Math.tan( MathUtils.DEG2RAD * ( newFov / 2 ) );
|
|
|
- size = x / newDistance;
|
|
|
+ }
|
|
|
|
|
|
- this.setFov( newFov );
|
|
|
- this.applyTransformMatrix( this.scale( size, this._gizmos.position, false ) );
|
|
|
+ onRotateStart() {
|
|
|
|
|
|
- }
|
|
|
+ if ( this.enabled && this.enableRotate ) {
|
|
|
|
|
|
- if ( this._grid != null ) {
|
|
|
+ this.dispatchEvent( _startEvent );
|
|
|
|
|
|
- this.disposeGrid();
|
|
|
- this.drawGrid();
|
|
|
+ this.updateTbState( STATE.ZROTATE, true );
|
|
|
|
|
|
- }
|
|
|
+ //this._startFingerRotation = event.rotation;
|
|
|
|
|
|
- this.updateTbState( STATE.IDLE, false );
|
|
|
+ this._startFingerRotation = this.getAngle( this._touchCurrent[ 1 ], this._touchCurrent[ 0 ] ) + this.getAngle( this._touchStart[ 1 ], this._touchStart[ 0 ] );
|
|
|
+ this._currentFingerRotation = this._startFingerRotation;
|
|
|
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
- this.dispatchEvent( _endEvent );
|
|
|
+ this.camera.getWorldDirection( this._rotationAxis ); //rotation axis
|
|
|
|
|
|
- break;
|
|
|
+ if ( ! this.enablePan && ! this.enableZoom ) {
|
|
|
|
|
|
- }
|
|
|
+ this.activateGizmos( true );
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
- onSinglePanStart = ( event, operation ) => {
|
|
|
+ onRotateMove() {
|
|
|
|
|
|
- if ( this.enabled ) {
|
|
|
+ if ( this.enabled && this.enableRotate ) {
|
|
|
|
|
|
- this.dispatchEvent( _startEvent );
|
|
|
+ this.setCenter( ( this._touchCurrent[ 0 ].clientX + this._touchCurrent[ 1 ].clientX ) / 2, ( this._touchCurrent[ 0 ].clientY + this._touchCurrent[ 1 ].clientY ) / 2 );
|
|
|
+ let rotationPoint;
|
|
|
|
|
|
- this.setCenter( event.clientX, event.clientY );
|
|
|
+ if ( this._state != STATE.ZROTATE ) {
|
|
|
|
|
|
- switch ( operation ) {
|
|
|
+ this.updateTbState( STATE.ZROTATE, true );
|
|
|
+ this._startFingerRotation = this._currentFingerRotation;
|
|
|
|
|
|
- case 'PAN':
|
|
|
+ }
|
|
|
|
|
|
- if ( ! this.enablePan ) {
|
|
|
+ //this._currentFingerRotation = event.rotation;
|
|
|
+ this._currentFingerRotation = this.getAngle( this._touchCurrent[ 1 ], this._touchCurrent[ 0 ] ) + this.getAngle( this._touchStart[ 1 ], this._touchStart[ 0 ] );
|
|
|
|
|
|
- return;
|
|
|
+ if ( ! this.enablePan ) {
|
|
|
|
|
|
- }
|
|
|
+ rotationPoint = new Vector3().setFromMatrixPosition( this._gizmoMatrixState );
|
|
|
|
|
|
- if ( this._animationId != - 1 ) {
|
|
|
+ } else {
|
|
|
|
|
|
- cancelAnimationFrame( this._animationId );
|
|
|
- this._animationId = - 1;
|
|
|
- this._timeStart = - 1;
|
|
|
+ this._v3_2.setFromMatrixPosition( this._gizmoMatrixState );
|
|
|
+ rotationPoint = this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement ).applyQuaternion( this.camera.quaternion ).multiplyScalar( 1 / this.camera.zoom ).add( this._v3_2 );
|
|
|
|
|
|
- this.activateGizmos( false );
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ const amount = MathUtils.DEG2RAD * ( this._startFingerRotation - this._currentFingerRotation );
|
|
|
|
|
|
- this.updateTbState( STATE.PAN, true );
|
|
|
- this._startCursorPosition.copy( this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement ) );
|
|
|
- if ( this.enableGrid ) {
|
|
|
+ this.applyTransformMatrix( this.zRotate( rotationPoint, amount ) );
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- this.drawGrid();
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- break;
|
|
|
+ onRotateEnd() {
|
|
|
|
|
|
- case 'ROTATE':
|
|
|
+ this.updateTbState( STATE.IDLE, false );
|
|
|
+ this.activateGizmos( false );
|
|
|
+ this.dispatchEvent( _endEvent );
|
|
|
|
|
|
- if ( ! this.enableRotate ) {
|
|
|
+ }
|
|
|
|
|
|
- return;
|
|
|
+ onPinchStart() {
|
|
|
|
|
|
- }
|
|
|
+ if ( this.enabled && this.enableZoom ) {
|
|
|
|
|
|
- if ( this._animationId != - 1 ) {
|
|
|
+ this.dispatchEvent( _startEvent );
|
|
|
+ this.updateTbState( STATE.SCALE, true );
|
|
|
|
|
|
- cancelAnimationFrame( this._animationId );
|
|
|
- this._animationId = - 1;
|
|
|
- this._timeStart = - 1;
|
|
|
+ this._startFingerDistance = this.calculatePointersDistance( this._touchCurrent[ 0 ], this._touchCurrent[ 1 ] );
|
|
|
+ this._currentFingerDistance = this._startFingerDistance;
|
|
|
|
|
|
- }
|
|
|
+ this.activateGizmos( false );
|
|
|
|
|
|
- this.updateTbState( STATE.ROTATE, true );
|
|
|
- this._startCursorPosition.copy( this.unprojectOnTbSurface( this.camera, _center.x, _center.y, this.domElement, this._tbRadius ) );
|
|
|
- this.activateGizmos( true );
|
|
|
- if ( this.enableAnimations ) {
|
|
|
+ }
|
|
|
|
|
|
- this._timePrev = this._timeCurrent = performance.now();
|
|
|
- this._angleCurrent = this._anglePrev = 0;
|
|
|
- this._cursorPosPrev.copy( this._startCursorPosition );
|
|
|
- this._cursorPosCurr.copy( this._cursorPosPrev );
|
|
|
- this._wCurr = 0;
|
|
|
- this._wPrev = this._wCurr;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ onPinchMove() {
|
|
|
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
- break;
|
|
|
+ if ( this.enabled && this.enableZoom ) {
|
|
|
|
|
|
- case 'FOV':
|
|
|
+ this.setCenter( ( this._touchCurrent[ 0 ].clientX + this._touchCurrent[ 1 ].clientX ) / 2, ( this._touchCurrent[ 0 ].clientY + this._touchCurrent[ 1 ].clientY ) / 2 );
|
|
|
+ const minDistance = 12; //minimum distance between fingers (in css pixels)
|
|
|
|
|
|
- if ( ! this.camera.isPerspectiveCamera || ! this.enableZoom ) {
|
|
|
+ if ( this._state != STATE.SCALE ) {
|
|
|
|
|
|
- return;
|
|
|
+ this._startFingerDistance = this._currentFingerDistance;
|
|
|
+ this.updateTbState( STATE.SCALE, true );
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- if ( this._animationId != - 1 ) {
|
|
|
+ this._currentFingerDistance = Math.max( this.calculatePointersDistance( this._touchCurrent[ 0 ], this._touchCurrent[ 1 ] ), minDistance * this._devPxRatio );
|
|
|
+ const amount = this._currentFingerDistance / this._startFingerDistance;
|
|
|
|
|
|
- cancelAnimationFrame( this._animationId );
|
|
|
- this._animationId = - 1;
|
|
|
- this._timeStart = - 1;
|
|
|
+ let scalePoint;
|
|
|
|
|
|
- this.activateGizmos( false );
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ if ( ! this.enablePan ) {
|
|
|
|
|
|
- }
|
|
|
+ scalePoint = this._gizmos.position;
|
|
|
|
|
|
- this.updateTbState( STATE.FOV, true );
|
|
|
- this._startCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
- this._currentCursorPosition.copy( this._startCursorPosition );
|
|
|
- break;
|
|
|
+ } else {
|
|
|
|
|
|
- case 'ZOOM':
|
|
|
+ if ( this.camera.isOrthographicCamera ) {
|
|
|
|
|
|
- if ( ! this.enableZoom ) {
|
|
|
+ scalePoint = this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement )
|
|
|
+ .applyQuaternion( this.camera.quaternion )
|
|
|
+ .multiplyScalar( 1 / this.camera.zoom )
|
|
|
+ .add( this._gizmos.position );
|
|
|
|
|
|
- return;
|
|
|
+ } else if ( this.camera.isPerspectiveCamera ) {
|
|
|
|
|
|
- }
|
|
|
+ scalePoint = this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement )
|
|
|
+ .applyQuaternion( this.camera.quaternion )
|
|
|
+ .add( this._gizmos.position );
|
|
|
|
|
|
- if ( this._animationId != - 1 ) {
|
|
|
+ }
|
|
|
|
|
|
- cancelAnimationFrame( this._animationId );
|
|
|
- this._animationId = - 1;
|
|
|
- this._timeStart = - 1;
|
|
|
+ }
|
|
|
|
|
|
- this.activateGizmos( false );
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ this.applyTransformMatrix( this.scale( amount, scalePoint ) );
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- this.updateTbState( STATE.SCALE, true );
|
|
|
- this._startCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
- this._currentCursorPosition.copy( this._startCursorPosition );
|
|
|
- break;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ onPinchEnd() {
|
|
|
|
|
|
- }
|
|
|
+ this.updateTbState( STATE.IDLE, false );
|
|
|
+ this.dispatchEvent( _endEvent );
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
- onSinglePanMove = ( event, opState ) => {
|
|
|
+ onTriplePanStart() {
|
|
|
|
|
|
- if ( this.enabled ) {
|
|
|
+ if ( this.enabled && this.enableZoom ) {
|
|
|
|
|
|
- const restart = opState != this._state;
|
|
|
- this.setCenter( event.clientX, event.clientY );
|
|
|
+ this.dispatchEvent( _startEvent );
|
|
|
|
|
|
- switch ( opState ) {
|
|
|
+ this.updateTbState( STATE.SCALE, true );
|
|
|
|
|
|
- case STATE.PAN:
|
|
|
+ //const center = event.center;
|
|
|
+ let clientX = 0;
|
|
|
+ let clientY = 0;
|
|
|
+ const nFingers = this._touchCurrent.length;
|
|
|
|
|
|
- if ( this.enablePan ) {
|
|
|
+ for ( let i = 0; i < nFingers; i ++ ) {
|
|
|
|
|
|
- if ( restart ) {
|
|
|
+ clientX += this._touchCurrent[ i ].clientX;
|
|
|
+ clientY += this._touchCurrent[ i ].clientY;
|
|
|
|
|
|
- //switch to pan operation
|
|
|
+ }
|
|
|
|
|
|
- this.dispatchEvent( _endEvent );
|
|
|
- this.dispatchEvent( _startEvent );
|
|
|
+ this.setCenter( clientX / nFingers, clientY / nFingers );
|
|
|
|
|
|
- this.updateTbState( opState, true );
|
|
|
- this._startCursorPosition.copy( this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement ) );
|
|
|
- if ( this.enableGrid ) {
|
|
|
+ this._startCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
+ this._currentCursorPosition.copy( this._startCursorPosition );
|
|
|
|
|
|
- this.drawGrid();
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- this.activateGizmos( false );
|
|
|
+ onTriplePanMove() {
|
|
|
|
|
|
- } else {
|
|
|
+ if ( this.enabled && this.enableZoom ) {
|
|
|
|
|
|
- //continue with pan operation
|
|
|
- this._currentCursorPosition.copy( this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement ) );
|
|
|
- this.applyTransformMatrix( this.pan( this._startCursorPosition, this._currentCursorPosition ) );
|
|
|
+ // fov / 2
|
|
|
+ // |\
|
|
|
+ // | \
|
|
|
+ // | \
|
|
|
+ // x | \
|
|
|
+ // | \
|
|
|
+ // | \
|
|
|
+ // | _ _ _\
|
|
|
+ // y
|
|
|
|
|
|
- }
|
|
|
+ //const center = event.center;
|
|
|
+ let clientX = 0;
|
|
|
+ let clientY = 0;
|
|
|
+ const nFingers = this._touchCurrent.length;
|
|
|
|
|
|
- }
|
|
|
+ for ( let i = 0; i < nFingers; i ++ ) {
|
|
|
|
|
|
- break;
|
|
|
+ clientX += this._touchCurrent[ i ].clientX;
|
|
|
+ clientY += this._touchCurrent[ i ].clientY;
|
|
|
|
|
|
- case STATE.ROTATE:
|
|
|
+ }
|
|
|
|
|
|
- if ( this.enableRotate ) {
|
|
|
+ this.setCenter( clientX / nFingers, clientY / nFingers );
|
|
|
|
|
|
- if ( restart ) {
|
|
|
+ const screenNotches = 8; //how many wheel notches corresponds to a full screen pan
|
|
|
+ this._currentCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
|
|
|
- //switch to rotate operation
|
|
|
+ const movement = this._currentCursorPosition.y - this._startCursorPosition.y;
|
|
|
|
|
|
- this.dispatchEvent( _endEvent );
|
|
|
- this.dispatchEvent( _startEvent );
|
|
|
+ let size = 1;
|
|
|
|
|
|
- this.updateTbState( opState, true );
|
|
|
- this._startCursorPosition.copy( this.unprojectOnTbSurface( this.camera, _center.x, _center.y, this.domElement, this._tbRadius ) );
|
|
|
+ if ( movement < 0 ) {
|
|
|
|
|
|
- if ( this.enableGrid ) {
|
|
|
+ size = 1 / ( Math.pow( this.scaleFactor, - movement * screenNotches ) );
|
|
|
|
|
|
- this.disposeGrid();
|
|
|
+ } else if ( movement > 0 ) {
|
|
|
|
|
|
- }
|
|
|
+ size = Math.pow( this.scaleFactor, movement * screenNotches );
|
|
|
|
|
|
- this.activateGizmos( true );
|
|
|
+ }
|
|
|
|
|
|
- } else {
|
|
|
+ this._v3_1.setFromMatrixPosition( this._cameraMatrixState );
|
|
|
+ const x = this._v3_1.distanceTo( this._gizmos.position );
|
|
|
+ let xNew = x / size; //distance between camera and gizmos if scale(size, scalepoint) would be performed
|
|
|
|
|
|
- //continue with rotate operation
|
|
|
- this._currentCursorPosition.copy( this.unprojectOnTbSurface( this.camera, _center.x, _center.y, this.domElement, this._tbRadius ) );
|
|
|
+ //check min and max distance
|
|
|
+ xNew = MathUtils.clamp( xNew, this.minDistance, this.maxDistance );
|
|
|
|
|
|
- const distance = this._startCursorPosition.distanceTo( this._currentCursorPosition );
|
|
|
- const angle = this._startCursorPosition.angleTo( this._currentCursorPosition );
|
|
|
- const amount = Math.max( distance / this._tbRadius, angle ); //effective rotation angle
|
|
|
+ const y = x * Math.tan( MathUtils.DEG2RAD * this._fovState * 0.5 );
|
|
|
|
|
|
- this.applyTransformMatrix( this.rotate( this.calculateRotationAxis( this._startCursorPosition, this._currentCursorPosition ), amount ) );
|
|
|
+ //calculate new fov
|
|
|
+ let newFov = MathUtils.RAD2DEG * ( Math.atan( y / xNew ) * 2 );
|
|
|
|
|
|
- if ( this.enableAnimations ) {
|
|
|
+ //check min and max fov
|
|
|
+ newFov = MathUtils.clamp( newFov, this.minFov, this.maxFov );
|
|
|
|
|
|
- this._timePrev = this._timeCurrent;
|
|
|
- this._timeCurrent = performance.now();
|
|
|
- this._anglePrev = this._angleCurrent;
|
|
|
- this._angleCurrent = amount;
|
|
|
- this._cursorPosPrev.copy( this._cursorPosCurr );
|
|
|
- this._cursorPosCurr.copy( this._currentCursorPosition );
|
|
|
- this._wPrev = this._wCurr;
|
|
|
- this._wCurr = this.calculateAngularSpeed( this._anglePrev, this._angleCurrent, this._timePrev, this._timeCurrent );
|
|
|
+ const newDistance = y / Math.tan( MathUtils.DEG2RAD * ( newFov / 2 ) );
|
|
|
+ size = x / newDistance;
|
|
|
+ this._v3_2.setFromMatrixPosition( this._gizmoMatrixState );
|
|
|
|
|
|
- }
|
|
|
+ this.setFov( newFov );
|
|
|
+ this.applyTransformMatrix( this.scale( size, this._v3_2, false ) );
|
|
|
|
|
|
- }
|
|
|
+ //adjusting distance
|
|
|
+ _offset.copy( this._gizmos.position ).sub( this.camera.position ).normalize().multiplyScalar( newDistance / x );
|
|
|
+ this._m4_1.makeTranslation( _offset.x, _offset.y, _offset.z );
|
|
|
|
|
|
- }
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- break;
|
|
|
+ }
|
|
|
|
|
|
- case STATE.SCALE:
|
|
|
+ }
|
|
|
|
|
|
- if ( this.enableZoom ) {
|
|
|
+ onTriplePanEnd() {
|
|
|
|
|
|
- if ( restart ) {
|
|
|
+ this.updateTbState( STATE.IDLE, false );
|
|
|
+ this.dispatchEvent( _endEvent );
|
|
|
+ //this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- //switch to zoom operation
|
|
|
+ }
|
|
|
|
|
|
- this.dispatchEvent( _endEvent );
|
|
|
- this.dispatchEvent( _startEvent );
|
|
|
+ /**
|
|
|
+ * Set _center's x/y coordinates
|
|
|
+ * @param {Number} clientX
|
|
|
+ * @param {Number} clientY
|
|
|
+ */
|
|
|
+ setCenter( clientX, clientY ) {
|
|
|
|
|
|
- this.updateTbState( opState, true );
|
|
|
- this._startCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
- this._currentCursorPosition.copy( this._startCursorPosition );
|
|
|
+ _center.x = clientX;
|
|
|
+ _center.y = clientY;
|
|
|
|
|
|
- if ( this.enableGrid ) {
|
|
|
+ }
|
|
|
|
|
|
- this.disposeGrid();
|
|
|
+ /**
|
|
|
+ * Set default mouse actions
|
|
|
+ */
|
|
|
+ initializeMouseActions() {
|
|
|
|
|
|
- }
|
|
|
+ this.setMouseAction( 'PAN', 0, 'CTRL' );
|
|
|
+ this.setMouseAction( 'PAN', 2 );
|
|
|
|
|
|
- this.activateGizmos( false );
|
|
|
+ this.setMouseAction( 'ROTATE', 0 );
|
|
|
|
|
|
- } else {
|
|
|
+ this.setMouseAction( 'ZOOM', 'WHEEL' );
|
|
|
+ this.setMouseAction( 'ZOOM', 1 );
|
|
|
|
|
|
- //continue with zoom operation
|
|
|
- const screenNotches = 8; //how many wheel notches corresponds to a full screen pan
|
|
|
- this._currentCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
+ this.setMouseAction( 'FOV', 'WHEEL', 'SHIFT' );
|
|
|
+ this.setMouseAction( 'FOV', 1, 'SHIFT' );
|
|
|
|
|
|
- const movement = this._currentCursorPosition.y - this._startCursorPosition.y;
|
|
|
|
|
|
- let size = 1;
|
|
|
+ }
|
|
|
|
|
|
- if ( movement < 0 ) {
|
|
|
+ /**
|
|
|
+ * Compare two mouse actions
|
|
|
+ * @param {Object} action1
|
|
|
+ * @param {Object} action2
|
|
|
+ * @returns {Boolean} True if action1 and action 2 are the same mouse action, false otherwise
|
|
|
+ */
|
|
|
+ compareMouseAction( action1, action2 ) {
|
|
|
|
|
|
- size = 1 / ( Math.pow( this.scaleFactor, - movement * screenNotches ) );
|
|
|
+ if ( action1.operation == action2.operation ) {
|
|
|
|
|
|
- } else if ( movement > 0 ) {
|
|
|
+ if ( action1.mouse == action2.mouse && action1.key == action2.key ) {
|
|
|
|
|
|
- size = Math.pow( this.scaleFactor, movement * screenNotches );
|
|
|
+ return true;
|
|
|
|
|
|
- }
|
|
|
+ } else {
|
|
|
|
|
|
- this._v3_1.setFromMatrixPosition( this._gizmoMatrixState );
|
|
|
+ return false;
|
|
|
|
|
|
- this.applyTransformMatrix( this.scale( size, this._v3_1 ) );
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ } else {
|
|
|
|
|
|
- }
|
|
|
+ return false;
|
|
|
|
|
|
- break;
|
|
|
+ }
|
|
|
|
|
|
- case STATE.FOV:
|
|
|
+ }
|
|
|
|
|
|
- if ( this.enableZoom && this.camera.isPerspectiveCamera ) {
|
|
|
+ /**
|
|
|
+ * Set a new mouse action by specifying the operation to be performed and a mouse/key combination. In case of conflict, replaces the existing one
|
|
|
+ * @param {String} operation The operation to be performed ('PAN', 'ROTATE', 'ZOOM', 'FOV)
|
|
|
+ * @param {*} mouse A mouse button (0, 1, 2) or 'WHEEL' for wheel notches
|
|
|
+ * @param {*} key The keyboard modifier ('CTRL', 'SHIFT') or null if key is not needed
|
|
|
+ * @returns {Boolean} True if the mouse action has been successfully added, false otherwise
|
|
|
+ */
|
|
|
+ setMouseAction( operation, mouse, key = null ) {
|
|
|
|
|
|
- if ( restart ) {
|
|
|
+ const operationInput = [ 'PAN', 'ROTATE', 'ZOOM', 'FOV' ];
|
|
|
+ const mouseInput = [ 0, 1, 2, 'WHEEL' ];
|
|
|
+ const keyInput = [ 'CTRL', 'SHIFT', null ];
|
|
|
+ let state;
|
|
|
|
|
|
- //switch to fov operation
|
|
|
+ if ( ! operationInput.includes( operation ) || ! mouseInput.includes( mouse ) || ! keyInput.includes( key ) ) {
|
|
|
|
|
|
- this.dispatchEvent( _endEvent );
|
|
|
- this.dispatchEvent( _startEvent );
|
|
|
+ //invalid parameters
|
|
|
+ return false;
|
|
|
|
|
|
- this.updateTbState( opState, true );
|
|
|
- this._startCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
- this._currentCursorPosition.copy( this._startCursorPosition );
|
|
|
+ }
|
|
|
|
|
|
- if ( this.enableGrid ) {
|
|
|
+ if ( mouse == 'WHEEL' ) {
|
|
|
|
|
|
- this.disposeGrid();
|
|
|
+ if ( operation != 'ZOOM' && operation != 'FOV' ) {
|
|
|
|
|
|
- }
|
|
|
+ //cannot associate 2D operation to 1D input
|
|
|
+ return false;
|
|
|
|
|
|
- this.activateGizmos( false );
|
|
|
+ }
|
|
|
|
|
|
- } else {
|
|
|
+ }
|
|
|
|
|
|
- //continue with fov operation
|
|
|
- const screenNotches = 8; //how many wheel notches corresponds to a full screen pan
|
|
|
- this._currentCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
+ switch ( operation ) {
|
|
|
|
|
|
- const movement = this._currentCursorPosition.y - this._startCursorPosition.y;
|
|
|
+ case 'PAN':
|
|
|
|
|
|
- let size = 1;
|
|
|
+ state = STATE.PAN;
|
|
|
+ break;
|
|
|
|
|
|
- if ( movement < 0 ) {
|
|
|
+ case 'ROTATE':
|
|
|
|
|
|
- size = 1 / ( Math.pow( this.scaleFactor, - movement * screenNotches ) );
|
|
|
+ state = STATE.ROTATE;
|
|
|
+ break;
|
|
|
|
|
|
- } else if ( movement > 0 ) {
|
|
|
+ case 'ZOOM':
|
|
|
|
|
|
- size = Math.pow( this.scaleFactor, movement * screenNotches );
|
|
|
+ state = STATE.SCALE;
|
|
|
+ break;
|
|
|
|
|
|
- }
|
|
|
+ case 'FOV':
|
|
|
|
|
|
- this._v3_1.setFromMatrixPosition( this._cameraMatrixState );
|
|
|
- const x = this._v3_1.distanceTo( this._gizmos.position );
|
|
|
- let xNew = x / size; //distance between camera and gizmos if scale(size, scalepoint) would be performed
|
|
|
-
|
|
|
- //check min and max distance
|
|
|
- xNew = MathUtils.clamp( xNew, this.minDistance, this.maxDistance );
|
|
|
-
|
|
|
- const y = x * Math.tan( MathUtils.DEG2RAD * this._fovState * 0.5 );
|
|
|
-
|
|
|
- //calculate new fov
|
|
|
- let newFov = MathUtils.RAD2DEG * ( Math.atan( y / xNew ) * 2 );
|
|
|
+ state = STATE.FOV;
|
|
|
+ break;
|
|
|
|
|
|
- //check min and max fov
|
|
|
- newFov = MathUtils.clamp( newFov, this.minFov, this.maxFov );
|
|
|
+ }
|
|
|
|
|
|
- const newDistance = y / Math.tan( MathUtils.DEG2RAD * ( newFov / 2 ) );
|
|
|
- size = x / newDistance;
|
|
|
- this._v3_2.setFromMatrixPosition( this._gizmoMatrixState );
|
|
|
+ const action = {
|
|
|
|
|
|
- this.setFov( newFov );
|
|
|
- this.applyTransformMatrix( this.scale( size, this._v3_2, false ) );
|
|
|
+ operation: operation,
|
|
|
+ mouse: mouse,
|
|
|
+ key: key,
|
|
|
+ state: state
|
|
|
|
|
|
- //adjusting distance
|
|
|
- _offset.copy( this._gizmos.position ).sub( this.camera.position ).normalize().multiplyScalar( newDistance / x );
|
|
|
- this._m4_1.makeTranslation( _offset.x, _offset.y, _offset.z );
|
|
|
+ };
|
|
|
|
|
|
- }
|
|
|
+ for ( let i = 0; i < this.mouseActions.length; i ++ ) {
|
|
|
|
|
|
- }
|
|
|
+ if ( this.mouseActions[ i ].mouse == action.mouse && this.mouseActions[ i ].key == action.key ) {
|
|
|
|
|
|
- break;
|
|
|
+ this.mouseActions.splice( i, 1, action );
|
|
|
+ return true;
|
|
|
|
|
|
}
|
|
|
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
-
|
|
|
}
|
|
|
|
|
|
- };
|
|
|
+ this.mouseActions.push( action );
|
|
|
+ return true;
|
|
|
|
|
|
- onSinglePanEnd = () => {
|
|
|
+ }
|
|
|
|
|
|
- if ( this._state == STATE.ROTATE ) {
|
|
|
+ /**
|
|
|
+ * Remove a mouse action by specifying its mouse/key combination
|
|
|
+ * @param {*} mouse A mouse button (0, 1, 2) or 'WHEEL' for wheel notches
|
|
|
+ * @param {*} key The keyboard modifier ('CTRL', 'SHIFT') or null if key is not needed
|
|
|
+ * @returns {Boolean} True if the operation has been succesfully removed, false otherwise
|
|
|
+ */
|
|
|
+ unsetMouseAction( mouse, key = null ) {
|
|
|
|
|
|
+ for ( let i = 0; i < this.mouseActions.length; i ++ ) {
|
|
|
|
|
|
- if ( ! this.enableRotate ) {
|
|
|
+ if ( this.mouseActions[ i ].mouse == mouse && this.mouseActions[ i ].key == key ) {
|
|
|
|
|
|
- return;
|
|
|
+ this.mouseActions.splice( i, 1 );
|
|
|
+ return true;
|
|
|
|
|
|
}
|
|
|
|
|
|
- if ( this.enableAnimations ) {
|
|
|
-
|
|
|
- //perform rotation animation
|
|
|
- const deltaTime = ( performance.now() - this._timeCurrent );
|
|
|
- if ( deltaTime < 120 ) {
|
|
|
-
|
|
|
- const w = Math.abs( ( this._wPrev + this._wCurr ) / 2 );
|
|
|
-
|
|
|
- const self = this;
|
|
|
- this._animationId = window.requestAnimationFrame( function ( t ) {
|
|
|
-
|
|
|
- self.updateTbState( STATE.ANIMATION_ROTATE, true );
|
|
|
- const rotationAxis = self.calculateRotationAxis( self._cursorPosPrev, self._cursorPosCurr );
|
|
|
+ }
|
|
|
|
|
|
- self.onRotationAnim( t, rotationAxis, Math.min( w, self.wMax ) );
|
|
|
+ return false;
|
|
|
|
|
|
- } );
|
|
|
+ }
|
|
|
|
|
|
- } else {
|
|
|
+ /**
|
|
|
+ * Return the operation associated to a mouse/keyboard combination
|
|
|
+ * @param {*} mouse A mouse button (0, 1, 2) or 'WHEEL' for wheel notches
|
|
|
+ * @param {*} key The keyboard modifier ('CTRL', 'SHIFT') or null if key is not needed
|
|
|
+ * @returns The operation if it has been found, null otherwise
|
|
|
+ */
|
|
|
+ getOpFromAction( mouse, key ) {
|
|
|
|
|
|
- //cursor has been standing still for over 120 ms since last movement
|
|
|
- this.updateTbState( STATE.IDLE, false );
|
|
|
- this.activateGizmos( false );
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ let action;
|
|
|
|
|
|
- }
|
|
|
+ for ( let i = 0; i < this.mouseActions.length; i ++ ) {
|
|
|
|
|
|
- } else {
|
|
|
+ action = this.mouseActions[ i ];
|
|
|
+ if ( action.mouse == mouse && action.key == key ) {
|
|
|
|
|
|
- this.updateTbState( STATE.IDLE, false );
|
|
|
- this.activateGizmos( false );
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ return action.operation;
|
|
|
|
|
|
}
|
|
|
|
|
|
- } else if ( this._state == STATE.PAN || this._state == STATE.IDLE ) {
|
|
|
+ }
|
|
|
|
|
|
- this.updateTbState( STATE.IDLE, false );
|
|
|
+ if ( key != null ) {
|
|
|
|
|
|
- if ( this.enableGrid ) {
|
|
|
+ for ( let i = 0; i < this.mouseActions.length; i ++ ) {
|
|
|
|
|
|
- this.disposeGrid();
|
|
|
+ action = this.mouseActions[ i ];
|
|
|
+ if ( action.mouse == mouse && action.key == null ) {
|
|
|
|
|
|
- }
|
|
|
+ return action.operation;
|
|
|
|
|
|
- this.activateGizmos( false );
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ }
|
|
|
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
- this.dispatchEvent( _endEvent );
|
|
|
-
|
|
|
- };
|
|
|
+ return null;
|
|
|
|
|
|
- onDoubleTap = ( event ) => {
|
|
|
+ }
|
|
|
|
|
|
- if ( this.enabled && this.enablePan && this.scene != null ) {
|
|
|
+ /**
|
|
|
+ * Get the operation associated to mouse and key combination and returns the corresponding FSA state
|
|
|
+ * @param {Number} mouse Mouse button
|
|
|
+ * @param {String} key Keyboard modifier
|
|
|
+ * @returns The FSA state obtained from the operation associated to mouse/keyboard combination
|
|
|
+ */
|
|
|
+ getOpStateFromAction( mouse, key ) {
|
|
|
|
|
|
- this.dispatchEvent( _startEvent );
|
|
|
+ let action;
|
|
|
|
|
|
- this.setCenter( event.clientX, event.clientY );
|
|
|
- const hitP = this.unprojectOnObj( this.getCursorNDC( _center.x, _center.y, this.domElement ), this.camera );
|
|
|
+ for ( let i = 0; i < this.mouseActions.length; i ++ ) {
|
|
|
|
|
|
- if ( hitP != null && this.enableAnimations ) {
|
|
|
+ action = this.mouseActions[ i ];
|
|
|
+ if ( action.mouse == mouse && action.key == key ) {
|
|
|
|
|
|
- const self = this;
|
|
|
- if ( this._animationId != - 1 ) {
|
|
|
+ return action.state;
|
|
|
|
|
|
- window.cancelAnimationFrame( this._animationId );
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- this._timeStart = - 1;
|
|
|
- this._animationId = window.requestAnimationFrame( function ( t ) {
|
|
|
+ if ( key != null ) {
|
|
|
|
|
|
- self.updateTbState( STATE.ANIMATION_FOCUS, true );
|
|
|
- self.onFocusAnim( t, hitP, self._cameraMatrixState, self._gizmoMatrixState );
|
|
|
+ for ( let i = 0; i < this.mouseActions.length; i ++ ) {
|
|
|
|
|
|
- } );
|
|
|
+ action = this.mouseActions[ i ];
|
|
|
+ if ( action.mouse == mouse && action.key == null ) {
|
|
|
|
|
|
- } else if ( hitP != null && ! this.enableAnimations ) {
|
|
|
+ return action.state;
|
|
|
|
|
|
- this.updateTbState( STATE.FOCUS, true );
|
|
|
- this.focus( hitP, this.scaleFactor );
|
|
|
- this.updateTbState( STATE.IDLE, false );
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
- this.dispatchEvent( _endEvent );
|
|
|
+ return null;
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
- onDoublePanStart = () => {
|
|
|
+ /**
|
|
|
+ * Calculate the angle between two pointers
|
|
|
+ * @param {PointerEvent} p1
|
|
|
+ * @param {PointerEvent} p2
|
|
|
+ * @returns {Number} The angle between two pointers in degrees
|
|
|
+ */
|
|
|
+ getAngle( p1, p2 ) {
|
|
|
|
|
|
- if ( this.enabled && this.enablePan ) {
|
|
|
+ return Math.atan2( p2.clientY - p1.clientY, p2.clientX - p1.clientX ) * 180 / Math.PI;
|
|
|
|
|
|
- this.dispatchEvent( _startEvent );
|
|
|
+ }
|
|
|
|
|
|
- this.updateTbState( STATE.PAN, true );
|
|
|
+ /**
|
|
|
+ * Update a PointerEvent inside current pointerevents array
|
|
|
+ * @param {PointerEvent} event
|
|
|
+ */
|
|
|
+ updateTouchEvent( event ) {
|
|
|
|
|
|
- this.setCenter( ( this._touchCurrent[ 0 ].clientX + this._touchCurrent[ 1 ].clientX ) / 2, ( this._touchCurrent[ 0 ].clientY + this._touchCurrent[ 1 ].clientY ) / 2 );
|
|
|
- this._startCursorPosition.copy( this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement, true ) );
|
|
|
- this._currentCursorPosition.copy( this._startCursorPosition );
|
|
|
+ for ( let i = 0; i < this._touchCurrent.length; i ++ ) {
|
|
|
|
|
|
- this.activateGizmos( false );
|
|
|
+ if ( this._touchCurrent[ i ].pointerId == event.pointerId ) {
|
|
|
+
|
|
|
+ this._touchCurrent.splice( i, 1, event );
|
|
|
+ break;
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
- onDoublePanMove = () => {
|
|
|
+ /**
|
|
|
+ * Apply a transformation matrix, to the camera and gizmos
|
|
|
+ * @param {Object} transformation Object containing matrices to apply to camera and gizmos
|
|
|
+ */
|
|
|
+ applyTransformMatrix( transformation ) {
|
|
|
|
|
|
- if ( this.enabled && this.enablePan ) {
|
|
|
+ if ( transformation.camera != null ) {
|
|
|
|
|
|
- this.setCenter( ( this._touchCurrent[ 0 ].clientX + this._touchCurrent[ 1 ].clientX ) / 2, ( this._touchCurrent[ 0 ].clientY + this._touchCurrent[ 1 ].clientY ) / 2 );
|
|
|
+ this._m4_1.copy( this._cameraMatrixState ).premultiply( transformation.camera );
|
|
|
+ this._m4_1.decompose( this.camera.position, this.camera.quaternion, this.camera.scale );
|
|
|
+ this.camera.updateMatrix();
|
|
|
|
|
|
- if ( this._state != STATE.PAN ) {
|
|
|
+ //update camera up vector
|
|
|
+ if ( this._state == STATE.ROTATE || this._state == STATE.ZROTATE || this._state == STATE.ANIMATION_ROTATE ) {
|
|
|
|
|
|
- this.updateTbState( STATE.PAN, true );
|
|
|
- this._startCursorPosition.copy( this._currentCursorPosition );
|
|
|
+ this.camera.up.copy( this._upState ).applyQuaternion( this.camera.quaternion );
|
|
|
|
|
|
}
|
|
|
|
|
|
- this._currentCursorPosition.copy( this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement, true ) );
|
|
|
- this.applyTransformMatrix( this.pan( this._startCursorPosition, this._currentCursorPosition, true ) );
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ }
|
|
|
+
|
|
|
+ if ( transformation.gizmos != null ) {
|
|
|
+
|
|
|
+ this._m4_1.copy( this._gizmoMatrixState ).premultiply( transformation.gizmos );
|
|
|
+ this._m4_1.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
|
|
|
+ this._gizmos.updateMatrix();
|
|
|
|
|
|
}
|
|
|
|
|
|
- };
|
|
|
+ if ( this._state == STATE.SCALE || this._state == STATE.FOCUS || this._state == STATE.ANIMATION_FOCUS ) {
|
|
|
|
|
|
- onDoublePanEnd = () => {
|
|
|
+ this._tbRadius = this.calculateTbRadius( this.camera );
|
|
|
|
|
|
- this.updateTbState( STATE.IDLE, false );
|
|
|
- this.dispatchEvent( _endEvent );
|
|
|
+ if ( this.adjustNearFar ) {
|
|
|
|
|
|
- };
|
|
|
+ const cameraDistance = this.camera.position.distanceTo( this._gizmos.position );
|
|
|
|
|
|
+ const bb = new Box3();
|
|
|
+ bb.setFromObject( this._gizmos );
|
|
|
+ const sphere = new Sphere();
|
|
|
+ bb.getBoundingSphere( sphere );
|
|
|
|
|
|
- onRotateStart = () => {
|
|
|
+ const adjustedNearPosition = Math.max( this._nearPos0, sphere.radius + sphere.center.length() );
|
|
|
+ const regularNearPosition = cameraDistance - this._initialNear;
|
|
|
|
|
|
- if ( this.enabled && this.enableRotate ) {
|
|
|
+ const minNearPos = Math.min( adjustedNearPosition, regularNearPosition );
|
|
|
+ this.camera.near = cameraDistance - minNearPos;
|
|
|
|
|
|
- this.dispatchEvent( _startEvent );
|
|
|
|
|
|
- this.updateTbState( STATE.ZROTATE, true );
|
|
|
+ const adjustedFarPosition = Math.min( this._farPos0, - sphere.radius + sphere.center.length() );
|
|
|
+ const regularFarPosition = cameraDistance - this._initialFar;
|
|
|
|
|
|
- //this._startFingerRotation = event.rotation;
|
|
|
+ const minFarPos = Math.min( adjustedFarPosition, regularFarPosition );
|
|
|
+ this.camera.far = cameraDistance - minFarPos;
|
|
|
|
|
|
- this._startFingerRotation = this.getAngle( this._touchCurrent[ 1 ], this._touchCurrent[ 0 ] ) + this.getAngle( this._touchStart[ 1 ], this._touchStart[ 0 ] );
|
|
|
- this._currentFingerRotation = this._startFingerRotation;
|
|
|
+ this.camera.updateProjectionMatrix();
|
|
|
|
|
|
- this.camera.getWorldDirection( this._rotationAxis ); //rotation axis
|
|
|
+ } else {
|
|
|
|
|
|
- if ( ! this.enablePan && ! this.enableZoom ) {
|
|
|
+ let update = false;
|
|
|
|
|
|
- this.activateGizmos( true );
|
|
|
+ if ( this.camera.near != this._initialNear ) {
|
|
|
|
|
|
- }
|
|
|
+ this.camera.near = this._initialNear;
|
|
|
+ update = true;
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- };
|
|
|
+ if ( this.camera.far != this._initialFar ) {
|
|
|
|
|
|
- onRotateMove = () => {
|
|
|
+ this.camera.far = this._initialFar;
|
|
|
+ update = true;
|
|
|
|
|
|
- if ( this.enabled && this.enableRotate ) {
|
|
|
+ }
|
|
|
|
|
|
- this.setCenter( ( this._touchCurrent[ 0 ].clientX + this._touchCurrent[ 1 ].clientX ) / 2, ( this._touchCurrent[ 0 ].clientY + this._touchCurrent[ 1 ].clientY ) / 2 );
|
|
|
- let rotationPoint;
|
|
|
+ if ( update ) {
|
|
|
|
|
|
- if ( this._state != STATE.ZROTATE ) {
|
|
|
+ this.camera.updateProjectionMatrix();
|
|
|
|
|
|
- this.updateTbState( STATE.ZROTATE, true );
|
|
|
- this._startFingerRotation = this._currentFingerRotation;
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
- //this._currentFingerRotation = event.rotation;
|
|
|
- this._currentFingerRotation = this.getAngle( this._touchCurrent[ 1 ], this._touchCurrent[ 0 ] ) + this.getAngle( this._touchStart[ 1 ], this._touchStart[ 0 ] );
|
|
|
-
|
|
|
- if ( ! this.enablePan ) {
|
|
|
-
|
|
|
- rotationPoint = new Vector3().setFromMatrixPosition( this._gizmoMatrixState );
|
|
|
-
|
|
|
- } else {
|
|
|
+ }
|
|
|
|
|
|
- this._v3_2.setFromMatrixPosition( this._gizmoMatrixState );
|
|
|
- rotationPoint = this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement ).applyQuaternion( this.camera.quaternion ).multiplyScalar( 1 / this.camera.zoom ).add( this._v3_2 );
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * Calculate the angular speed
|
|
|
+ * @param {Number} p0 Position at t0
|
|
|
+ * @param {Number} p1 Position at t1
|
|
|
+ * @param {Number} t0 Initial time in milliseconds
|
|
|
+ * @param {Number} t1 Ending time in milliseconds
|
|
|
+ */
|
|
|
+ calculateAngularSpeed( p0, p1, t0, t1 ) {
|
|
|
|
|
|
- const amount = MathUtils.DEG2RAD * ( this._startFingerRotation - this._currentFingerRotation );
|
|
|
+ const s = p1 - p0;
|
|
|
+ const t = ( t1 - t0 ) / 1000;
|
|
|
+ if ( t == 0 ) {
|
|
|
|
|
|
- this.applyTransformMatrix( this.zRotate( rotationPoint, amount ) );
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ return 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
- };
|
|
|
+ return s / t;
|
|
|
|
|
|
- onRotateEnd = () => {
|
|
|
+ }
|
|
|
|
|
|
- this.updateTbState( STATE.IDLE, false );
|
|
|
- this.activateGizmos( false );
|
|
|
- this.dispatchEvent( _endEvent );
|
|
|
+ /**
|
|
|
+ * Calculate the distance between two pointers
|
|
|
+ * @param {PointerEvent} p0 The first pointer
|
|
|
+ * @param {PointerEvent} p1 The second pointer
|
|
|
+ * @returns {number} The distance between the two pointers
|
|
|
+ */
|
|
|
+ calculatePointersDistance( p0, p1 ) {
|
|
|
|
|
|
- };
|
|
|
+ return Math.sqrt( Math.pow( p1.clientX - p0.clientX, 2 ) + Math.pow( p1.clientY - p0.clientY, 2 ) );
|
|
|
|
|
|
- onPinchStart = () => {
|
|
|
+ }
|
|
|
|
|
|
- if ( this.enabled && this.enableZoom ) {
|
|
|
+ /**
|
|
|
+ * Calculate the rotation axis as the vector perpendicular between two vectors
|
|
|
+ * @param {Vector3} vec1 The first vector
|
|
|
+ * @param {Vector3} vec2 The second vector
|
|
|
+ * @returns {Vector3} The normalized rotation axis
|
|
|
+ */
|
|
|
+ calculateRotationAxis( vec1, vec2 ) {
|
|
|
|
|
|
- this.dispatchEvent( _startEvent );
|
|
|
- this.updateTbState( STATE.SCALE, true );
|
|
|
+ this._rotationMatrix.extractRotation( this._cameraMatrixState );
|
|
|
+ this._quat.setFromRotationMatrix( this._rotationMatrix );
|
|
|
|
|
|
- this._startFingerDistance = this.calculatePointersDistance( this._touchCurrent[ 0 ], this._touchCurrent[ 1 ] );
|
|
|
- this._currentFingerDistance = this._startFingerDistance;
|
|
|
+ this._rotationAxis.crossVectors( vec1, vec2 ).applyQuaternion( this._quat );
|
|
|
+ return this._rotationAxis.normalize().clone();
|
|
|
|
|
|
- this.activateGizmos( false );
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * Calculate the trackball radius so that gizmo's diamater will be 2/3 of the minimum side of the camera frustum
|
|
|
+ * @param {Camera} camera
|
|
|
+ * @returns {Number} The trackball radius
|
|
|
+ */
|
|
|
+ calculateTbRadius( camera ) {
|
|
|
|
|
|
- };
|
|
|
+ const distance = camera.position.distanceTo( this._gizmos.position );
|
|
|
|
|
|
- onPinchMove = () => {
|
|
|
+ if ( camera.type == 'PerspectiveCamera' ) {
|
|
|
|
|
|
- if ( this.enabled && this.enableZoom ) {
|
|
|
+ const halfFovV = MathUtils.DEG2RAD * camera.fov * 0.5; //vertical fov/2 in radians
|
|
|
+ const halfFovH = Math.atan( ( camera.aspect ) * Math.tan( halfFovV ) ); //horizontal fov/2 in radians
|
|
|
+ return Math.tan( Math.min( halfFovV, halfFovH ) ) * distance * this.radiusFactor;
|
|
|
|
|
|
- this.setCenter( ( this._touchCurrent[ 0 ].clientX + this._touchCurrent[ 1 ].clientX ) / 2, ( this._touchCurrent[ 0 ].clientY + this._touchCurrent[ 1 ].clientY ) / 2 );
|
|
|
- const minDistance = 12; //minimum distance between fingers (in css pixels)
|
|
|
+ } else if ( camera.type == 'OrthographicCamera' ) {
|
|
|
|
|
|
- if ( this._state != STATE.SCALE ) {
|
|
|
+ return Math.min( camera.top, camera.right ) * this.radiusFactor;
|
|
|
|
|
|
- this._startFingerDistance = this._currentFingerDistance;
|
|
|
- this.updateTbState( STATE.SCALE, true );
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- this._currentFingerDistance = Math.max( this.calculatePointersDistance( this._touchCurrent[ 0 ], this._touchCurrent[ 1 ] ), minDistance * this._devPxRatio );
|
|
|
- const amount = this._currentFingerDistance / this._startFingerDistance;
|
|
|
+ /**
|
|
|
+ * Focus operation consist of positioning the point of interest in front of the camera and a slightly zoom in
|
|
|
+ * @param {Vector3} point The point of interest
|
|
|
+ * @param {Number} size Scale factor
|
|
|
+ * @param {Number} amount Amount of operation to be completed (used for focus animations, default is complete full operation)
|
|
|
+ */
|
|
|
+ focus( point, size, amount = 1 ) {
|
|
|
|
|
|
- let scalePoint;
|
|
|
+ //move center of camera (along with gizmos) towards point of interest
|
|
|
+ _offset.copy( point ).sub( this._gizmos.position ).multiplyScalar( amount );
|
|
|
+ this._translationMatrix.makeTranslation( _offset.x, _offset.y, _offset.z );
|
|
|
|
|
|
- if ( ! this.enablePan ) {
|
|
|
+ _gizmoMatrixStateTemp.copy( this._gizmoMatrixState );
|
|
|
+ this._gizmoMatrixState.premultiply( this._translationMatrix );
|
|
|
+ this._gizmoMatrixState.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
|
|
|
|
|
|
- scalePoint = this._gizmos.position;
|
|
|
+ _cameraMatrixStateTemp.copy( this._cameraMatrixState );
|
|
|
+ this._cameraMatrixState.premultiply( this._translationMatrix );
|
|
|
+ this._cameraMatrixState.decompose( this.camera.position, this.camera.quaternion, this.camera.scale );
|
|
|
|
|
|
- } else {
|
|
|
+ //apply zoom
|
|
|
+ if ( this.enableZoom ) {
|
|
|
|
|
|
- if ( this.camera.isOrthographicCamera ) {
|
|
|
+ this.applyTransformMatrix( this.scale( size, this._gizmos.position ) );
|
|
|
|
|
|
- scalePoint = this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement )
|
|
|
- .applyQuaternion( this.camera.quaternion )
|
|
|
- .multiplyScalar( 1 / this.camera.zoom )
|
|
|
- .add( this._gizmos.position );
|
|
|
+ }
|
|
|
|
|
|
- } else if ( this.camera.isPerspectiveCamera ) {
|
|
|
+ this._gizmoMatrixState.copy( _gizmoMatrixStateTemp );
|
|
|
+ this._cameraMatrixState.copy( _cameraMatrixStateTemp );
|
|
|
|
|
|
- scalePoint = this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement )
|
|
|
- .applyQuaternion( this.camera.quaternion )
|
|
|
- .add( this._gizmos.position );
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * Draw a grid and add it to the scene
|
|
|
+ */
|
|
|
+ drawGrid() {
|
|
|
|
|
|
- }
|
|
|
+ if ( this.scene != null ) {
|
|
|
|
|
|
- this.applyTransformMatrix( this.scale( amount, scalePoint ) );
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ const color = 0x888888;
|
|
|
+ const multiplier = 3;
|
|
|
+ let size, divisions, maxLength, tick;
|
|
|
|
|
|
- }
|
|
|
+ if ( this.camera.isOrthographicCamera ) {
|
|
|
|
|
|
- };
|
|
|
+ const width = this.camera.right - this.camera.left;
|
|
|
+ const height = this.camera.bottom - this.camera.top;
|
|
|
|
|
|
- onPinchEnd = () => {
|
|
|
+ maxLength = Math.max( width, height );
|
|
|
+ tick = maxLength / 20;
|
|
|
|
|
|
- this.updateTbState( STATE.IDLE, false );
|
|
|
- this.dispatchEvent( _endEvent );
|
|
|
+ size = maxLength / this.camera.zoom * multiplier;
|
|
|
+ divisions = size / tick * this.camera.zoom;
|
|
|
|
|
|
- };
|
|
|
+ } else if ( this.camera.isPerspectiveCamera ) {
|
|
|
|
|
|
- onTriplePanStart = () => {
|
|
|
+ const distance = this.camera.position.distanceTo( this._gizmos.position );
|
|
|
+ const halfFovV = MathUtils.DEG2RAD * this.camera.fov * 0.5;
|
|
|
+ const halfFovH = Math.atan( ( this.camera.aspect ) * Math.tan( halfFovV ) );
|
|
|
|
|
|
- if ( this.enabled && this.enableZoom ) {
|
|
|
+ maxLength = Math.tan( Math.max( halfFovV, halfFovH ) ) * distance * 2;
|
|
|
+ tick = maxLength / 20;
|
|
|
|
|
|
- this.dispatchEvent( _startEvent );
|
|
|
+ size = maxLength * multiplier;
|
|
|
+ divisions = size / tick;
|
|
|
|
|
|
- this.updateTbState( STATE.SCALE, true );
|
|
|
+ }
|
|
|
|
|
|
- //const center = event.center;
|
|
|
- let clientX = 0;
|
|
|
- let clientY = 0;
|
|
|
- const nFingers = this._touchCurrent.length;
|
|
|
+ if ( this._grid == null ) {
|
|
|
|
|
|
- for ( let i = 0; i < nFingers; i ++ ) {
|
|
|
+ this._grid = new GridHelper( size, divisions, color, color );
|
|
|
+ this._grid.position.copy( this._gizmos.position );
|
|
|
+ this._gridPosition.copy( this._grid.position );
|
|
|
+ this._grid.quaternion.copy( this.camera.quaternion );
|
|
|
+ this._grid.rotateX( Math.PI * 0.5 );
|
|
|
|
|
|
- clientX += this._touchCurrent[ i ].clientX;
|
|
|
- clientY += this._touchCurrent[ i ].clientY;
|
|
|
+ this.scene.add( this._grid );
|
|
|
|
|
|
}
|
|
|
|
|
|
- this.setCenter( clientX / nFingers, clientY / nFingers );
|
|
|
-
|
|
|
- this._startCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
- this._currentCursorPosition.copy( this._startCursorPosition );
|
|
|
-
|
|
|
}
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
- onTriplePanMove = () => {
|
|
|
+ /**
|
|
|
+ * Remove all listeners, stop animations and clean scene
|
|
|
+ */
|
|
|
+ dispose() {
|
|
|
|
|
|
- if ( this.enabled && this.enableZoom ) {
|
|
|
+ if ( this._animationId != - 1 ) {
|
|
|
|
|
|
- // fov / 2
|
|
|
- // |\
|
|
|
- // | \
|
|
|
- // | \
|
|
|
- // x | \
|
|
|
- // | \
|
|
|
- // | \
|
|
|
- // | _ _ _\
|
|
|
- // y
|
|
|
+ window.cancelAnimationFrame( this._animationId );
|
|
|
|
|
|
- //const center = event.center;
|
|
|
- let clientX = 0;
|
|
|
- let clientY = 0;
|
|
|
- const nFingers = this._touchCurrent.length;
|
|
|
+ }
|
|
|
|
|
|
- for ( let i = 0; i < nFingers; i ++ ) {
|
|
|
+ this.domElement.removeEventListener( 'pointerdown', this._onPointerDown );
|
|
|
+ this.domElement.removeEventListener( 'pointercancel', this._onPointerCancel );
|
|
|
+ this.domElement.removeEventListener( 'wheel', this._onWheel );
|
|
|
+ this.domElement.removeEventListener( 'contextmenu', this._onContextMenu );
|
|
|
|
|
|
- clientX += this._touchCurrent[ i ].clientX;
|
|
|
- clientY += this._touchCurrent[ i ].clientY;
|
|
|
+ window.removeEventListener( 'pointermove', this._onPointerMove );
|
|
|
+ window.removeEventListener( 'pointerup', this._onPointerUp );
|
|
|
|
|
|
- }
|
|
|
+ window.removeEventListener( 'resize', this._onWindowResize );
|
|
|
|
|
|
- this.setCenter( clientX / nFingers, clientY / nFingers );
|
|
|
+ if ( this.scene !== null ) this.scene.remove( this._gizmos );
|
|
|
+ this.disposeGrid();
|
|
|
|
|
|
- const screenNotches = 8; //how many wheel notches corresponds to a full screen pan
|
|
|
- this._currentCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
|
|
|
+ }
|
|
|
|
|
|
- const movement = this._currentCursorPosition.y - this._startCursorPosition.y;
|
|
|
+ /**
|
|
|
+ * remove the grid from the scene
|
|
|
+ */
|
|
|
+ disposeGrid() {
|
|
|
|
|
|
- let size = 1;
|
|
|
+ if ( this._grid != null && this.scene != null ) {
|
|
|
|
|
|
- if ( movement < 0 ) {
|
|
|
+ this.scene.remove( this._grid );
|
|
|
+ this._grid = null;
|
|
|
|
|
|
- size = 1 / ( Math.pow( this.scaleFactor, - movement * screenNotches ) );
|
|
|
+ }
|
|
|
|
|
|
- } else if ( movement > 0 ) {
|
|
|
+ }
|
|
|
|
|
|
- size = Math.pow( this.scaleFactor, movement * screenNotches );
|
|
|
+ /**
|
|
|
+ * Compute the easing out cubic function for ease out effect in animation
|
|
|
+ * @param {Number} t The absolute progress of the animation in the bound of 0 (beginning of the) and 1 (ending of animation)
|
|
|
+ * @returns {Number} Result of easing out cubic at time t
|
|
|
+ */
|
|
|
+ easeOutCubic( t ) {
|
|
|
|
|
|
- }
|
|
|
+ return 1 - Math.pow( 1 - t, 3 );
|
|
|
|
|
|
- this._v3_1.setFromMatrixPosition( this._cameraMatrixState );
|
|
|
- const x = this._v3_1.distanceTo( this._gizmos.position );
|
|
|
- let xNew = x / size; //distance between camera and gizmos if scale(size, scalepoint) would be performed
|
|
|
+ }
|
|
|
|
|
|
- //check min and max distance
|
|
|
- xNew = MathUtils.clamp( xNew, this.minDistance, this.maxDistance );
|
|
|
+ /**
|
|
|
+ * Make rotation gizmos more or less visible
|
|
|
+ * @param {Boolean} isActive If true, make gizmos more visible
|
|
|
+ */
|
|
|
+ activateGizmos( isActive ) {
|
|
|
|
|
|
- const y = x * Math.tan( MathUtils.DEG2RAD * this._fovState * 0.5 );
|
|
|
+ const gizmoX = this._gizmos.children[ 0 ];
|
|
|
+ const gizmoY = this._gizmos.children[ 1 ];
|
|
|
+ const gizmoZ = this._gizmos.children[ 2 ];
|
|
|
|
|
|
- //calculate new fov
|
|
|
- let newFov = MathUtils.RAD2DEG * ( Math.atan( y / xNew ) * 2 );
|
|
|
+ if ( isActive ) {
|
|
|
|
|
|
- //check min and max fov
|
|
|
- newFov = MathUtils.clamp( newFov, this.minFov, this.maxFov );
|
|
|
+ gizmoX.material.setValues( { opacity: 1 } );
|
|
|
+ gizmoY.material.setValues( { opacity: 1 } );
|
|
|
+ gizmoZ.material.setValues( { opacity: 1 } );
|
|
|
|
|
|
- const newDistance = y / Math.tan( MathUtils.DEG2RAD * ( newFov / 2 ) );
|
|
|
- size = x / newDistance;
|
|
|
- this._v3_2.setFromMatrixPosition( this._gizmoMatrixState );
|
|
|
+ } else {
|
|
|
|
|
|
- this.setFov( newFov );
|
|
|
- this.applyTransformMatrix( this.scale( size, this._v3_2, false ) );
|
|
|
+ gizmoX.material.setValues( { opacity: 0.6 } );
|
|
|
+ gizmoY.material.setValues( { opacity: 0.6 } );
|
|
|
+ gizmoZ.material.setValues( { opacity: 0.6 } );
|
|
|
|
|
|
- //adjusting distance
|
|
|
- _offset.copy( this._gizmos.position ).sub( this.camera.position ).normalize().multiplyScalar( newDistance / x );
|
|
|
- this._m4_1.makeTranslation( _offset.x, _offset.y, _offset.z );
|
|
|
+ }
|
|
|
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
- onTriplePanEnd = () => {
|
|
|
+ /**
|
|
|
+ * Calculate the cursor position in NDC
|
|
|
+ * @param {number} x Cursor horizontal coordinate within the canvas
|
|
|
+ * @param {number} y Cursor vertical coordinate within the canvas
|
|
|
+ * @param {HTMLElement} canvas The canvas where the renderer draws its output
|
|
|
+ * @returns {Vector2} Cursor normalized position inside the canvas
|
|
|
+ */
|
|
|
+ getCursorNDC( cursorX, cursorY, canvas ) {
|
|
|
|
|
|
- this.updateTbState( STATE.IDLE, false );
|
|
|
- this.dispatchEvent( _endEvent );
|
|
|
- //this.dispatchEvent( _changeEvent );
|
|
|
+ const canvasRect = canvas.getBoundingClientRect();
|
|
|
+ this._v2_1.setX( ( ( cursorX - canvasRect.left ) / canvasRect.width ) * 2 - 1 );
|
|
|
+ this._v2_1.setY( ( ( canvasRect.bottom - cursorY ) / canvasRect.height ) * 2 - 1 );
|
|
|
+ return this._v2_1.clone();
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
- * Set _center's x/y coordinates
|
|
|
- * @param {Number} clientX
|
|
|
- * @param {Number} clientY
|
|
|
+ * Calculate the cursor position inside the canvas x/y coordinates with the origin being in the center of the canvas
|
|
|
+ * @param {Number} x Cursor horizontal coordinate within the canvas
|
|
|
+ * @param {Number} y Cursor vertical coordinate within the canvas
|
|
|
+ * @param {HTMLElement} canvas The canvas where the renderer draws its output
|
|
|
+ * @returns {Vector2} Cursor position inside the canvas
|
|
|
*/
|
|
|
- setCenter = ( clientX, clientY ) => {
|
|
|
+ getCursorPosition( cursorX, cursorY, canvas ) {
|
|
|
|
|
|
- _center.x = clientX;
|
|
|
- _center.y = clientY;
|
|
|
+ this._v2_1.copy( this.getCursorNDC( cursorX, cursorY, canvas ) );
|
|
|
+ this._v2_1.x *= ( this.camera.right - this.camera.left ) * 0.5;
|
|
|
+ this._v2_1.y *= ( this.camera.top - this.camera.bottom ) * 0.5;
|
|
|
+ return this._v2_1.clone();
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
- * Set default mouse actions
|
|
|
+ * Set the camera to be controlled
|
|
|
+ * @param {Camera} camera The virtual camera to be controlled
|
|
|
*/
|
|
|
- initializeMouseActions = () => {
|
|
|
+ setCamera( camera ) {
|
|
|
|
|
|
- this.setMouseAction( 'PAN', 0, 'CTRL' );
|
|
|
- this.setMouseAction( 'PAN', 2 );
|
|
|
+ camera.lookAt( this.target );
|
|
|
+ camera.updateMatrix();
|
|
|
|
|
|
- this.setMouseAction( 'ROTATE', 0 );
|
|
|
+ //setting state
|
|
|
+ if ( camera.type == 'PerspectiveCamera' ) {
|
|
|
|
|
|
- this.setMouseAction( 'ZOOM', 'WHEEL' );
|
|
|
- this.setMouseAction( 'ZOOM', 1 );
|
|
|
+ this._fov0 = camera.fov;
|
|
|
+ this._fovState = camera.fov;
|
|
|
|
|
|
- this.setMouseAction( 'FOV', 'WHEEL', 'SHIFT' );
|
|
|
- this.setMouseAction( 'FOV', 1, 'SHIFT' );
|
|
|
+ }
|
|
|
+
|
|
|
+ this._cameraMatrixState0.copy( camera.matrix );
|
|
|
+ this._cameraMatrixState.copy( this._cameraMatrixState0 );
|
|
|
+ this._cameraProjectionState.copy( camera.projectionMatrix );
|
|
|
+ this._zoom0 = camera.zoom;
|
|
|
+ this._zoomState = this._zoom0;
|
|
|
+
|
|
|
+ this._initialNear = camera.near;
|
|
|
+ this._nearPos0 = camera.position.distanceTo( this.target ) - camera.near;
|
|
|
+ this._nearPos = this._initialNear;
|
|
|
+
|
|
|
+ this._initialFar = camera.far;
|
|
|
+ this._farPos0 = camera.position.distanceTo( this.target ) - camera.far;
|
|
|
+ this._farPos = this._initialFar;
|
|
|
+
|
|
|
+ this._up0.copy( camera.up );
|
|
|
+ this._upState.copy( camera.up );
|
|
|
|
|
|
+ this.camera = camera;
|
|
|
+ this.camera.updateProjectionMatrix();
|
|
|
+
|
|
|
+ //making gizmos
|
|
|
+ this._tbRadius = this.calculateTbRadius( camera );
|
|
|
+ this.makeGizmos( this.target, this._tbRadius );
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
- * Compare two mouse actions
|
|
|
- * @param {Object} action1
|
|
|
- * @param {Object} action2
|
|
|
- * @returns {Boolean} True if action1 and action 2 are the same mouse action, false otherwise
|
|
|
+ * Set gizmos visibility
|
|
|
+ * @param {Boolean} value Value of gizmos visibility
|
|
|
*/
|
|
|
- compareMouseAction = ( action1, action2 ) => {
|
|
|
+ setGizmosVisible( value ) {
|
|
|
|
|
|
- if ( action1.operation == action2.operation ) {
|
|
|
+ this._gizmos.visible = value;
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- if ( action1.mouse == action2.mouse && action1.key == action2.key ) {
|
|
|
+ }
|
|
|
|
|
|
- return true;
|
|
|
+ /**
|
|
|
+ * Set gizmos radius factor and redraws gizmos
|
|
|
+ * @param {Float} value Value of radius factor
|
|
|
+ */
|
|
|
+ setTbRadius( value ) {
|
|
|
|
|
|
- } else {
|
|
|
+ this.radiusFactor = value;
|
|
|
+ this._tbRadius = this.calculateTbRadius( this.camera );
|
|
|
|
|
|
- return false;
|
|
|
+ const curve = new EllipseCurve( 0, 0, this._tbRadius, this._tbRadius );
|
|
|
+ const points = curve.getPoints( this._curvePts );
|
|
|
+ const curveGeometry = new BufferGeometry().setFromPoints( points );
|
|
|
|
|
|
- }
|
|
|
|
|
|
- } else {
|
|
|
+ for ( const gizmo in this._gizmos.children ) {
|
|
|
|
|
|
- return false;
|
|
|
+ this._gizmos.children[ gizmo ].geometry = curveGeometry;
|
|
|
|
|
|
}
|
|
|
|
|
|
- };
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
- * Set a new mouse action by specifying the operation to be performed and a mouse/key combination. In case of conflict, replaces the existing one
|
|
|
- * @param {String} operation The operation to be performed ('PAN', 'ROTATE', 'ZOOM', 'FOV)
|
|
|
- * @param {*} mouse A mouse button (0, 1, 2) or 'WHEEL' for wheel notches
|
|
|
- * @param {*} key The keyboard modifier ('CTRL', 'SHIFT') or null if key is not needed
|
|
|
- * @returns {Boolean} True if the mouse action has been successfully added, false otherwise
|
|
|
+ * Creates the rotation gizmos matching trackball center and radius
|
|
|
+ * @param {Vector3} tbCenter The trackball center
|
|
|
+ * @param {number} tbRadius The trackball radius
|
|
|
*/
|
|
|
- setMouseAction = ( operation, mouse, key = null ) => {
|
|
|
-
|
|
|
- const operationInput = [ 'PAN', 'ROTATE', 'ZOOM', 'FOV' ];
|
|
|
- const mouseInput = [ 0, 1, 2, 'WHEEL' ];
|
|
|
- const keyInput = [ 'CTRL', 'SHIFT', null ];
|
|
|
- let state;
|
|
|
+ makeGizmos( tbCenter, tbRadius ) {
|
|
|
|
|
|
- if ( ! operationInput.includes( operation ) || ! mouseInput.includes( mouse ) || ! keyInput.includes( key ) ) {
|
|
|
+ const curve = new EllipseCurve( 0, 0, tbRadius, tbRadius );
|
|
|
+ const points = curve.getPoints( this._curvePts );
|
|
|
|
|
|
- //invalid parameters
|
|
|
- return false;
|
|
|
+ //geometry
|
|
|
+ const curveGeometry = new BufferGeometry().setFromPoints( points );
|
|
|
|
|
|
- }
|
|
|
+ //material
|
|
|
+ const curveMaterialX = new LineBasicMaterial( { color: 0xff8080, fog: false, transparent: true, opacity: 0.6 } );
|
|
|
+ const curveMaterialY = new LineBasicMaterial( { color: 0x80ff80, fog: false, transparent: true, opacity: 0.6 } );
|
|
|
+ const curveMaterialZ = new LineBasicMaterial( { color: 0x8080ff, fog: false, transparent: true, opacity: 0.6 } );
|
|
|
|
|
|
- if ( mouse == 'WHEEL' ) {
|
|
|
+ //line
|
|
|
+ const gizmoX = new Line( curveGeometry, curveMaterialX );
|
|
|
+ const gizmoY = new Line( curveGeometry, curveMaterialY );
|
|
|
+ const gizmoZ = new Line( curveGeometry, curveMaterialZ );
|
|
|
|
|
|
- if ( operation != 'ZOOM' && operation != 'FOV' ) {
|
|
|
+ const rotation = Math.PI * 0.5;
|
|
|
+ gizmoX.rotation.x = rotation;
|
|
|
+ gizmoY.rotation.y = rotation;
|
|
|
|
|
|
- //cannot associate 2D operation to 1D input
|
|
|
- return false;
|
|
|
|
|
|
- }
|
|
|
+ //setting state
|
|
|
+ this._gizmoMatrixState0.identity().setPosition( tbCenter );
|
|
|
+ this._gizmoMatrixState.copy( this._gizmoMatrixState0 );
|
|
|
|
|
|
- }
|
|
|
+ if ( this.camera.zoom !== 1 ) {
|
|
|
|
|
|
- switch ( operation ) {
|
|
|
+ //adapt gizmos size to camera zoom
|
|
|
+ const size = 1 / this.camera.zoom;
|
|
|
+ this._scaleMatrix.makeScale( size, size, size );
|
|
|
+ this._translationMatrix.makeTranslation( - tbCenter.x, - tbCenter.y, - tbCenter.z );
|
|
|
|
|
|
- case 'PAN':
|
|
|
+ this._gizmoMatrixState.premultiply( this._translationMatrix ).premultiply( this._scaleMatrix );
|
|
|
+ this._translationMatrix.makeTranslation( tbCenter.x, tbCenter.y, tbCenter.z );
|
|
|
+ this._gizmoMatrixState.premultiply( this._translationMatrix );
|
|
|
|
|
|
- state = STATE.PAN;
|
|
|
- break;
|
|
|
+ }
|
|
|
|
|
|
- case 'ROTATE':
|
|
|
+ this._gizmoMatrixState.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
|
|
|
|
|
|
- state = STATE.ROTATE;
|
|
|
- break;
|
|
|
+ //
|
|
|
|
|
|
- case 'ZOOM':
|
|
|
+ this._gizmos.traverse( function ( object ) {
|
|
|
|
|
|
- state = STATE.SCALE;
|
|
|
- break;
|
|
|
+ if ( object.isLine ) {
|
|
|
|
|
|
- case 'FOV':
|
|
|
+ object.geometry.dispose();
|
|
|
+ object.material.dispose();
|
|
|
|
|
|
- state = STATE.FOV;
|
|
|
- break;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ } );
|
|
|
|
|
|
- const action = {
|
|
|
+ this._gizmos.clear();
|
|
|
|
|
|
- operation: operation,
|
|
|
- mouse: mouse,
|
|
|
- key: key,
|
|
|
- state: state
|
|
|
+ //
|
|
|
|
|
|
- };
|
|
|
+ this._gizmos.add( gizmoX );
|
|
|
+ this._gizmos.add( gizmoY );
|
|
|
+ this._gizmos.add( gizmoZ );
|
|
|
|
|
|
- for ( let i = 0; i < this.mouseActions.length; i ++ ) {
|
|
|
+ }
|
|
|
|
|
|
- if ( this.mouseActions[ i ].mouse == action.mouse && this.mouseActions[ i ].key == action.key ) {
|
|
|
+ /**
|
|
|
+ * Perform animation for focus operation
|
|
|
+ * @param {Number} time Instant in which this function is called as performance.now()
|
|
|
+ * @param {Vector3} point Point of interest for focus operation
|
|
|
+ * @param {Matrix4} cameraMatrix Camera matrix
|
|
|
+ * @param {Matrix4} gizmoMatrix Gizmos matrix
|
|
|
+ */
|
|
|
+ onFocusAnim( time, point, cameraMatrix, gizmoMatrix ) {
|
|
|
|
|
|
- this.mouseActions.splice( i, 1, action );
|
|
|
- return true;
|
|
|
+ if ( this._timeStart == - 1 ) {
|
|
|
|
|
|
- }
|
|
|
+ //animation start
|
|
|
+ this._timeStart = time;
|
|
|
|
|
|
}
|
|
|
|
|
|
- this.mouseActions.push( action );
|
|
|
- return true;
|
|
|
+ if ( this._state == STATE.ANIMATION_FOCUS ) {
|
|
|
|
|
|
- };
|
|
|
+ const deltaTime = time - this._timeStart;
|
|
|
+ const animTime = deltaTime / this.focusAnimationTime;
|
|
|
|
|
|
- /**
|
|
|
- * Remove a mouse action by specifying its mouse/key combination
|
|
|
- * @param {*} mouse A mouse button (0, 1, 2) or 'WHEEL' for wheel notches
|
|
|
- * @param {*} key The keyboard modifier ('CTRL', 'SHIFT') or null if key is not needed
|
|
|
- * @returns {Boolean} True if the operation has been succesfully removed, false otherwise
|
|
|
- */
|
|
|
- unsetMouseAction = ( mouse, key = null ) => {
|
|
|
+ this._gizmoMatrixState.copy( gizmoMatrix );
|
|
|
|
|
|
- for ( let i = 0; i < this.mouseActions.length; i ++ ) {
|
|
|
+ if ( animTime >= 1 ) {
|
|
|
|
|
|
- if ( this.mouseActions[ i ].mouse == mouse && this.mouseActions[ i ].key == key ) {
|
|
|
+ //animation end
|
|
|
|
|
|
- this.mouseActions.splice( i, 1 );
|
|
|
- return true;
|
|
|
+ this._gizmoMatrixState.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
|
|
|
|
|
|
- }
|
|
|
+ this.focus( point, this.scaleFactor );
|
|
|
|
|
|
- }
|
|
|
+ this._timeStart = - 1;
|
|
|
+ this.updateTbState( STATE.IDLE, false );
|
|
|
+ this.activateGizmos( false );
|
|
|
|
|
|
- return false;
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- };
|
|
|
+ } else {
|
|
|
|
|
|
- /**
|
|
|
- * Return the operation associated to a mouse/keyboard combination
|
|
|
- * @param {*} mouse A mouse button (0, 1, 2) or 'WHEEL' for wheel notches
|
|
|
- * @param {*} key The keyboard modifier ('CTRL', 'SHIFT') or null if key is not needed
|
|
|
- * @returns The operation if it has been found, null otherwise
|
|
|
- */
|
|
|
- getOpFromAction = ( mouse, key ) => {
|
|
|
+ const amount = this.easeOutCubic( animTime );
|
|
|
+ const size = ( ( 1 - amount ) + ( this.scaleFactor * amount ) );
|
|
|
|
|
|
- let action;
|
|
|
+ this._gizmoMatrixState.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
|
|
|
+ this.focus( point, size, amount );
|
|
|
|
|
|
- for ( let i = 0; i < this.mouseActions.length; i ++ ) {
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
+ const self = this;
|
|
|
+ this._animationId = window.requestAnimationFrame( function ( t ) {
|
|
|
|
|
|
- action = this.mouseActions[ i ];
|
|
|
- if ( action.mouse == mouse && action.key == key ) {
|
|
|
+ self.onFocusAnim( t, point, cameraMatrix, gizmoMatrix.clone() );
|
|
|
|
|
|
- return action.operation;
|
|
|
+ } );
|
|
|
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
+ } else {
|
|
|
|
|
|
- if ( key != null ) {
|
|
|
+ //interrupt animation
|
|
|
|
|
|
- for ( let i = 0; i < this.mouseActions.length; i ++ ) {
|
|
|
+ this._animationId = - 1;
|
|
|
+ this._timeStart = - 1;
|
|
|
|
|
|
- action = this.mouseActions[ i ];
|
|
|
- if ( action.mouse == mouse && action.key == null ) {
|
|
|
+ }
|
|
|
|
|
|
- return action.operation;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * Perform animation for rotation operation
|
|
|
+ * @param {Number} time Instant in which this function is called as performance.now()
|
|
|
+ * @param {Vector3} rotationAxis Rotation axis
|
|
|
+ * @param {number} w0 Initial angular velocity
|
|
|
+ */
|
|
|
+ onRotationAnim( time, rotationAxis, w0 ) {
|
|
|
|
|
|
- }
|
|
|
+ if ( this._timeStart == - 1 ) {
|
|
|
+
|
|
|
+ //animation start
|
|
|
+ this._anglePrev = 0;
|
|
|
+ this._angleCurrent = 0;
|
|
|
+ this._timeStart = time;
|
|
|
|
|
|
}
|
|
|
|
|
|
- return null;
|
|
|
+ if ( this._state == STATE.ANIMATION_ROTATE ) {
|
|
|
|
|
|
- };
|
|
|
+ //w = w0 + alpha * t
|
|
|
+ const deltaTime = ( time - this._timeStart ) / 1000;
|
|
|
+ const w = w0 + ( ( - this.dampingFactor ) * deltaTime );
|
|
|
|
|
|
- /**
|
|
|
- * Get the operation associated to mouse and key combination and returns the corresponding FSA state
|
|
|
- * @param {Number} mouse Mouse button
|
|
|
- * @param {String} key Keyboard modifier
|
|
|
- * @returns The FSA state obtained from the operation associated to mouse/keyboard combination
|
|
|
- */
|
|
|
- getOpStateFromAction = ( mouse, key ) => {
|
|
|
+ if ( w > 0 ) {
|
|
|
|
|
|
- let action;
|
|
|
+ //tetha = 0.5 * alpha * t^2 + w0 * t + tetha0
|
|
|
+ this._angleCurrent = 0.5 * ( - this.dampingFactor ) * Math.pow( deltaTime, 2 ) + w0 * deltaTime + 0;
|
|
|
+ this.applyTransformMatrix( this.rotate( rotationAxis, this._angleCurrent ) );
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
+ const self = this;
|
|
|
+ this._animationId = window.requestAnimationFrame( function ( t ) {
|
|
|
|
|
|
- for ( let i = 0; i < this.mouseActions.length; i ++ ) {
|
|
|
+ self.onRotationAnim( t, rotationAxis, w0 );
|
|
|
|
|
|
- action = this.mouseActions[ i ];
|
|
|
- if ( action.mouse == mouse && action.key == key ) {
|
|
|
+ } );
|
|
|
|
|
|
- return action.state;
|
|
|
+ } else {
|
|
|
|
|
|
- }
|
|
|
+ this._animationId = - 1;
|
|
|
+ this._timeStart = - 1;
|
|
|
|
|
|
- }
|
|
|
+ this.updateTbState( STATE.IDLE, false );
|
|
|
+ this.activateGizmos( false );
|
|
|
|
|
|
- if ( key != null ) {
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- for ( let i = 0; i < this.mouseActions.length; i ++ ) {
|
|
|
+ }
|
|
|
|
|
|
- action = this.mouseActions[ i ];
|
|
|
- if ( action.mouse == mouse && action.key == null ) {
|
|
|
+ } else {
|
|
|
|
|
|
- return action.state;
|
|
|
+ //interrupt animation
|
|
|
|
|
|
- }
|
|
|
+ this._animationId = - 1;
|
|
|
+ this._timeStart = - 1;
|
|
|
+
|
|
|
+ if ( this._state != STATE.ROTATE ) {
|
|
|
+
|
|
|
+ this.activateGizmos( false );
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
- return null;
|
|
|
+ }
|
|
|
|
|
|
- };
|
|
|
|
|
|
/**
|
|
|
- * Calculate the angle between two pointers
|
|
|
- * @param {PointerEvent} p1
|
|
|
- * @param {PointerEvent} p2
|
|
|
- * @returns {Number} The angle between two pointers in degrees
|
|
|
+ * Perform pan operation moving camera between two points
|
|
|
+ * @param {Vector3} p0 Initial point
|
|
|
+ * @param {Vector3} p1 Ending point
|
|
|
+ * @param {Boolean} adjust If movement should be adjusted considering camera distance (Perspective only)
|
|
|
*/
|
|
|
- getAngle = ( p1, p2 ) => {
|
|
|
+ pan( p0, p1, adjust = false ) {
|
|
|
|
|
|
- return Math.atan2( p2.clientY - p1.clientY, p2.clientX - p1.clientX ) * 180 / Math.PI;
|
|
|
+ const movement = p0.clone().sub( p1 );
|
|
|
|
|
|
- };
|
|
|
+ if ( this.camera.isOrthographicCamera ) {
|
|
|
|
|
|
- /**
|
|
|
- * Update a PointerEvent inside current pointerevents array
|
|
|
- * @param {PointerEvent} event
|
|
|
- */
|
|
|
- updateTouchEvent = ( event ) => {
|
|
|
+ //adjust movement amount
|
|
|
+ movement.multiplyScalar( 1 / this.camera.zoom );
|
|
|
|
|
|
- for ( let i = 0; i < this._touchCurrent.length; i ++ ) {
|
|
|
+ } else if ( this.camera.isPerspectiveCamera && adjust ) {
|
|
|
|
|
|
- if ( this._touchCurrent[ i ].pointerId == event.pointerId ) {
|
|
|
+ //adjust movement amount
|
|
|
+ this._v3_1.setFromMatrixPosition( this._cameraMatrixState0 ); //camera's initial position
|
|
|
+ this._v3_2.setFromMatrixPosition( this._gizmoMatrixState0 ); //gizmo's initial position
|
|
|
+ const distanceFactor = this._v3_1.distanceTo( this._v3_2 ) / this.camera.position.distanceTo( this._gizmos.position );
|
|
|
+ movement.multiplyScalar( 1 / distanceFactor );
|
|
|
|
|
|
- this._touchCurrent.splice( i, 1, event );
|
|
|
- break;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ this._v3_1.set( movement.x, movement.y, 0 ).applyQuaternion( this.camera.quaternion );
|
|
|
|
|
|
- }
|
|
|
+ this._m4_1.makeTranslation( this._v3_1.x, this._v3_1.y, this._v3_1.z );
|
|
|
|
|
|
- };
|
|
|
+ this.setTransformationMatrices( this._m4_1, this._m4_1 );
|
|
|
+ return _transformation;
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
- * Apply a transformation matrix, to the camera and gizmos
|
|
|
- * @param {Object} transformation Object containing matrices to apply to camera and gizmos
|
|
|
+ * Reset trackball
|
|
|
*/
|
|
|
- applyTransformMatrix( transformation ) {
|
|
|
+ reset() {
|
|
|
|
|
|
- if ( transformation.camera != null ) {
|
|
|
+ this.camera.zoom = this._zoom0;
|
|
|
|
|
|
- this._m4_1.copy( this._cameraMatrixState ).premultiply( transformation.camera );
|
|
|
- this._m4_1.decompose( this.camera.position, this.camera.quaternion, this.camera.scale );
|
|
|
- this.camera.updateMatrix();
|
|
|
+ if ( this.camera.isPerspectiveCamera ) {
|
|
|
|
|
|
- //update camera up vector
|
|
|
- if ( this._state == STATE.ROTATE || this._state == STATE.ZROTATE || this._state == STATE.ANIMATION_ROTATE ) {
|
|
|
+ this.camera.fov = this._fov0;
|
|
|
|
|
|
- this.camera.up.copy( this._upState ).applyQuaternion( this.camera.quaternion );
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ this.camera.near = this._nearPos;
|
|
|
+ this.camera.far = this._farPos;
|
|
|
+ this._cameraMatrixState.copy( this._cameraMatrixState0 );
|
|
|
+ this._cameraMatrixState.decompose( this.camera.position, this.camera.quaternion, this.camera.scale );
|
|
|
+ this.camera.up.copy( this._up0 );
|
|
|
|
|
|
- }
|
|
|
+ this.camera.updateMatrix();
|
|
|
+ this.camera.updateProjectionMatrix();
|
|
|
|
|
|
- if ( transformation.gizmos != null ) {
|
|
|
+ this._gizmoMatrixState.copy( this._gizmoMatrixState0 );
|
|
|
+ this._gizmoMatrixState0.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
|
|
|
+ this._gizmos.updateMatrix();
|
|
|
|
|
|
- this._m4_1.copy( this._gizmoMatrixState ).premultiply( transformation.gizmos );
|
|
|
- this._m4_1.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
|
|
|
- this._gizmos.updateMatrix();
|
|
|
+ this._tbRadius = this.calculateTbRadius( this.camera );
|
|
|
+ this.makeGizmos( this._gizmos.position, this._tbRadius );
|
|
|
|
|
|
- }
|
|
|
+ this.camera.lookAt( this._gizmos.position );
|
|
|
|
|
|
- if ( this._state == STATE.SCALE || this._state == STATE.FOCUS || this._state == STATE.ANIMATION_FOCUS ) {
|
|
|
+ this.updateTbState( STATE.IDLE, false );
|
|
|
|
|
|
- this._tbRadius = this.calculateTbRadius( this.camera );
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- if ( this.adjustNearFar ) {
|
|
|
+ }
|
|
|
|
|
|
- const cameraDistance = this.camera.position.distanceTo( this._gizmos.position );
|
|
|
+ /**
|
|
|
+ * Rotate the camera around an axis passing by trackball's center
|
|
|
+ * @param {Vector3} axis Rotation axis
|
|
|
+ * @param {number} angle Angle in radians
|
|
|
+ * @returns {Object} Object with 'camera' field containing transformation matrix resulting from the operation to be applied to the camera
|
|
|
+ */
|
|
|
+ rotate( axis, angle ) {
|
|
|
|
|
|
- const bb = new Box3();
|
|
|
- bb.setFromObject( this._gizmos );
|
|
|
- const sphere = new Sphere();
|
|
|
- bb.getBoundingSphere( sphere );
|
|
|
+ const point = this._gizmos.position; //rotation center
|
|
|
+ this._translationMatrix.makeTranslation( - point.x, - point.y, - point.z );
|
|
|
+ this._rotationMatrix.makeRotationAxis( axis, - angle );
|
|
|
|
|
|
- const adjustedNearPosition = Math.max( this._nearPos0, sphere.radius + sphere.center.length() );
|
|
|
- const regularNearPosition = cameraDistance - this._initialNear;
|
|
|
+ //rotate camera
|
|
|
+ this._m4_1.makeTranslation( point.x, point.y, point.z );
|
|
|
+ this._m4_1.multiply( this._rotationMatrix );
|
|
|
+ this._m4_1.multiply( this._translationMatrix );
|
|
|
|
|
|
- const minNearPos = Math.min( adjustedNearPosition, regularNearPosition );
|
|
|
- this.camera.near = cameraDistance - minNearPos;
|
|
|
+ this.setTransformationMatrices( this._m4_1 );
|
|
|
|
|
|
+ return _transformation;
|
|
|
|
|
|
- const adjustedFarPosition = Math.min( this._farPos0, - sphere.radius + sphere.center.length() );
|
|
|
- const regularFarPosition = cameraDistance - this._initialFar;
|
|
|
+ }
|
|
|
|
|
|
- const minFarPos = Math.min( adjustedFarPosition, regularFarPosition );
|
|
|
- this.camera.far = cameraDistance - minFarPos;
|
|
|
+ copyState() {
|
|
|
|
|
|
- this.camera.updateProjectionMatrix();
|
|
|
+ let state;
|
|
|
+ if ( this.camera.isOrthographicCamera ) {
|
|
|
|
|
|
- } else {
|
|
|
+ state = JSON.stringify( { arcballState: {
|
|
|
|
|
|
- let update = false;
|
|
|
+ cameraFar: this.camera.far,
|
|
|
+ cameraMatrix: this.camera.matrix,
|
|
|
+ cameraNear: this.camera.near,
|
|
|
+ cameraUp: this.camera.up,
|
|
|
+ cameraZoom: this.camera.zoom,
|
|
|
+ gizmoMatrix: this._gizmos.matrix
|
|
|
|
|
|
- if ( this.camera.near != this._initialNear ) {
|
|
|
+ } } );
|
|
|
|
|
|
- this.camera.near = this._initialNear;
|
|
|
- update = true;
|
|
|
+ } else if ( this.camera.isPerspectiveCamera ) {
|
|
|
|
|
|
- }
|
|
|
+ state = JSON.stringify( { arcballState: {
|
|
|
+ cameraFar: this.camera.far,
|
|
|
+ cameraFov: this.camera.fov,
|
|
|
+ cameraMatrix: this.camera.matrix,
|
|
|
+ cameraNear: this.camera.near,
|
|
|
+ cameraUp: this.camera.up,
|
|
|
+ cameraZoom: this.camera.zoom,
|
|
|
+ gizmoMatrix: this._gizmos.matrix
|
|
|
|
|
|
- if ( this.camera.far != this._initialFar ) {
|
|
|
+ } } );
|
|
|
|
|
|
- this.camera.far = this._initialFar;
|
|
|
- update = true;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ navigator.clipboard.writeText( state );
|
|
|
|
|
|
- if ( update ) {
|
|
|
+ }
|
|
|
|
|
|
- this.camera.updateProjectionMatrix();
|
|
|
+ pasteState() {
|
|
|
|
|
|
- }
|
|
|
+ const self = this;
|
|
|
+ navigator.clipboard.readText().then( function resolved( value ) {
|
|
|
|
|
|
- }
|
|
|
+ self.setStateFromJSON( value );
|
|
|
|
|
|
- }
|
|
|
+ } );
|
|
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * Calculate the angular speed
|
|
|
- * @param {Number} p0 Position at t0
|
|
|
- * @param {Number} p1 Position at t1
|
|
|
- * @param {Number} t0 Initial time in milliseconds
|
|
|
- * @param {Number} t1 Ending time in milliseconds
|
|
|
+ * Save the current state of the control. This can later be recover with .reset
|
|
|
*/
|
|
|
- calculateAngularSpeed = ( p0, p1, t0, t1 ) => {
|
|
|
+ saveState() {
|
|
|
|
|
|
- const s = p1 - p0;
|
|
|
- const t = ( t1 - t0 ) / 1000;
|
|
|
- if ( t == 0 ) {
|
|
|
+ this._cameraMatrixState0.copy( this.camera.matrix );
|
|
|
+ this._gizmoMatrixState0.copy( this._gizmos.matrix );
|
|
|
+ this._nearPos = this.camera.near;
|
|
|
+ this._farPos = this.camera.far;
|
|
|
+ this._zoom0 = this.camera.zoom;
|
|
|
+ this._up0.copy( this.camera.up );
|
|
|
|
|
|
- return 0;
|
|
|
+ if ( this.camera.isPerspectiveCamera ) {
|
|
|
|
|
|
- }
|
|
|
+ this._fov0 = this.camera.fov;
|
|
|
|
|
|
- return s / t;
|
|
|
+ }
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
- * Calculate the distance between two pointers
|
|
|
- * @param {PointerEvent} p0 The first pointer
|
|
|
- * @param {PointerEvent} p1 The second pointer
|
|
|
- * @returns {number} The distance between the two pointers
|
|
|
+ * Perform uniform scale operation around a given point
|
|
|
+ * @param {Number} size Scale factor
|
|
|
+ * @param {Vector3} point Point around which scale
|
|
|
+ * @param {Boolean} scaleGizmos If gizmos should be scaled (Perspective only)
|
|
|
+ * @returns {Object} Object with 'camera' and 'gizmo' fields containing transformation matrices resulting from the operation to be applied to the camera and gizmos
|
|
|
*/
|
|
|
- calculatePointersDistance = ( p0, p1 ) => {
|
|
|
+ scale( size, point, scaleGizmos = true ) {
|
|
|
|
|
|
- return Math.sqrt( Math.pow( p1.clientX - p0.clientX, 2 ) + Math.pow( p1.clientY - p0.clientY, 2 ) );
|
|
|
+ _scalePointTemp.copy( point );
|
|
|
+ let sizeInverse = 1 / size;
|
|
|
|
|
|
- };
|
|
|
+ if ( this.camera.isOrthographicCamera ) {
|
|
|
|
|
|
- /**
|
|
|
- * Calculate the rotation axis as the vector perpendicular between two vectors
|
|
|
- * @param {Vector3} vec1 The first vector
|
|
|
- * @param {Vector3} vec2 The second vector
|
|
|
- * @returns {Vector3} The normalized rotation axis
|
|
|
- */
|
|
|
- calculateRotationAxis = ( vec1, vec2 ) => {
|
|
|
+ //camera zoom
|
|
|
+ this.camera.zoom = this._zoomState;
|
|
|
+ this.camera.zoom *= size;
|
|
|
|
|
|
- this._rotationMatrix.extractRotation( this._cameraMatrixState );
|
|
|
- this._quat.setFromRotationMatrix( this._rotationMatrix );
|
|
|
+ //check min and max zoom
|
|
|
+ if ( this.camera.zoom > this.maxZoom ) {
|
|
|
|
|
|
- this._rotationAxis.crossVectors( vec1, vec2 ).applyQuaternion( this._quat );
|
|
|
- return this._rotationAxis.normalize().clone();
|
|
|
+ this.camera.zoom = this.maxZoom;
|
|
|
+ sizeInverse = this._zoomState / this.maxZoom;
|
|
|
|
|
|
- };
|
|
|
+ } else if ( this.camera.zoom < this.minZoom ) {
|
|
|
|
|
|
- /**
|
|
|
- * Calculate the trackball radius so that gizmo's diamater will be 2/3 of the minimum side of the camera frustum
|
|
|
- * @param {Camera} camera
|
|
|
- * @returns {Number} The trackball radius
|
|
|
- */
|
|
|
- calculateTbRadius = ( camera ) => {
|
|
|
+ this.camera.zoom = this.minZoom;
|
|
|
+ sizeInverse = this._zoomState / this.minZoom;
|
|
|
|
|
|
- const distance = camera.position.distanceTo( this._gizmos.position );
|
|
|
+ }
|
|
|
|
|
|
- if ( camera.type == 'PerspectiveCamera' ) {
|
|
|
+ this.camera.updateProjectionMatrix();
|
|
|
|
|
|
- const halfFovV = MathUtils.DEG2RAD * camera.fov * 0.5; //vertical fov/2 in radians
|
|
|
- const halfFovH = Math.atan( ( camera.aspect ) * Math.tan( halfFovV ) ); //horizontal fov/2 in radians
|
|
|
- return Math.tan( Math.min( halfFovV, halfFovH ) ) * distance * this.radiusFactor;
|
|
|
+ this._v3_1.setFromMatrixPosition( this._gizmoMatrixState ); //gizmos position
|
|
|
|
|
|
- } else if ( camera.type == 'OrthographicCamera' ) {
|
|
|
+ //scale gizmos so they appear in the same spot having the same dimension
|
|
|
+ this._scaleMatrix.makeScale( sizeInverse, sizeInverse, sizeInverse );
|
|
|
+ this._translationMatrix.makeTranslation( - this._v3_1.x, - this._v3_1.y, - this._v3_1.z );
|
|
|
|
|
|
- return Math.min( camera.top, camera.right ) * this.radiusFactor;
|
|
|
+ this._m4_2.makeTranslation( this._v3_1.x, this._v3_1.y, this._v3_1.z ).multiply( this._scaleMatrix );
|
|
|
+ this._m4_2.multiply( this._translationMatrix );
|
|
|
|
|
|
- }
|
|
|
|
|
|
- };
|
|
|
+ //move camera and gizmos to obtain pinch effect
|
|
|
+ _scalePointTemp.sub( this._v3_1 );
|
|
|
|
|
|
- /**
|
|
|
- * Focus operation consist of positioning the point of interest in front of the camera and a slightly zoom in
|
|
|
- * @param {Vector3} point The point of interest
|
|
|
- * @param {Number} size Scale factor
|
|
|
- * @param {Number} amount Amount of operation to be completed (used for focus animations, default is complete full operation)
|
|
|
- */
|
|
|
- focus = ( point, size, amount = 1 ) => {
|
|
|
+ const amount = _scalePointTemp.clone().multiplyScalar( sizeInverse );
|
|
|
+ _scalePointTemp.sub( amount );
|
|
|
|
|
|
- //move center of camera (along with gizmos) towards point of interest
|
|
|
- _offset.copy( point ).sub( this._gizmos.position ).multiplyScalar( amount );
|
|
|
- this._translationMatrix.makeTranslation( _offset.x, _offset.y, _offset.z );
|
|
|
+ this._m4_1.makeTranslation( _scalePointTemp.x, _scalePointTemp.y, _scalePointTemp.z );
|
|
|
+ this._m4_2.premultiply( this._m4_1 );
|
|
|
|
|
|
- _gizmoMatrixStateTemp.copy( this._gizmoMatrixState );
|
|
|
- this._gizmoMatrixState.premultiply( this._translationMatrix );
|
|
|
- this._gizmoMatrixState.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
|
|
|
+ this.setTransformationMatrices( this._m4_1, this._m4_2 );
|
|
|
+ return _transformation;
|
|
|
|
|
|
- _cameraMatrixStateTemp.copy( this._cameraMatrixState );
|
|
|
- this._cameraMatrixState.premultiply( this._translationMatrix );
|
|
|
- this._cameraMatrixState.decompose( this.camera.position, this.camera.quaternion, this.camera.scale );
|
|
|
+ } else if ( this.camera.isPerspectiveCamera ) {
|
|
|
|
|
|
- //apply zoom
|
|
|
- if ( this.enableZoom ) {
|
|
|
+ this._v3_1.setFromMatrixPosition( this._cameraMatrixState );
|
|
|
+ this._v3_2.setFromMatrixPosition( this._gizmoMatrixState );
|
|
|
|
|
|
- this.applyTransformMatrix( this.scale( size, this._gizmos.position ) );
|
|
|
+ //move camera
|
|
|
+ let distance = this._v3_1.distanceTo( _scalePointTemp );
|
|
|
+ let amount = distance - ( distance * sizeInverse );
|
|
|
|
|
|
- }
|
|
|
+ //check min and max distance
|
|
|
+ const newDistance = distance - amount;
|
|
|
+ if ( newDistance < this.minDistance ) {
|
|
|
|
|
|
- this._gizmoMatrixState.copy( _gizmoMatrixStateTemp );
|
|
|
- this._cameraMatrixState.copy( _cameraMatrixStateTemp );
|
|
|
+ sizeInverse = this.minDistance / distance;
|
|
|
+ amount = distance - ( distance * sizeInverse );
|
|
|
|
|
|
- };
|
|
|
+ } else if ( newDistance > this.maxDistance ) {
|
|
|
|
|
|
- /**
|
|
|
- * Draw a grid and add it to the scene
|
|
|
- */
|
|
|
- drawGrid = () => {
|
|
|
+ sizeInverse = this.maxDistance / distance;
|
|
|
+ amount = distance - ( distance * sizeInverse );
|
|
|
|
|
|
- if ( this.scene != null ) {
|
|
|
+ }
|
|
|
|
|
|
- const color = 0x888888;
|
|
|
- const multiplier = 3;
|
|
|
- let size, divisions, maxLength, tick;
|
|
|
+ _offset.copy( _scalePointTemp ).sub( this._v3_1 ).normalize().multiplyScalar( amount );
|
|
|
|
|
|
- if ( this.camera.isOrthographicCamera ) {
|
|
|
+ this._m4_1.makeTranslation( _offset.x, _offset.y, _offset.z );
|
|
|
|
|
|
- const width = this.camera.right - this.camera.left;
|
|
|
- const height = this.camera.bottom - this.camera.top;
|
|
|
|
|
|
- maxLength = Math.max( width, height );
|
|
|
- tick = maxLength / 20;
|
|
|
+ if ( scaleGizmos ) {
|
|
|
|
|
|
- size = maxLength / this.camera.zoom * multiplier;
|
|
|
- divisions = size / tick * this.camera.zoom;
|
|
|
+ //scale gizmos so they appear in the same spot having the same dimension
|
|
|
+ const pos = this._v3_2;
|
|
|
|
|
|
- } else if ( this.camera.isPerspectiveCamera ) {
|
|
|
+ distance = pos.distanceTo( _scalePointTemp );
|
|
|
+ amount = distance - ( distance * sizeInverse );
|
|
|
+ _offset.copy( _scalePointTemp ).sub( this._v3_2 ).normalize().multiplyScalar( amount );
|
|
|
|
|
|
- const distance = this.camera.position.distanceTo( this._gizmos.position );
|
|
|
- const halfFovV = MathUtils.DEG2RAD * this.camera.fov * 0.5;
|
|
|
- const halfFovH = Math.atan( ( this.camera.aspect ) * Math.tan( halfFovV ) );
|
|
|
+ this._translationMatrix.makeTranslation( pos.x, pos.y, pos.z );
|
|
|
+ this._scaleMatrix.makeScale( sizeInverse, sizeInverse, sizeInverse );
|
|
|
|
|
|
- maxLength = Math.tan( Math.max( halfFovV, halfFovH ) ) * distance * 2;
|
|
|
- tick = maxLength / 20;
|
|
|
+ this._m4_2.makeTranslation( _offset.x, _offset.y, _offset.z ).multiply( this._translationMatrix );
|
|
|
+ this._m4_2.multiply( this._scaleMatrix );
|
|
|
|
|
|
- size = maxLength * multiplier;
|
|
|
- divisions = size / tick;
|
|
|
+ this._translationMatrix.makeTranslation( - pos.x, - pos.y, - pos.z );
|
|
|
|
|
|
- }
|
|
|
+ this._m4_2.multiply( this._translationMatrix );
|
|
|
+ this.setTransformationMatrices( this._m4_1, this._m4_2 );
|
|
|
|
|
|
- if ( this._grid == null ) {
|
|
|
|
|
|
- this._grid = new GridHelper( size, divisions, color, color );
|
|
|
- this._grid.position.copy( this._gizmos.position );
|
|
|
- this._gridPosition.copy( this._grid.position );
|
|
|
- this._grid.quaternion.copy( this.camera.quaternion );
|
|
|
- this._grid.rotateX( Math.PI * 0.5 );
|
|
|
+ } else {
|
|
|
|
|
|
- this.scene.add( this._grid );
|
|
|
+ this.setTransformationMatrices( this._m4_1 );
|
|
|
|
|
|
}
|
|
|
|
|
|
+ return _transformation;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
- * Remove all listeners, stop animations and clean scene
|
|
|
+ * Set camera fov
|
|
|
+ * @param {Number} value fov to be setted
|
|
|
*/
|
|
|
- dispose = () => {
|
|
|
+ setFov( value ) {
|
|
|
|
|
|
- if ( this._animationId != - 1 ) {
|
|
|
+ if ( this.camera.isPerspectiveCamera ) {
|
|
|
|
|
|
- window.cancelAnimationFrame( this._animationId );
|
|
|
+ this.camera.fov = MathUtils.clamp( value, this.minFov, this.maxFov );
|
|
|
+ this.camera.updateProjectionMatrix();
|
|
|
|
|
|
}
|
|
|
|
|
|
- this.domElement.removeEventListener( 'pointerdown', this.onPointerDown );
|
|
|
- this.domElement.removeEventListener( 'pointercancel', this.onPointerCancel );
|
|
|
- this.domElement.removeEventListener( 'wheel', this.onWheel );
|
|
|
- this.domElement.removeEventListener( 'contextmenu', this.onContextMenu );
|
|
|
+ }
|
|
|
|
|
|
- window.removeEventListener( 'pointermove', this.onPointerMove );
|
|
|
- window.removeEventListener( 'pointerup', this.onPointerUp );
|
|
|
+ /**
|
|
|
+ * Set values in transformation object
|
|
|
+ * @param {Matrix4} camera Transformation to be applied to the camera
|
|
|
+ * @param {Matrix4} gizmos Transformation to be applied to gizmos
|
|
|
+ */
|
|
|
+ setTransformationMatrices( camera = null, gizmos = null ) {
|
|
|
|
|
|
- window.removeEventListener( 'resize', this.onWindowResize );
|
|
|
+ if ( camera != null ) {
|
|
|
|
|
|
- if ( this.scene !== null ) this.scene.remove( this._gizmos );
|
|
|
- this.disposeGrid();
|
|
|
+ if ( _transformation.camera != null ) {
|
|
|
|
|
|
- };
|
|
|
+ _transformation.camera.copy( camera );
|
|
|
|
|
|
- /**
|
|
|
- * remove the grid from the scene
|
|
|
- */
|
|
|
- disposeGrid = () => {
|
|
|
+ } else {
|
|
|
|
|
|
- if ( this._grid != null && this.scene != null ) {
|
|
|
+ _transformation.camera = camera.clone();
|
|
|
|
|
|
- this.scene.remove( this._grid );
|
|
|
- this._grid = null;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ } else {
|
|
|
|
|
|
- };
|
|
|
+ _transformation.camera = null;
|
|
|
|
|
|
- /**
|
|
|
- * Compute the easing out cubic function for ease out effect in animation
|
|
|
- * @param {Number} t The absolute progress of the animation in the bound of 0 (beginning of the) and 1 (ending of animation)
|
|
|
- * @returns {Number} Result of easing out cubic at time t
|
|
|
- */
|
|
|
- easeOutCubic = ( t ) => {
|
|
|
+ }
|
|
|
|
|
|
- return 1 - Math.pow( 1 - t, 3 );
|
|
|
+ if ( gizmos != null ) {
|
|
|
|
|
|
- };
|
|
|
+ if ( _transformation.gizmos != null ) {
|
|
|
|
|
|
- /**
|
|
|
- * Make rotation gizmos more or less visible
|
|
|
- * @param {Boolean} isActive If true, make gizmos more visible
|
|
|
- */
|
|
|
- activateGizmos = ( isActive ) => {
|
|
|
+ _transformation.gizmos.copy( gizmos );
|
|
|
|
|
|
- const gizmoX = this._gizmos.children[ 0 ];
|
|
|
- const gizmoY = this._gizmos.children[ 1 ];
|
|
|
- const gizmoZ = this._gizmos.children[ 2 ];
|
|
|
+ } else {
|
|
|
|
|
|
- if ( isActive ) {
|
|
|
+ _transformation.gizmos = gizmos.clone();
|
|
|
|
|
|
- gizmoX.material.setValues( { opacity: 1 } );
|
|
|
- gizmoY.material.setValues( { opacity: 1 } );
|
|
|
- gizmoZ.material.setValues( { opacity: 1 } );
|
|
|
+ }
|
|
|
|
|
|
} else {
|
|
|
|
|
|
- gizmoX.material.setValues( { opacity: 0.6 } );
|
|
|
- gizmoY.material.setValues( { opacity: 0.6 } );
|
|
|
- gizmoZ.material.setValues( { opacity: 0.6 } );
|
|
|
+ _transformation.gizmos = null;
|
|
|
|
|
|
}
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
- * Calculate the cursor position in NDC
|
|
|
- * @param {number} x Cursor horizontal coordinate within the canvas
|
|
|
- * @param {number} y Cursor vertical coordinate within the canvas
|
|
|
- * @param {HTMLElement} canvas The canvas where the renderer draws its output
|
|
|
- * @returns {Vector2} Cursor normalized position inside the canvas
|
|
|
+ * Rotate camera around its direction axis passing by a given point by a given angle
|
|
|
+ * @param {Vector3} point The point where the rotation axis is passing trough
|
|
|
+ * @param {Number} angle Angle in radians
|
|
|
+ * @returns The computed transormation matix
|
|
|
*/
|
|
|
- getCursorNDC = ( cursorX, cursorY, canvas ) => {
|
|
|
+ zRotate( point, angle ) {
|
|
|
|
|
|
- const canvasRect = canvas.getBoundingClientRect();
|
|
|
- this._v2_1.setX( ( ( cursorX - canvasRect.left ) / canvasRect.width ) * 2 - 1 );
|
|
|
- this._v2_1.setY( ( ( canvasRect.bottom - cursorY ) / canvasRect.height ) * 2 - 1 );
|
|
|
- return this._v2_1.clone();
|
|
|
+ this._rotationMatrix.makeRotationAxis( this._rotationAxis, angle );
|
|
|
+ this._translationMatrix.makeTranslation( - point.x, - point.y, - point.z );
|
|
|
|
|
|
- };
|
|
|
+ this._m4_1.makeTranslation( point.x, point.y, point.z );
|
|
|
+ this._m4_1.multiply( this._rotationMatrix );
|
|
|
+ this._m4_1.multiply( this._translationMatrix );
|
|
|
|
|
|
- /**
|
|
|
- * Calculate the cursor position inside the canvas x/y coordinates with the origin being in the center of the canvas
|
|
|
- * @param {Number} x Cursor horizontal coordinate within the canvas
|
|
|
- * @param {Number} y Cursor vertical coordinate within the canvas
|
|
|
- * @param {HTMLElement} canvas The canvas where the renderer draws its output
|
|
|
- * @returns {Vector2} Cursor position inside the canvas
|
|
|
- */
|
|
|
- getCursorPosition = ( cursorX, cursorY, canvas ) => {
|
|
|
+ this._v3_1.setFromMatrixPosition( this._gizmoMatrixState ).sub( point ); //vector from rotation center to gizmos position
|
|
|
+ this._v3_2.copy( this._v3_1 ).applyAxisAngle( this._rotationAxis, angle ); //apply rotation
|
|
|
+ this._v3_2.sub( this._v3_1 );
|
|
|
|
|
|
- this._v2_1.copy( this.getCursorNDC( cursorX, cursorY, canvas ) );
|
|
|
- this._v2_1.x *= ( this.camera.right - this.camera.left ) * 0.5;
|
|
|
- this._v2_1.y *= ( this.camera.top - this.camera.bottom ) * 0.5;
|
|
|
- return this._v2_1.clone();
|
|
|
+ this._m4_2.makeTranslation( this._v3_2.x, this._v3_2.y, this._v3_2.z );
|
|
|
|
|
|
- };
|
|
|
+ this.setTransformationMatrices( this._m4_1, this._m4_2 );
|
|
|
+ return _transformation;
|
|
|
|
|
|
- /**
|
|
|
- * Set the camera to be controlled
|
|
|
- * @param {Camera} camera The virtual camera to be controlled
|
|
|
- */
|
|
|
- setCamera = ( camera ) => {
|
|
|
+ }
|
|
|
|
|
|
- camera.lookAt( this.target );
|
|
|
- camera.updateMatrix();
|
|
|
|
|
|
- //setting state
|
|
|
- if ( camera.type == 'PerspectiveCamera' ) {
|
|
|
+ getRaycaster() {
|
|
|
|
|
|
- this._fov0 = camera.fov;
|
|
|
- this._fovState = camera.fov;
|
|
|
+ return _raycaster;
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- this._cameraMatrixState0.copy( camera.matrix );
|
|
|
- this._cameraMatrixState.copy( this._cameraMatrixState0 );
|
|
|
- this._cameraProjectionState.copy( camera.projectionMatrix );
|
|
|
- this._zoom0 = camera.zoom;
|
|
|
- this._zoomState = this._zoom0;
|
|
|
|
|
|
- this._initialNear = camera.near;
|
|
|
- this._nearPos0 = camera.position.distanceTo( this.target ) - camera.near;
|
|
|
- this._nearPos = this._initialNear;
|
|
|
+ /**
|
|
|
+ * Unproject the cursor on the 3D object surface
|
|
|
+ * @param {Vector2} cursor Cursor coordinates in NDC
|
|
|
+ * @param {Camera} camera Virtual camera
|
|
|
+ * @returns {Vector3} The point of intersection with the model, if exist, null otherwise
|
|
|
+ */
|
|
|
+ unprojectOnObj( cursor, camera ) {
|
|
|
|
|
|
- this._initialFar = camera.far;
|
|
|
- this._farPos0 = camera.position.distanceTo( this.target ) - camera.far;
|
|
|
- this._farPos = this._initialFar;
|
|
|
+ const raycaster = this.getRaycaster();
|
|
|
+ raycaster.near = camera.near;
|
|
|
+ raycaster.far = camera.far;
|
|
|
+ raycaster.setFromCamera( cursor, camera );
|
|
|
|
|
|
- this._up0.copy( camera.up );
|
|
|
- this._upState.copy( camera.up );
|
|
|
+ const intersect = raycaster.intersectObjects( this.scene.children, true );
|
|
|
|
|
|
- this.camera = camera;
|
|
|
- this.camera.updateProjectionMatrix();
|
|
|
+ for ( let i = 0; i < intersect.length; i ++ ) {
|
|
|
|
|
|
- //making gizmos
|
|
|
- this._tbRadius = this.calculateTbRadius( camera );
|
|
|
- this.makeGizmos( this.target, this._tbRadius );
|
|
|
+ if ( intersect[ i ].object.uuid != this._gizmos.uuid && intersect[ i ].face != null ) {
|
|
|
|
|
|
- };
|
|
|
+ return intersect[ i ].point.clone();
|
|
|
|
|
|
- /**
|
|
|
- * Set gizmos visibility
|
|
|
- * @param {Boolean} value Value of gizmos visibility
|
|
|
- */
|
|
|
- setGizmosVisible( value ) {
|
|
|
+ }
|
|
|
|
|
|
- this._gizmos.visible = value;
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ }
|
|
|
+
|
|
|
+ return null;
|
|
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * Set gizmos radius factor and redraws gizmos
|
|
|
- * @param {Float} value Value of radius factor
|
|
|
+ * Unproject the cursor on the trackball surface
|
|
|
+ * @param {Camera} camera The virtual camera
|
|
|
+ * @param {Number} cursorX Cursor horizontal coordinate on screen
|
|
|
+ * @param {Number} cursorY Cursor vertical coordinate on screen
|
|
|
+ * @param {HTMLElement} canvas The canvas where the renderer draws its output
|
|
|
+ * @param {number} tbRadius The trackball radius
|
|
|
+ * @returns {Vector3} The unprojected point on the trackball surface
|
|
|
*/
|
|
|
- setTbRadius( value ) {
|
|
|
-
|
|
|
- this.radiusFactor = value;
|
|
|
- this._tbRadius = this.calculateTbRadius( this.camera );
|
|
|
-
|
|
|
- const curve = new EllipseCurve( 0, 0, this._tbRadius, this._tbRadius );
|
|
|
- const points = curve.getPoints( this._curvePts );
|
|
|
- const curveGeometry = new BufferGeometry().setFromPoints( points );
|
|
|
+ unprojectOnTbSurface( camera, cursorX, cursorY, canvas, tbRadius ) {
|
|
|
|
|
|
+ if ( camera.type == 'OrthographicCamera' ) {
|
|
|
|
|
|
- for ( const gizmo in this._gizmos.children ) {
|
|
|
+ this._v2_1.copy( this.getCursorPosition( cursorX, cursorY, canvas ) );
|
|
|
+ this._v3_1.set( this._v2_1.x, this._v2_1.y, 0 );
|
|
|
|
|
|
- this._gizmos.children[ gizmo ].geometry = curveGeometry;
|
|
|
+ const x2 = Math.pow( this._v2_1.x, 2 );
|
|
|
+ const y2 = Math.pow( this._v2_1.y, 2 );
|
|
|
+ const r2 = Math.pow( this._tbRadius, 2 );
|
|
|
|
|
|
- }
|
|
|
+ if ( x2 + y2 <= r2 * 0.5 ) {
|
|
|
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ //intersection with sphere
|
|
|
+ this._v3_1.setZ( Math.sqrt( r2 - ( x2 + y2 ) ) );
|
|
|
|
|
|
- }
|
|
|
+ } else {
|
|
|
|
|
|
- /**
|
|
|
- * Creates the rotation gizmos matching trackball center and radius
|
|
|
- * @param {Vector3} tbCenter The trackball center
|
|
|
- * @param {number} tbRadius The trackball radius
|
|
|
- */
|
|
|
- makeGizmos = ( tbCenter, tbRadius ) => {
|
|
|
+ //intersection with hyperboloid
|
|
|
+ this._v3_1.setZ( ( r2 * 0.5 ) / ( Math.sqrt( x2 + y2 ) ) );
|
|
|
|
|
|
- const curve = new EllipseCurve( 0, 0, tbRadius, tbRadius );
|
|
|
- const points = curve.getPoints( this._curvePts );
|
|
|
+ }
|
|
|
|
|
|
- //geometry
|
|
|
- const curveGeometry = new BufferGeometry().setFromPoints( points );
|
|
|
+ return this._v3_1;
|
|
|
|
|
|
- //material
|
|
|
- const curveMaterialX = new LineBasicMaterial( { color: 0xff8080, fog: false, transparent: true, opacity: 0.6 } );
|
|
|
- const curveMaterialY = new LineBasicMaterial( { color: 0x80ff80, fog: false, transparent: true, opacity: 0.6 } );
|
|
|
- const curveMaterialZ = new LineBasicMaterial( { color: 0x8080ff, fog: false, transparent: true, opacity: 0.6 } );
|
|
|
+ } else if ( camera.type == 'PerspectiveCamera' ) {
|
|
|
|
|
|
- //line
|
|
|
- const gizmoX = new Line( curveGeometry, curveMaterialX );
|
|
|
- const gizmoY = new Line( curveGeometry, curveMaterialY );
|
|
|
- const gizmoZ = new Line( curveGeometry, curveMaterialZ );
|
|
|
+ //unproject cursor on the near plane
|
|
|
+ this._v2_1.copy( this.getCursorNDC( cursorX, cursorY, canvas ) );
|
|
|
|
|
|
- const rotation = Math.PI * 0.5;
|
|
|
- gizmoX.rotation.x = rotation;
|
|
|
- gizmoY.rotation.y = rotation;
|
|
|
+ this._v3_1.set( this._v2_1.x, this._v2_1.y, - 1 );
|
|
|
+ this._v3_1.applyMatrix4( camera.projectionMatrixInverse );
|
|
|
|
|
|
+ const rayDir = this._v3_1.clone().normalize(); //unprojected ray direction
|
|
|
+ const cameraGizmoDistance = camera.position.distanceTo( this._gizmos.position );
|
|
|
+ const radius2 = Math.pow( tbRadius, 2 );
|
|
|
|
|
|
- //setting state
|
|
|
- this._gizmoMatrixState0.identity().setPosition( tbCenter );
|
|
|
- this._gizmoMatrixState.copy( this._gizmoMatrixState0 );
|
|
|
+ // camera
|
|
|
+ // |\
|
|
|
+ // | \
|
|
|
+ // | \
|
|
|
+ // h | \
|
|
|
+ // | \
|
|
|
+ // | \
|
|
|
+ // _ _ | _ _ _\ _ _ near plane
|
|
|
+ // l
|
|
|
|
|
|
- if ( this.camera.zoom !== 1 ) {
|
|
|
+ const h = this._v3_1.z;
|
|
|
+ const l = Math.sqrt( Math.pow( this._v3_1.x, 2 ) + Math.pow( this._v3_1.y, 2 ) );
|
|
|
|
|
|
- //adapt gizmos size to camera zoom
|
|
|
- const size = 1 / this.camera.zoom;
|
|
|
- this._scaleMatrix.makeScale( size, size, size );
|
|
|
- this._translationMatrix.makeTranslation( - tbCenter.x, - tbCenter.y, - tbCenter.z );
|
|
|
+ if ( l == 0 ) {
|
|
|
|
|
|
- this._gizmoMatrixState.premultiply( this._translationMatrix ).premultiply( this._scaleMatrix );
|
|
|
- this._translationMatrix.makeTranslation( tbCenter.x, tbCenter.y, tbCenter.z );
|
|
|
- this._gizmoMatrixState.premultiply( this._translationMatrix );
|
|
|
+ //ray aligned with camera
|
|
|
+ rayDir.set( this._v3_1.x, this._v3_1.y, tbRadius );
|
|
|
+ return rayDir;
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- this._gizmoMatrixState.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
|
|
|
+ const m = h / l;
|
|
|
+ const q = cameraGizmoDistance;
|
|
|
|
|
|
- //
|
|
|
+ /*
|
|
|
+ * calculate intersection point between unprojected ray and trackball surface
|
|
|
+ *|y = m * x + q
|
|
|
+ *|x^2 + y^2 = r^2
|
|
|
+ *
|
|
|
+ * (m^2 + 1) * x^2 + (2 * m * q) * x + q^2 - r^2 = 0
|
|
|
+ */
|
|
|
+ let a = Math.pow( m, 2 ) + 1;
|
|
|
+ let b = 2 * m * q;
|
|
|
+ let c = Math.pow( q, 2 ) - radius2;
|
|
|
+ let delta = Math.pow( b, 2 ) - ( 4 * a * c );
|
|
|
|
|
|
- this._gizmos.traverse( function ( object ) {
|
|
|
+ if ( delta >= 0 ) {
|
|
|
|
|
|
- if ( object.isLine ) {
|
|
|
+ //intersection with sphere
|
|
|
+ this._v2_1.setX( ( - b - Math.sqrt( delta ) ) / ( 2 * a ) );
|
|
|
+ this._v2_1.setY( m * this._v2_1.x + q );
|
|
|
|
|
|
- object.geometry.dispose();
|
|
|
- object.material.dispose();
|
|
|
+ const angle = MathUtils.RAD2DEG * this._v2_1.angle();
|
|
|
|
|
|
- }
|
|
|
+ if ( angle >= 45 ) {
|
|
|
|
|
|
- } );
|
|
|
+ //if angle between intersection point and X' axis is >= 45°, return that point
|
|
|
+ //otherwise, calculate intersection point with hyperboloid
|
|
|
|
|
|
- this._gizmos.clear();
|
|
|
+ const rayLength = Math.sqrt( Math.pow( this._v2_1.x, 2 ) + Math.pow( ( cameraGizmoDistance - this._v2_1.y ), 2 ) );
|
|
|
+ rayDir.multiplyScalar( rayLength );
|
|
|
+ rayDir.z += cameraGizmoDistance;
|
|
|
+ return rayDir;
|
|
|
|
|
|
- //
|
|
|
+ }
|
|
|
|
|
|
- this._gizmos.add( gizmoX );
|
|
|
- this._gizmos.add( gizmoY );
|
|
|
- this._gizmos.add( gizmoZ );
|
|
|
+ }
|
|
|
|
|
|
- };
|
|
|
+ //intersection with hyperboloid
|
|
|
+ /*
|
|
|
+ *|y = m * x + q
|
|
|
+ *|y = (1 / x) * (r^2 / 2)
|
|
|
+ *
|
|
|
+ * m * x^2 + q * x - r^2 / 2 = 0
|
|
|
+ */
|
|
|
|
|
|
- /**
|
|
|
- * Perform animation for focus operation
|
|
|
- * @param {Number} time Instant in which this function is called as performance.now()
|
|
|
- * @param {Vector3} point Point of interest for focus operation
|
|
|
- * @param {Matrix4} cameraMatrix Camera matrix
|
|
|
- * @param {Matrix4} gizmoMatrix Gizmos matrix
|
|
|
- */
|
|
|
- onFocusAnim = ( time, point, cameraMatrix, gizmoMatrix ) => {
|
|
|
+ a = m;
|
|
|
+ b = q;
|
|
|
+ c = - radius2 * 0.5;
|
|
|
+ delta = Math.pow( b, 2 ) - ( 4 * a * c );
|
|
|
+ this._v2_1.setX( ( - b - Math.sqrt( delta ) ) / ( 2 * a ) );
|
|
|
+ this._v2_1.setY( m * this._v2_1.x + q );
|
|
|
|
|
|
- if ( this._timeStart == - 1 ) {
|
|
|
+ const rayLength = Math.sqrt( Math.pow( this._v2_1.x, 2 ) + Math.pow( ( cameraGizmoDistance - this._v2_1.y ), 2 ) );
|
|
|
|
|
|
- //animation start
|
|
|
- this._timeStart = time;
|
|
|
+ rayDir.multiplyScalar( rayLength );
|
|
|
+ rayDir.z += cameraGizmoDistance;
|
|
|
+ return rayDir;
|
|
|
|
|
|
}
|
|
|
|
|
|
- if ( this._state == STATE.ANIMATION_FOCUS ) {
|
|
|
+ }
|
|
|
|
|
|
- const deltaTime = time - this._timeStart;
|
|
|
- const animTime = deltaTime / this.focusAnimationTime;
|
|
|
|
|
|
- this._gizmoMatrixState.copy( gizmoMatrix );
|
|
|
+ /**
|
|
|
+ * Unproject the cursor on the plane passing through the center of the trackball orthogonal to the camera
|
|
|
+ * @param {Camera} camera The virtual camera
|
|
|
+ * @param {Number} cursorX Cursor horizontal coordinate on screen
|
|
|
+ * @param {Number} cursorY Cursor vertical coordinate on screen
|
|
|
+ * @param {HTMLElement} canvas The canvas where the renderer draws its output
|
|
|
+ * @param {Boolean} initialDistance If initial distance between camera and gizmos should be used for calculations instead of current (Perspective only)
|
|
|
+ * @returns {Vector3} The unprojected point on the trackball plane
|
|
|
+ */
|
|
|
+ unprojectOnTbPlane( camera, cursorX, cursorY, canvas, initialDistance = false ) {
|
|
|
|
|
|
- if ( animTime >= 1 ) {
|
|
|
+ if ( camera.type == 'OrthographicCamera' ) {
|
|
|
|
|
|
- //animation end
|
|
|
+ this._v2_1.copy( this.getCursorPosition( cursorX, cursorY, canvas ) );
|
|
|
+ this._v3_1.set( this._v2_1.x, this._v2_1.y, 0 );
|
|
|
|
|
|
- this._gizmoMatrixState.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
|
|
|
+ return this._v3_1.clone();
|
|
|
|
|
|
- this.focus( point, this.scaleFactor );
|
|
|
+ } else if ( camera.type == 'PerspectiveCamera' ) {
|
|
|
|
|
|
- this._timeStart = - 1;
|
|
|
- this.updateTbState( STATE.IDLE, false );
|
|
|
- this.activateGizmos( false );
|
|
|
+ this._v2_1.copy( this.getCursorNDC( cursorX, cursorY, canvas ) );
|
|
|
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ //unproject cursor on the near plane
|
|
|
+ this._v3_1.set( this._v2_1.x, this._v2_1.y, - 1 );
|
|
|
+ this._v3_1.applyMatrix4( camera.projectionMatrixInverse );
|
|
|
|
|
|
- } else {
|
|
|
+ const rayDir = this._v3_1.clone().normalize(); //unprojected ray direction
|
|
|
|
|
|
- const amount = this.easeOutCubic( animTime );
|
|
|
- const size = ( ( 1 - amount ) + ( this.scaleFactor * amount ) );
|
|
|
+ // camera
|
|
|
+ // |\
|
|
|
+ // | \
|
|
|
+ // | \
|
|
|
+ // h | \
|
|
|
+ // | \
|
|
|
+ // | \
|
|
|
+ // _ _ | _ _ _\ _ _ near plane
|
|
|
+ // l
|
|
|
|
|
|
- this._gizmoMatrixState.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
|
|
|
- this.focus( point, size, amount );
|
|
|
+ const h = this._v3_1.z;
|
|
|
+ const l = Math.sqrt( Math.pow( this._v3_1.x, 2 ) + Math.pow( this._v3_1.y, 2 ) );
|
|
|
+ let cameraGizmoDistance;
|
|
|
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
- const self = this;
|
|
|
- this._animationId = window.requestAnimationFrame( function ( t ) {
|
|
|
+ if ( initialDistance ) {
|
|
|
|
|
|
- self.onFocusAnim( t, point, cameraMatrix, gizmoMatrix.clone() );
|
|
|
+ cameraGizmoDistance = this._v3_1.setFromMatrixPosition( this._cameraMatrixState0 ).distanceTo( this._v3_2.setFromMatrixPosition( this._gizmoMatrixState0 ) );
|
|
|
|
|
|
- } );
|
|
|
+ } else {
|
|
|
+
|
|
|
+ cameraGizmoDistance = camera.position.distanceTo( this._gizmos.position );
|
|
|
|
|
|
}
|
|
|
|
|
|
- } else {
|
|
|
+ /*
|
|
|
+ * calculate intersection point between unprojected ray and the plane
|
|
|
+ *|y = mx + q
|
|
|
+ *|y = 0
|
|
|
+ *
|
|
|
+ * x = -q/m
|
|
|
+ */
|
|
|
+ if ( l == 0 ) {
|
|
|
|
|
|
- //interrupt animation
|
|
|
+ //ray aligned with camera
|
|
|
+ rayDir.set( 0, 0, 0 );
|
|
|
+ return rayDir;
|
|
|
|
|
|
- this._animationId = - 1;
|
|
|
- this._timeStart = - 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ const m = h / l;
|
|
|
+ const q = cameraGizmoDistance;
|
|
|
+ const x = - q / m;
|
|
|
+
|
|
|
+ const rayLength = Math.sqrt( Math.pow( q, 2 ) + Math.pow( x, 2 ) );
|
|
|
+ rayDir.multiplyScalar( rayLength );
|
|
|
+ rayDir.z = 0;
|
|
|
+ return rayDir;
|
|
|
|
|
|
}
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
- * Perform animation for rotation operation
|
|
|
- * @param {Number} time Instant in which this function is called as performance.now()
|
|
|
- * @param {Vector3} rotationAxis Rotation axis
|
|
|
- * @param {number} w0 Initial angular velocity
|
|
|
+ * Update camera and gizmos state
|
|
|
*/
|
|
|
- onRotationAnim = ( time, rotationAxis, w0 ) => {
|
|
|
+ updateMatrixState() {
|
|
|
|
|
|
- if ( this._timeStart == - 1 ) {
|
|
|
+ //update camera and gizmos state
|
|
|
+ this._cameraMatrixState.copy( this.camera.matrix );
|
|
|
+ this._gizmoMatrixState.copy( this._gizmos.matrix );
|
|
|
|
|
|
- //animation start
|
|
|
- this._anglePrev = 0;
|
|
|
- this._angleCurrent = 0;
|
|
|
- this._timeStart = time;
|
|
|
+ if ( this.camera.isOrthographicCamera ) {
|
|
|
|
|
|
- }
|
|
|
+ this._cameraProjectionState.copy( this.camera.projectionMatrix );
|
|
|
+ this.camera.updateProjectionMatrix();
|
|
|
+ this._zoomState = this.camera.zoom;
|
|
|
|
|
|
- if ( this._state == STATE.ANIMATION_ROTATE ) {
|
|
|
+ } else if ( this.camera.isPerspectiveCamera ) {
|
|
|
|
|
|
- //w = w0 + alpha * t
|
|
|
- const deltaTime = ( time - this._timeStart ) / 1000;
|
|
|
- const w = w0 + ( ( - this.dampingFactor ) * deltaTime );
|
|
|
+ this._fovState = this.camera.fov;
|
|
|
|
|
|
- if ( w > 0 ) {
|
|
|
+ }
|
|
|
|
|
|
- //tetha = 0.5 * alpha * t^2 + w0 * t + tetha0
|
|
|
- this._angleCurrent = 0.5 * ( - this.dampingFactor ) * Math.pow( deltaTime, 2 ) + w0 * deltaTime + 0;
|
|
|
- this.applyTransformMatrix( this.rotate( rotationAxis, this._angleCurrent ) );
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
- const self = this;
|
|
|
- this._animationId = window.requestAnimationFrame( function ( t ) {
|
|
|
+ }
|
|
|
|
|
|
- self.onRotationAnim( t, rotationAxis, w0 );
|
|
|
+ /**
|
|
|
+ * Update the trackball FSA
|
|
|
+ * @param {STATE} newState New state of the FSA
|
|
|
+ * @param {Boolean} updateMatrices If matriices state should be updated
|
|
|
+ */
|
|
|
+ updateTbState( newState, updateMatrices ) {
|
|
|
|
|
|
- } );
|
|
|
+ this._state = newState;
|
|
|
+ if ( updateMatrices ) {
|
|
|
|
|
|
- } else {
|
|
|
+ this.updateMatrixState();
|
|
|
|
|
|
- this._animationId = - 1;
|
|
|
- this._timeStart = - 1;
|
|
|
+ }
|
|
|
|
|
|
- this.updateTbState( STATE.IDLE, false );
|
|
|
- this.activateGizmos( false );
|
|
|
+ }
|
|
|
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ update() {
|
|
|
|
|
|
- }
|
|
|
+ const EPS = 0.000001;
|
|
|
|
|
|
- } else {
|
|
|
+ if ( this.target.equals( this._currentTarget ) === false ) {
|
|
|
|
|
|
- //interrupt animation
|
|
|
+ this._gizmos.position.copy( this.target ); //for correct radius calculation
|
|
|
+ this._tbRadius = this.calculateTbRadius( this.camera );
|
|
|
+ this.makeGizmos( this.target, this._tbRadius );
|
|
|
+ this._currentTarget.copy( this.target );
|
|
|
|
|
|
- this._animationId = - 1;
|
|
|
- this._timeStart = - 1;
|
|
|
+ }
|
|
|
|
|
|
- if ( this._state != STATE.ROTATE ) {
|
|
|
+ //check min/max parameters
|
|
|
+ if ( this.camera.isOrthographicCamera ) {
|
|
|
|
|
|
- this.activateGizmos( false );
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ //check zoom
|
|
|
+ if ( this.camera.zoom > this.maxZoom || this.camera.zoom < this.minZoom ) {
|
|
|
+
|
|
|
+ const newZoom = MathUtils.clamp( this.camera.zoom, this.minZoom, this.maxZoom );
|
|
|
+ this.applyTransformMatrix( this.scale( newZoom / this.camera.zoom, this._gizmos.position, true ) );
|
|
|
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
+ } else if ( this.camera.isPerspectiveCamera ) {
|
|
|
|
|
|
- };
|
|
|
+ //check distance
|
|
|
+ const distance = this.camera.position.distanceTo( this._gizmos.position );
|
|
|
|
|
|
+ if ( distance > this.maxDistance + EPS || distance < this.minDistance - EPS ) {
|
|
|
|
|
|
- /**
|
|
|
- * Perform pan operation moving camera between two points
|
|
|
- * @param {Vector3} p0 Initial point
|
|
|
- * @param {Vector3} p1 Ending point
|
|
|
- * @param {Boolean} adjust If movement should be adjusted considering camera distance (Perspective only)
|
|
|
- */
|
|
|
- pan = ( p0, p1, adjust = false ) => {
|
|
|
+ const newDistance = MathUtils.clamp( distance, this.minDistance, this.maxDistance );
|
|
|
+ this.applyTransformMatrix( this.scale( newDistance / distance, this._gizmos.position ) );
|
|
|
+ this.updateMatrixState();
|
|
|
|
|
|
- const movement = p0.clone().sub( p1 );
|
|
|
+ }
|
|
|
|
|
|
- if ( this.camera.isOrthographicCamera ) {
|
|
|
+ //check fov
|
|
|
+ if ( this.camera.fov < this.minFov || this.camera.fov > this.maxFov ) {
|
|
|
|
|
|
- //adjust movement amount
|
|
|
- movement.multiplyScalar( 1 / this.camera.zoom );
|
|
|
+ this.camera.fov = MathUtils.clamp( this.camera.fov, this.minFov, this.maxFov );
|
|
|
+ this.camera.updateProjectionMatrix();
|
|
|
|
|
|
- } else if ( this.camera.isPerspectiveCamera && adjust ) {
|
|
|
+ }
|
|
|
|
|
|
- //adjust movement amount
|
|
|
- this._v3_1.setFromMatrixPosition( this._cameraMatrixState0 ); //camera's initial position
|
|
|
- this._v3_2.setFromMatrixPosition( this._gizmoMatrixState0 ); //gizmo's initial position
|
|
|
- const distanceFactor = this._v3_1.distanceTo( this._v3_2 ) / this.camera.position.distanceTo( this._gizmos.position );
|
|
|
- movement.multiplyScalar( 1 / distanceFactor );
|
|
|
+ const oldRadius = this._tbRadius;
|
|
|
+ this._tbRadius = this.calculateTbRadius( this.camera );
|
|
|
|
|
|
- }
|
|
|
+ if ( oldRadius < this._tbRadius - EPS || oldRadius > this._tbRadius + EPS ) {
|
|
|
|
|
|
- this._v3_1.set( movement.x, movement.y, 0 ).applyQuaternion( this.camera.quaternion );
|
|
|
+ const scale = ( this._gizmos.scale.x + this._gizmos.scale.y + this._gizmos.scale.z ) / 3;
|
|
|
+ const newRadius = this._tbRadius / scale;
|
|
|
+ const curve = new EllipseCurve( 0, 0, newRadius, newRadius );
|
|
|
+ const points = curve.getPoints( this._curvePts );
|
|
|
+ const curveGeometry = new BufferGeometry().setFromPoints( points );
|
|
|
|
|
|
- this._m4_1.makeTranslation( this._v3_1.x, this._v3_1.y, this._v3_1.z );
|
|
|
+ for ( const gizmo in this._gizmos.children ) {
|
|
|
|
|
|
- this.setTransformationMatrices( this._m4_1, this._m4_1 );
|
|
|
- return _transformation;
|
|
|
+ this._gizmos.children[ gizmo ].geometry = curveGeometry;
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * Reset trackball
|
|
|
- */
|
|
|
- reset = () => {
|
|
|
+ }
|
|
|
|
|
|
- this.camera.zoom = this._zoom0;
|
|
|
+ }
|
|
|
|
|
|
- if ( this.camera.isPerspectiveCamera ) {
|
|
|
+ this.camera.lookAt( this._gizmos.position );
|
|
|
|
|
|
- this.camera.fov = this._fov0;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ setStateFromJSON( json ) {
|
|
|
|
|
|
- this.camera.near = this._nearPos;
|
|
|
- this.camera.far = this._farPos;
|
|
|
- this._cameraMatrixState.copy( this._cameraMatrixState0 );
|
|
|
- this._cameraMatrixState.decompose( this.camera.position, this.camera.quaternion, this.camera.scale );
|
|
|
- this.camera.up.copy( this._up0 );
|
|
|
+ const state = JSON.parse( json );
|
|
|
|
|
|
- this.camera.updateMatrix();
|
|
|
- this.camera.updateProjectionMatrix();
|
|
|
+ if ( state.arcballState != undefined ) {
|
|
|
|
|
|
- this._gizmoMatrixState.copy( this._gizmoMatrixState0 );
|
|
|
- this._gizmoMatrixState0.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
|
|
|
- this._gizmos.updateMatrix();
|
|
|
+ this._cameraMatrixState.fromArray( state.arcballState.cameraMatrix.elements );
|
|
|
+ this._cameraMatrixState.decompose( this.camera.position, this.camera.quaternion, this.camera.scale );
|
|
|
|
|
|
- this._tbRadius = this.calculateTbRadius( this.camera );
|
|
|
- this.makeGizmos( this._gizmos.position, this._tbRadius );
|
|
|
+ this.camera.up.copy( state.arcballState.cameraUp );
|
|
|
+ this.camera.near = state.arcballState.cameraNear;
|
|
|
+ this.camera.far = state.arcballState.cameraFar;
|
|
|
|
|
|
- this.camera.lookAt( this._gizmos.position );
|
|
|
+ this.camera.zoom = state.arcballState.cameraZoom;
|
|
|
|
|
|
- this.updateTbState( STATE.IDLE, false );
|
|
|
+ if ( this.camera.isPerspectiveCamera ) {
|
|
|
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ this.camera.fov = state.arcballState.cameraFov;
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * Rotate the camera around an axis passing by trackball's center
|
|
|
- * @param {Vector3} axis Rotation axis
|
|
|
- * @param {number} angle Angle in radians
|
|
|
- * @returns {Object} Object with 'camera' field containing transformation matrix resulting from the operation to be applied to the camera
|
|
|
- */
|
|
|
- rotate = ( axis, angle ) => {
|
|
|
+ this._gizmoMatrixState.fromArray( state.arcballState.gizmoMatrix.elements );
|
|
|
+ this._gizmoMatrixState.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
|
|
|
|
|
|
- const point = this._gizmos.position; //rotation center
|
|
|
- this._translationMatrix.makeTranslation( - point.x, - point.y, - point.z );
|
|
|
- this._rotationMatrix.makeRotationAxis( axis, - angle );
|
|
|
+ this.camera.updateMatrix();
|
|
|
+ this.camera.updateProjectionMatrix();
|
|
|
|
|
|
- //rotate camera
|
|
|
- this._m4_1.makeTranslation( point.x, point.y, point.z );
|
|
|
- this._m4_1.multiply( this._rotationMatrix );
|
|
|
- this._m4_1.multiply( this._translationMatrix );
|
|
|
+ this._gizmos.updateMatrix();
|
|
|
|
|
|
- this.setTransformationMatrices( this._m4_1 );
|
|
|
+ this._tbRadius = this.calculateTbRadius( this.camera );
|
|
|
+ const gizmoTmp = new Matrix4().copy( this._gizmoMatrixState0 );
|
|
|
+ this.makeGizmos( this._gizmos.position, this._tbRadius );
|
|
|
+ this._gizmoMatrixState0.copy( gizmoTmp );
|
|
|
|
|
|
- return _transformation;
|
|
|
+ this.camera.lookAt( this._gizmos.position );
|
|
|
+ this.updateTbState( STATE.IDLE, false );
|
|
|
|
|
|
- };
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- copyState = () => {
|
|
|
+ }
|
|
|
|
|
|
- let state;
|
|
|
- if ( this.camera.isOrthographicCamera ) {
|
|
|
+ }
|
|
|
|
|
|
- state = JSON.stringify( { arcballState: {
|
|
|
+}
|
|
|
|
|
|
- cameraFar: this.camera.far,
|
|
|
- cameraMatrix: this.camera.matrix,
|
|
|
- cameraNear: this.camera.near,
|
|
|
- cameraUp: this.camera.up,
|
|
|
- cameraZoom: this.camera.zoom,
|
|
|
- gizmoMatrix: this._gizmos.matrix
|
|
|
+//listeners
|
|
|
|
|
|
- } } );
|
|
|
+function onWindowResize() {
|
|
|
|
|
|
- } else if ( this.camera.isPerspectiveCamera ) {
|
|
|
+ const scale = ( this._gizmos.scale.x + this._gizmos.scale.y + this._gizmos.scale.z ) / 3;
|
|
|
+ this._tbRadius = this.calculateTbRadius( this.camera );
|
|
|
|
|
|
- state = JSON.stringify( { arcballState: {
|
|
|
- cameraFar: this.camera.far,
|
|
|
- cameraFov: this.camera.fov,
|
|
|
- cameraMatrix: this.camera.matrix,
|
|
|
- cameraNear: this.camera.near,
|
|
|
- cameraUp: this.camera.up,
|
|
|
- cameraZoom: this.camera.zoom,
|
|
|
- gizmoMatrix: this._gizmos.matrix
|
|
|
+ const newRadius = this._tbRadius / scale;
|
|
|
+ const curve = new EllipseCurve( 0, 0, newRadius, newRadius );
|
|
|
+ const points = curve.getPoints( this._curvePts );
|
|
|
+ const curveGeometry = new BufferGeometry().setFromPoints( points );
|
|
|
|
|
|
- } } );
|
|
|
|
|
|
- }
|
|
|
+ for ( const gizmo in this._gizmos.children ) {
|
|
|
|
|
|
- navigator.clipboard.writeText( state );
|
|
|
+ this._gizmos.children[ gizmo ].geometry = curveGeometry;
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
- pasteState = () => {
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
|
|
|
- const self = this;
|
|
|
- navigator.clipboard.readText().then( function resolved( value ) {
|
|
|
+}
|
|
|
|
|
|
- self.setStateFromJSON( value );
|
|
|
+function onContextMenu( event ) {
|
|
|
|
|
|
- } );
|
|
|
+ if ( ! this.enabled ) {
|
|
|
|
|
|
- };
|
|
|
+ return;
|
|
|
|
|
|
- /**
|
|
|
- * Save the current state of the control. This can later be recover with .reset
|
|
|
- */
|
|
|
- saveState = () => {
|
|
|
+ }
|
|
|
|
|
|
- this._cameraMatrixState0.copy( this.camera.matrix );
|
|
|
- this._gizmoMatrixState0.copy( this._gizmos.matrix );
|
|
|
- this._nearPos = this.camera.near;
|
|
|
- this._farPos = this.camera.far;
|
|
|
- this._zoom0 = this.camera.zoom;
|
|
|
- this._up0.copy( this.camera.up );
|
|
|
+ for ( let i = 0; i < this.mouseActions.length; i ++ ) {
|
|
|
|
|
|
- if ( this.camera.isPerspectiveCamera ) {
|
|
|
+ if ( this.mouseActions[ i ].mouse == 2 ) {
|
|
|
|
|
|
- this._fov0 = this.camera.fov;
|
|
|
+ //prevent only if button 2 is actually used
|
|
|
+ event.preventDefault();
|
|
|
+ break;
|
|
|
|
|
|
}
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * Perform uniform scale operation around a given point
|
|
|
- * @param {Number} size Scale factor
|
|
|
- * @param {Vector3} point Point around which scale
|
|
|
- * @param {Boolean} scaleGizmos If gizmos should be scaled (Perspective only)
|
|
|
- * @returns {Object} Object with 'camera' and 'gizmo' fields containing transformation matrices resulting from the operation to be applied to the camera and gizmos
|
|
|
- */
|
|
|
- scale = ( size, point, scaleGizmos = true ) => {
|
|
|
+}
|
|
|
|
|
|
- _scalePointTemp.copy( point );
|
|
|
- let sizeInverse = 1 / size;
|
|
|
+function onPointerCancel() {
|
|
|
|
|
|
- if ( this.camera.isOrthographicCamera ) {
|
|
|
+ this._touchStart.splice( 0, this._touchStart.length );
|
|
|
+ this._touchCurrent.splice( 0, this._touchCurrent.length );
|
|
|
+ this._input = INPUT.NONE;
|
|
|
|
|
|
- //camera zoom
|
|
|
- this.camera.zoom = this._zoomState;
|
|
|
- this.camera.zoom *= size;
|
|
|
+}
|
|
|
|
|
|
- //check min and max zoom
|
|
|
- if ( this.camera.zoom > this.maxZoom ) {
|
|
|
+function onPointerDown( event ) {
|
|
|
|
|
|
- this.camera.zoom = this.maxZoom;
|
|
|
- sizeInverse = this._zoomState / this.maxZoom;
|
|
|
+ if ( event.button == 0 && event.isPrimary ) {
|
|
|
|
|
|
- } else if ( this.camera.zoom < this.minZoom ) {
|
|
|
+ this._downValid = true;
|
|
|
+ this._downEvents.push( event );
|
|
|
+ this._downStart = performance.now();
|
|
|
|
|
|
- this.camera.zoom = this.minZoom;
|
|
|
- sizeInverse = this._zoomState / this.minZoom;
|
|
|
+ } else {
|
|
|
|
|
|
- }
|
|
|
+ this._downValid = false;
|
|
|
|
|
|
- this.camera.updateProjectionMatrix();
|
|
|
+ }
|
|
|
|
|
|
- this._v3_1.setFromMatrixPosition( this._gizmoMatrixState ); //gizmos position
|
|
|
+ if ( event.pointerType == 'touch' && this._input != INPUT.CURSOR ) {
|
|
|
|
|
|
- //scale gizmos so they appear in the same spot having the same dimension
|
|
|
- this._scaleMatrix.makeScale( sizeInverse, sizeInverse, sizeInverse );
|
|
|
- this._translationMatrix.makeTranslation( - this._v3_1.x, - this._v3_1.y, - this._v3_1.z );
|
|
|
+ this._touchStart.push( event );
|
|
|
+ this._touchCurrent.push( event );
|
|
|
|
|
|
- this._m4_2.makeTranslation( this._v3_1.x, this._v3_1.y, this._v3_1.z ).multiply( this._scaleMatrix );
|
|
|
- this._m4_2.multiply( this._translationMatrix );
|
|
|
+ switch ( this._input ) {
|
|
|
|
|
|
+ case INPUT.NONE:
|
|
|
|
|
|
- //move camera and gizmos to obtain pinch effect
|
|
|
- _scalePointTemp.sub( this._v3_1 );
|
|
|
+ //singleStart
|
|
|
+ this._input = INPUT.ONE_FINGER;
|
|
|
+ this.onSinglePanStart( event, 'ROTATE' );
|
|
|
|
|
|
- const amount = _scalePointTemp.clone().multiplyScalar( sizeInverse );
|
|
|
- _scalePointTemp.sub( amount );
|
|
|
+ window.addEventListener( 'pointermove', this._onPointerMove );
|
|
|
+ window.addEventListener( 'pointerup', this._onPointerUp );
|
|
|
|
|
|
- this._m4_1.makeTranslation( _scalePointTemp.x, _scalePointTemp.y, _scalePointTemp.z );
|
|
|
- this._m4_2.premultiply( this._m4_1 );
|
|
|
+ break;
|
|
|
|
|
|
- this.setTransformationMatrices( this._m4_1, this._m4_2 );
|
|
|
- return _transformation;
|
|
|
+ case INPUT.ONE_FINGER:
|
|
|
+ case INPUT.ONE_FINGER_SWITCHED:
|
|
|
|
|
|
- } else if ( this.camera.isPerspectiveCamera ) {
|
|
|
+ //doubleStart
|
|
|
+ this._input = INPUT.TWO_FINGER;
|
|
|
|
|
|
- this._v3_1.setFromMatrixPosition( this._cameraMatrixState );
|
|
|
- this._v3_2.setFromMatrixPosition( this._gizmoMatrixState );
|
|
|
+ this.onRotateStart();
|
|
|
+ this.onPinchStart();
|
|
|
+ this.onDoublePanStart();
|
|
|
|
|
|
- //move camera
|
|
|
- let distance = this._v3_1.distanceTo( _scalePointTemp );
|
|
|
- let amount = distance - ( distance * sizeInverse );
|
|
|
+ break;
|
|
|
|
|
|
- //check min and max distance
|
|
|
- const newDistance = distance - amount;
|
|
|
- if ( newDistance < this.minDistance ) {
|
|
|
+ case INPUT.TWO_FINGER:
|
|
|
|
|
|
- sizeInverse = this.minDistance / distance;
|
|
|
- amount = distance - ( distance * sizeInverse );
|
|
|
+ //multipleStart
|
|
|
+ this._input = INPUT.MULT_FINGER;
|
|
|
+ this.onTriplePanStart( event );
|
|
|
+ break;
|
|
|
|
|
|
- } else if ( newDistance > this.maxDistance ) {
|
|
|
+ }
|
|
|
|
|
|
- sizeInverse = this.maxDistance / distance;
|
|
|
- amount = distance - ( distance * sizeInverse );
|
|
|
+ } else if ( event.pointerType != 'touch' && this._input == INPUT.NONE ) {
|
|
|
|
|
|
- }
|
|
|
+ let modifier = null;
|
|
|
|
|
|
- _offset.copy( _scalePointTemp ).sub( this._v3_1 ).normalize().multiplyScalar( amount );
|
|
|
+ if ( event.ctrlKey || event.metaKey ) {
|
|
|
|
|
|
- this._m4_1.makeTranslation( _offset.x, _offset.y, _offset.z );
|
|
|
+ modifier = 'CTRL';
|
|
|
|
|
|
+ } else if ( event.shiftKey ) {
|
|
|
|
|
|
- if ( scaleGizmos ) {
|
|
|
+ modifier = 'SHIFT';
|
|
|
|
|
|
- //scale gizmos so they appear in the same spot having the same dimension
|
|
|
- const pos = this._v3_2;
|
|
|
+ }
|
|
|
|
|
|
- distance = pos.distanceTo( _scalePointTemp );
|
|
|
- amount = distance - ( distance * sizeInverse );
|
|
|
- _offset.copy( _scalePointTemp ).sub( this._v3_2 ).normalize().multiplyScalar( amount );
|
|
|
+ this._mouseOp = this.getOpFromAction( event.button, modifier );
|
|
|
+ if ( this._mouseOp != null ) {
|
|
|
|
|
|
- this._translationMatrix.makeTranslation( pos.x, pos.y, pos.z );
|
|
|
- this._scaleMatrix.makeScale( sizeInverse, sizeInverse, sizeInverse );
|
|
|
+ window.addEventListener( 'pointermove', this._onPointerMove );
|
|
|
+ window.addEventListener( 'pointerup', this._onPointerUp );
|
|
|
|
|
|
- this._m4_2.makeTranslation( _offset.x, _offset.y, _offset.z ).multiply( this._translationMatrix );
|
|
|
- this._m4_2.multiply( this._scaleMatrix );
|
|
|
+ //singleStart
|
|
|
+ this._input = INPUT.CURSOR;
|
|
|
+ this._button = event.button;
|
|
|
+ this.onSinglePanStart( event, this._mouseOp );
|
|
|
|
|
|
- this._translationMatrix.makeTranslation( - pos.x, - pos.y, - pos.z );
|
|
|
+ }
|
|
|
|
|
|
- this._m4_2.multiply( this._translationMatrix );
|
|
|
- this.setTransformationMatrices( this._m4_1, this._m4_2 );
|
|
|
+ }
|
|
|
|
|
|
+}
|
|
|
|
|
|
- } else {
|
|
|
+function onPointerMove( event ) {
|
|
|
|
|
|
- this.setTransformationMatrices( this._m4_1 );
|
|
|
+ if ( event.pointerType == 'touch' && this._input != INPUT.CURSOR ) {
|
|
|
|
|
|
- }
|
|
|
+ switch ( this._input ) {
|
|
|
|
|
|
- return _transformation;
|
|
|
+ case INPUT.ONE_FINGER:
|
|
|
|
|
|
- }
|
|
|
+ //singleMove
|
|
|
+ this.updateTouchEvent( event );
|
|
|
|
|
|
- };
|
|
|
+ this.onSinglePanMove( event, STATE.ROTATE );
|
|
|
+ break;
|
|
|
|
|
|
- /**
|
|
|
- * Set camera fov
|
|
|
- * @param {Number} value fov to be setted
|
|
|
- */
|
|
|
- setFov = ( value ) => {
|
|
|
+ case INPUT.ONE_FINGER_SWITCHED:
|
|
|
|
|
|
- if ( this.camera.isPerspectiveCamera ) {
|
|
|
+ const movement = this.calculatePointersDistance( this._touchCurrent[ 0 ], event ) * this._devPxRatio;
|
|
|
|
|
|
- this.camera.fov = MathUtils.clamp( value, this.minFov, this.maxFov );
|
|
|
- this.camera.updateProjectionMatrix();
|
|
|
+ if ( movement >= this._switchSensibility ) {
|
|
|
|
|
|
- }
|
|
|
+ //singleMove
|
|
|
+ this._input = INPUT.ONE_FINGER;
|
|
|
+ this.updateTouchEvent( event );
|
|
|
|
|
|
- };
|
|
|
+ this.onSinglePanStart( event, 'ROTATE' );
|
|
|
+ break;
|
|
|
|
|
|
- /**
|
|
|
- * Set values in transformation object
|
|
|
- * @param {Matrix4} camera Transformation to be applied to the camera
|
|
|
- * @param {Matrix4} gizmos Transformation to be applied to gizmos
|
|
|
- */
|
|
|
- setTransformationMatrices( camera = null, gizmos = null ) {
|
|
|
+ }
|
|
|
|
|
|
- if ( camera != null ) {
|
|
|
+ break;
|
|
|
|
|
|
- if ( _transformation.camera != null ) {
|
|
|
+ case INPUT.TWO_FINGER:
|
|
|
|
|
|
- _transformation.camera.copy( camera );
|
|
|
+ //rotate/pan/pinchMove
|
|
|
+ this.updateTouchEvent( event );
|
|
|
|
|
|
- } else {
|
|
|
+ this.onRotateMove();
|
|
|
+ this.onPinchMove();
|
|
|
+ this.onDoublePanMove();
|
|
|
|
|
|
- _transformation.camera = camera.clone();
|
|
|
+ break;
|
|
|
|
|
|
- }
|
|
|
+ case INPUT.MULT_FINGER:
|
|
|
|
|
|
- } else {
|
|
|
+ //multMove
|
|
|
+ this.updateTouchEvent( event );
|
|
|
|
|
|
- _transformation.camera = null;
|
|
|
+ this.onTriplePanMove( event );
|
|
|
+ break;
|
|
|
|
|
|
}
|
|
|
|
|
|
- if ( gizmos != null ) {
|
|
|
-
|
|
|
- if ( _transformation.gizmos != null ) {
|
|
|
-
|
|
|
- _transformation.gizmos.copy( gizmos );
|
|
|
+ } else if ( event.pointerType != 'touch' && this._input == INPUT.CURSOR ) {
|
|
|
|
|
|
- } else {
|
|
|
+ let modifier = null;
|
|
|
|
|
|
- _transformation.gizmos = gizmos.clone();
|
|
|
+ if ( event.ctrlKey || event.metaKey ) {
|
|
|
|
|
|
- }
|
|
|
+ modifier = 'CTRL';
|
|
|
|
|
|
- } else {
|
|
|
+ } else if ( event.shiftKey ) {
|
|
|
|
|
|
- _transformation.gizmos = null;
|
|
|
+ modifier = 'SHIFT';
|
|
|
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * Rotate camera around its direction axis passing by a given point by a given angle
|
|
|
- * @param {Vector3} point The point where the rotation axis is passing trough
|
|
|
- * @param {Number} angle Angle in radians
|
|
|
- * @returns The computed transormation matix
|
|
|
- */
|
|
|
- zRotate = ( point, angle ) => {
|
|
|
-
|
|
|
- this._rotationMatrix.makeRotationAxis( this._rotationAxis, angle );
|
|
|
- this._translationMatrix.makeTranslation( - point.x, - point.y, - point.z );
|
|
|
+ const mouseOpState = this.getOpStateFromAction( this._button, modifier );
|
|
|
|
|
|
- this._m4_1.makeTranslation( point.x, point.y, point.z );
|
|
|
- this._m4_1.multiply( this._rotationMatrix );
|
|
|
- this._m4_1.multiply( this._translationMatrix );
|
|
|
+ if ( mouseOpState != null ) {
|
|
|
|
|
|
- this._v3_1.setFromMatrixPosition( this._gizmoMatrixState ).sub( point ); //vector from rotation center to gizmos position
|
|
|
- this._v3_2.copy( this._v3_1 ).applyAxisAngle( this._rotationAxis, angle ); //apply rotation
|
|
|
- this._v3_2.sub( this._v3_1 );
|
|
|
+ this.onSinglePanMove( event, mouseOpState );
|
|
|
|
|
|
- this._m4_2.makeTranslation( this._v3_2.x, this._v3_2.y, this._v3_2.z );
|
|
|
+ }
|
|
|
|
|
|
- this.setTransformationMatrices( this._m4_1, this._m4_2 );
|
|
|
- return _transformation;
|
|
|
+ }
|
|
|
|
|
|
- };
|
|
|
+ //checkDistance
|
|
|
+ if ( this._downValid ) {
|
|
|
|
|
|
+ const movement = this.calculatePointersDistance( this._downEvents[ this._downEvents.length - 1 ], event ) * this._devPxRatio;
|
|
|
+ if ( movement > this._movementThreshold ) {
|
|
|
|
|
|
- getRaycaster() {
|
|
|
+ this._downValid = false;
|
|
|
|
|
|
- return _raycaster;
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
+}
|
|
|
|
|
|
- /**
|
|
|
- * Unproject the cursor on the 3D object surface
|
|
|
- * @param {Vector2} cursor Cursor coordinates in NDC
|
|
|
- * @param {Camera} camera Virtual camera
|
|
|
- * @returns {Vector3} The point of intersection with the model, if exist, null otherwise
|
|
|
- */
|
|
|
- unprojectOnObj = ( cursor, camera ) => {
|
|
|
+function onPointerUp( event ) {
|
|
|
|
|
|
- const raycaster = this.getRaycaster();
|
|
|
- raycaster.near = camera.near;
|
|
|
- raycaster.far = camera.far;
|
|
|
- raycaster.setFromCamera( cursor, camera );
|
|
|
+ if ( event.pointerType == 'touch' && this._input != INPUT.CURSOR ) {
|
|
|
|
|
|
- const intersect = raycaster.intersectObjects( this.scene.children, true );
|
|
|
+ const nTouch = this._touchCurrent.length;
|
|
|
|
|
|
- for ( let i = 0; i < intersect.length; i ++ ) {
|
|
|
+ for ( let i = 0; i < nTouch; i ++ ) {
|
|
|
|
|
|
- if ( intersect[ i ].object.uuid != this._gizmos.uuid && intersect[ i ].face != null ) {
|
|
|
+ if ( this._touchCurrent[ i ].pointerId == event.pointerId ) {
|
|
|
|
|
|
- return intersect[ i ].point.clone();
|
|
|
+ this._touchCurrent.splice( i, 1 );
|
|
|
+ this._touchStart.splice( i, 1 );
|
|
|
+ break;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
- return null;
|
|
|
+ switch ( this._input ) {
|
|
|
|
|
|
- };
|
|
|
+ case INPUT.ONE_FINGER:
|
|
|
+ case INPUT.ONE_FINGER_SWITCHED:
|
|
|
|
|
|
- /**
|
|
|
- * Unproject the cursor on the trackball surface
|
|
|
- * @param {Camera} camera The virtual camera
|
|
|
- * @param {Number} cursorX Cursor horizontal coordinate on screen
|
|
|
- * @param {Number} cursorY Cursor vertical coordinate on screen
|
|
|
- * @param {HTMLElement} canvas The canvas where the renderer draws its output
|
|
|
- * @param {number} tbRadius The trackball radius
|
|
|
- * @returns {Vector3} The unprojected point on the trackball surface
|
|
|
- */
|
|
|
- unprojectOnTbSurface = ( camera, cursorX, cursorY, canvas, tbRadius ) => {
|
|
|
+ //singleEnd
|
|
|
+ window.removeEventListener( 'pointermove', this._onPointerMove );
|
|
|
+ window.removeEventListener( 'pointerup', this._onPointerUp );
|
|
|
|
|
|
- if ( camera.type == 'OrthographicCamera' ) {
|
|
|
+ this._input = INPUT.NONE;
|
|
|
+ this.onSinglePanEnd();
|
|
|
|
|
|
- this._v2_1.copy( this.getCursorPosition( cursorX, cursorY, canvas ) );
|
|
|
- this._v3_1.set( this._v2_1.x, this._v2_1.y, 0 );
|
|
|
+ break;
|
|
|
|
|
|
- const x2 = Math.pow( this._v2_1.x, 2 );
|
|
|
- const y2 = Math.pow( this._v2_1.y, 2 );
|
|
|
- const r2 = Math.pow( this._tbRadius, 2 );
|
|
|
+ case INPUT.TWO_FINGER:
|
|
|
|
|
|
- if ( x2 + y2 <= r2 * 0.5 ) {
|
|
|
+ //doubleEnd
|
|
|
+ this.onDoublePanEnd( event );
|
|
|
+ this.onPinchEnd( event );
|
|
|
+ this.onRotateEnd( event );
|
|
|
|
|
|
- //intersection with sphere
|
|
|
- this._v3_1.setZ( Math.sqrt( r2 - ( x2 + y2 ) ) );
|
|
|
+ //switching to singleStart
|
|
|
+ this._input = INPUT.ONE_FINGER_SWITCHED;
|
|
|
|
|
|
- } else {
|
|
|
+ break;
|
|
|
|
|
|
- //intersection with hyperboloid
|
|
|
- this._v3_1.setZ( ( r2 * 0.5 ) / ( Math.sqrt( x2 + y2 ) ) );
|
|
|
+ case INPUT.MULT_FINGER:
|
|
|
+
|
|
|
+ if ( this._touchCurrent.length == 0 ) {
|
|
|
+
|
|
|
+ window.removeEventListener( 'pointermove', this._onPointerMove );
|
|
|
+ window.removeEventListener( 'pointerup', this._onPointerUp );
|
|
|
+
|
|
|
+ //multCancel
|
|
|
+ this._input = INPUT.NONE;
|
|
|
+ this.onTriplePanEnd();
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ break;
|
|
|
|
|
|
- return this._v3_1;
|
|
|
+ }
|
|
|
|
|
|
- } else if ( camera.type == 'PerspectiveCamera' ) {
|
|
|
+ } else if ( event.pointerType != 'touch' && this._input == INPUT.CURSOR ) {
|
|
|
|
|
|
- //unproject cursor on the near plane
|
|
|
- this._v2_1.copy( this.getCursorNDC( cursorX, cursorY, canvas ) );
|
|
|
+ window.removeEventListener( 'pointermove', this._onPointerMove );
|
|
|
+ window.removeEventListener( 'pointerup', this._onPointerUp );
|
|
|
|
|
|
- this._v3_1.set( this._v2_1.x, this._v2_1.y, - 1 );
|
|
|
- this._v3_1.applyMatrix4( camera.projectionMatrixInverse );
|
|
|
+ this._input = INPUT.NONE;
|
|
|
+ this.onSinglePanEnd();
|
|
|
+ this._button = - 1;
|
|
|
|
|
|
- const rayDir = this._v3_1.clone().normalize(); //unprojected ray direction
|
|
|
- const cameraGizmoDistance = camera.position.distanceTo( this._gizmos.position );
|
|
|
- const radius2 = Math.pow( tbRadius, 2 );
|
|
|
+ }
|
|
|
|
|
|
- // camera
|
|
|
- // |\
|
|
|
- // | \
|
|
|
- // | \
|
|
|
- // h | \
|
|
|
- // | \
|
|
|
- // | \
|
|
|
- // _ _ | _ _ _\ _ _ near plane
|
|
|
- // l
|
|
|
+ if ( event.isPrimary ) {
|
|
|
|
|
|
- const h = this._v3_1.z;
|
|
|
- const l = Math.sqrt( Math.pow( this._v3_1.x, 2 ) + Math.pow( this._v3_1.y, 2 ) );
|
|
|
+ if ( this._downValid ) {
|
|
|
|
|
|
- if ( l == 0 ) {
|
|
|
+ const downTime = event.timeStamp - this._downEvents[ this._downEvents.length - 1 ].timeStamp;
|
|
|
|
|
|
- //ray aligned with camera
|
|
|
- rayDir.set( this._v3_1.x, this._v3_1.y, tbRadius );
|
|
|
- return rayDir;
|
|
|
+ if ( downTime <= this._maxDownTime ) {
|
|
|
|
|
|
- }
|
|
|
+ if ( this._nclicks == 0 ) {
|
|
|
|
|
|
- const m = h / l;
|
|
|
- const q = cameraGizmoDistance;
|
|
|
+ //first valid click detected
|
|
|
+ this._nclicks = 1;
|
|
|
+ this._clickStart = performance.now();
|
|
|
|
|
|
- /*
|
|
|
- * calculate intersection point between unprojected ray and trackball surface
|
|
|
- *|y = m * x + q
|
|
|
- *|x^2 + y^2 = r^2
|
|
|
- *
|
|
|
- * (m^2 + 1) * x^2 + (2 * m * q) * x + q^2 - r^2 = 0
|
|
|
- */
|
|
|
- let a = Math.pow( m, 2 ) + 1;
|
|
|
- let b = 2 * m * q;
|
|
|
- let c = Math.pow( q, 2 ) - radius2;
|
|
|
- let delta = Math.pow( b, 2 ) - ( 4 * a * c );
|
|
|
+ } else {
|
|
|
|
|
|
- if ( delta >= 0 ) {
|
|
|
+ const clickInterval = event.timeStamp - this._clickStart;
|
|
|
+ const movement = this.calculatePointersDistance( this._downEvents[ 1 ], this._downEvents[ 0 ] ) * this._devPxRatio;
|
|
|
|
|
|
- //intersection with sphere
|
|
|
- this._v2_1.setX( ( - b - Math.sqrt( delta ) ) / ( 2 * a ) );
|
|
|
- this._v2_1.setY( m * this._v2_1.x + q );
|
|
|
+ if ( clickInterval <= this._maxInterval && movement <= this._posThreshold ) {
|
|
|
|
|
|
- const angle = MathUtils.RAD2DEG * this._v2_1.angle();
|
|
|
+ //second valid click detected
|
|
|
+ //fire double tap and reset values
|
|
|
+ this._nclicks = 0;
|
|
|
+ this._downEvents.splice( 0, this._downEvents.length );
|
|
|
+ this.onDoubleTap( event );
|
|
|
|
|
|
- if ( angle >= 45 ) {
|
|
|
+ } else {
|
|
|
|
|
|
- //if angle between intersection point and X' axis is >= 45°, return that point
|
|
|
- //otherwise, calculate intersection point with hyperboloid
|
|
|
+ //new 'first click'
|
|
|
+ this._nclicks = 1;
|
|
|
+ this._downEvents.shift();
|
|
|
+ this._clickStart = performance.now();
|
|
|
|
|
|
- const rayLength = Math.sqrt( Math.pow( this._v2_1.x, 2 ) + Math.pow( ( cameraGizmoDistance - this._v2_1.y ), 2 ) );
|
|
|
- rayDir.multiplyScalar( rayLength );
|
|
|
- rayDir.z += cameraGizmoDistance;
|
|
|
- return rayDir;
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
+ } else {
|
|
|
|
|
|
- //intersection with hyperboloid
|
|
|
- /*
|
|
|
- *|y = m * x + q
|
|
|
- *|y = (1 / x) * (r^2 / 2)
|
|
|
- *
|
|
|
- * m * x^2 + q * x - r^2 / 2 = 0
|
|
|
- */
|
|
|
+ this._downValid = false;
|
|
|
+ this._nclicks = 0;
|
|
|
+ this._downEvents.splice( 0, this._downEvents.length );
|
|
|
|
|
|
- a = m;
|
|
|
- b = q;
|
|
|
- c = - radius2 * 0.5;
|
|
|
- delta = Math.pow( b, 2 ) - ( 4 * a * c );
|
|
|
- this._v2_1.setX( ( - b - Math.sqrt( delta ) ) / ( 2 * a ) );
|
|
|
- this._v2_1.setY( m * this._v2_1.x + q );
|
|
|
+ }
|
|
|
|
|
|
- const rayLength = Math.sqrt( Math.pow( this._v2_1.x, 2 ) + Math.pow( ( cameraGizmoDistance - this._v2_1.y ), 2 ) );
|
|
|
+ } else {
|
|
|
|
|
|
- rayDir.multiplyScalar( rayLength );
|
|
|
- rayDir.z += cameraGizmoDistance;
|
|
|
- return rayDir;
|
|
|
+ this._nclicks = 0;
|
|
|
+ this._downEvents.splice( 0, this._downEvents.length );
|
|
|
|
|
|
}
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
+}
|
|
|
|
|
|
- /**
|
|
|
- * Unproject the cursor on the plane passing through the center of the trackball orthogonal to the camera
|
|
|
- * @param {Camera} camera The virtual camera
|
|
|
- * @param {Number} cursorX Cursor horizontal coordinate on screen
|
|
|
- * @param {Number} cursorY Cursor vertical coordinate on screen
|
|
|
- * @param {HTMLElement} canvas The canvas where the renderer draws its output
|
|
|
- * @param {Boolean} initialDistance If initial distance between camera and gizmos should be used for calculations instead of current (Perspective only)
|
|
|
- * @returns {Vector3} The unprojected point on the trackball plane
|
|
|
- */
|
|
|
- unprojectOnTbPlane = ( camera, cursorX, cursorY, canvas, initialDistance = false ) => {
|
|
|
+function onWheel( event ) {
|
|
|
|
|
|
- if ( camera.type == 'OrthographicCamera' ) {
|
|
|
+ if ( this.enabled && this.enableZoom ) {
|
|
|
|
|
|
- this._v2_1.copy( this.getCursorPosition( cursorX, cursorY, canvas ) );
|
|
|
- this._v3_1.set( this._v2_1.x, this._v2_1.y, 0 );
|
|
|
+ let modifier = null;
|
|
|
|
|
|
- return this._v3_1.clone();
|
|
|
+ if ( event.ctrlKey || event.metaKey ) {
|
|
|
|
|
|
- } else if ( camera.type == 'PerspectiveCamera' ) {
|
|
|
+ modifier = 'CTRL';
|
|
|
|
|
|
- this._v2_1.copy( this.getCursorNDC( cursorX, cursorY, canvas ) );
|
|
|
+ } else if ( event.shiftKey ) {
|
|
|
|
|
|
- //unproject cursor on the near plane
|
|
|
- this._v3_1.set( this._v2_1.x, this._v2_1.y, - 1 );
|
|
|
- this._v3_1.applyMatrix4( camera.projectionMatrixInverse );
|
|
|
+ modifier = 'SHIFT';
|
|
|
|
|
|
- const rayDir = this._v3_1.clone().normalize(); //unprojected ray direction
|
|
|
+ }
|
|
|
|
|
|
- // camera
|
|
|
- // |\
|
|
|
- // | \
|
|
|
- // | \
|
|
|
- // h | \
|
|
|
- // | \
|
|
|
- // | \
|
|
|
- // _ _ | _ _ _\ _ _ near plane
|
|
|
- // l
|
|
|
+ const mouseOp = this.getOpFromAction( 'WHEEL', modifier );
|
|
|
|
|
|
- const h = this._v3_1.z;
|
|
|
- const l = Math.sqrt( Math.pow( this._v3_1.x, 2 ) + Math.pow( this._v3_1.y, 2 ) );
|
|
|
- let cameraGizmoDistance;
|
|
|
+ if ( mouseOp != null ) {
|
|
|
|
|
|
- if ( initialDistance ) {
|
|
|
+ event.preventDefault();
|
|
|
+ this.dispatchEvent( _startEvent );
|
|
|
|
|
|
- cameraGizmoDistance = this._v3_1.setFromMatrixPosition( this._cameraMatrixState0 ).distanceTo( this._v3_2.setFromMatrixPosition( this._gizmoMatrixState0 ) );
|
|
|
+ const notchDeltaY = 125; //distance of one notch of mouse wheel
|
|
|
+ let sgn = event.deltaY / notchDeltaY;
|
|
|
|
|
|
- } else {
|
|
|
+ let size = 1;
|
|
|
|
|
|
- cameraGizmoDistance = camera.position.distanceTo( this._gizmos.position );
|
|
|
+ if ( sgn > 0 ) {
|
|
|
|
|
|
- }
|
|
|
+ size = 1 / this.scaleFactor;
|
|
|
|
|
|
- /*
|
|
|
- * calculate intersection point between unprojected ray and the plane
|
|
|
- *|y = mx + q
|
|
|
- *|y = 0
|
|
|
- *
|
|
|
- * x = -q/m
|
|
|
- */
|
|
|
- if ( l == 0 ) {
|
|
|
+ } else if ( sgn < 0 ) {
|
|
|
|
|
|
- //ray aligned with camera
|
|
|
- rayDir.set( 0, 0, 0 );
|
|
|
- return rayDir;
|
|
|
+ size = this.scaleFactor;
|
|
|
|
|
|
}
|
|
|
|
|
|
- const m = h / l;
|
|
|
- const q = cameraGizmoDistance;
|
|
|
- const x = - q / m;
|
|
|
+ switch ( mouseOp ) {
|
|
|
|
|
|
- const rayLength = Math.sqrt( Math.pow( q, 2 ) + Math.pow( x, 2 ) );
|
|
|
- rayDir.multiplyScalar( rayLength );
|
|
|
- rayDir.z = 0;
|
|
|
- return rayDir;
|
|
|
+ case 'ZOOM':
|
|
|
|
|
|
- }
|
|
|
+ this.updateTbState( STATE.SCALE, true );
|
|
|
|
|
|
- };
|
|
|
+ if ( sgn > 0 ) {
|
|
|
|
|
|
- /**
|
|
|
- * Update camera and gizmos state
|
|
|
- */
|
|
|
- updateMatrixState = () => {
|
|
|
+ size = 1 / ( Math.pow( this.scaleFactor, sgn ) );
|
|
|
|
|
|
- //update camera and gizmos state
|
|
|
- this._cameraMatrixState.copy( this.camera.matrix );
|
|
|
- this._gizmoMatrixState.copy( this._gizmos.matrix );
|
|
|
+ } else if ( sgn < 0 ) {
|
|
|
|
|
|
- if ( this.camera.isOrthographicCamera ) {
|
|
|
+ size = Math.pow( this.scaleFactor, - sgn );
|
|
|
|
|
|
- this._cameraProjectionState.copy( this.camera.projectionMatrix );
|
|
|
- this.camera.updateProjectionMatrix();
|
|
|
- this._zoomState = this.camera.zoom;
|
|
|
+ }
|
|
|
|
|
|
- } else if ( this.camera.isPerspectiveCamera ) {
|
|
|
+ if ( this.cursorZoom && this.enablePan ) {
|
|
|
|
|
|
- this._fovState = this.camera.fov;
|
|
|
+ let scalePoint;
|
|
|
|
|
|
- }
|
|
|
+ if ( this.camera.isOrthographicCamera ) {
|
|
|
|
|
|
- };
|
|
|
+ scalePoint = this.unprojectOnTbPlane( this.camera, event.clientX, event.clientY, this.domElement ).applyQuaternion( this.camera.quaternion ).multiplyScalar( 1 / this.camera.zoom ).add( this._gizmos.position );
|
|
|
|
|
|
- /**
|
|
|
- * Update the trackball FSA
|
|
|
- * @param {STATE} newState New state of the FSA
|
|
|
- * @param {Boolean} updateMatrices If matriices state should be updated
|
|
|
- */
|
|
|
- updateTbState = ( newState, updateMatrices ) => {
|
|
|
+ } else if ( this.camera.isPerspectiveCamera ) {
|
|
|
|
|
|
- this._state = newState;
|
|
|
- if ( updateMatrices ) {
|
|
|
+ scalePoint = this.unprojectOnTbPlane( this.camera, event.clientX, event.clientY, this.domElement ).applyQuaternion( this.camera.quaternion ).add( this._gizmos.position );
|
|
|
|
|
|
- this.updateMatrixState();
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ this.applyTransformMatrix( this.scale( size, scalePoint ) );
|
|
|
|
|
|
- };
|
|
|
+ } else {
|
|
|
|
|
|
- update = () => {
|
|
|
+ this.applyTransformMatrix( this.scale( size, this._gizmos.position ) );
|
|
|
|
|
|
- const EPS = 0.000001;
|
|
|
+ }
|
|
|
|
|
|
- if ( this.target.equals( this._currentTarget ) === false ) {
|
|
|
+ if ( this._grid != null ) {
|
|
|
|
|
|
- this._gizmos.position.copy( this.target ); //for correct radius calculation
|
|
|
- this._tbRadius = this.calculateTbRadius( this.camera );
|
|
|
- this.makeGizmos( this.target, this._tbRadius );
|
|
|
- this._currentTarget.copy( this.target );
|
|
|
+ this.disposeGrid();
|
|
|
+ this.drawGrid();
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- //check min/max parameters
|
|
|
- if ( this.camera.isOrthographicCamera ) {
|
|
|
+ this.updateTbState( STATE.IDLE, false );
|
|
|
|
|
|
- //check zoom
|
|
|
- if ( this.camera.zoom > this.maxZoom || this.camera.zoom < this.minZoom ) {
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
+ this.dispatchEvent( _endEvent );
|
|
|
|
|
|
- const newZoom = MathUtils.clamp( this.camera.zoom, this.minZoom, this.maxZoom );
|
|
|
- this.applyTransformMatrix( this.scale( newZoom / this.camera.zoom, this._gizmos.position, true ) );
|
|
|
+ break;
|
|
|
|
|
|
- }
|
|
|
+ case 'FOV':
|
|
|
|
|
|
- } else if ( this.camera.isPerspectiveCamera ) {
|
|
|
+ if ( this.camera.isPerspectiveCamera ) {
|
|
|
|
|
|
- //check distance
|
|
|
- const distance = this.camera.position.distanceTo( this._gizmos.position );
|
|
|
+ this.updateTbState( STATE.FOV, true );
|
|
|
|
|
|
- if ( distance > this.maxDistance + EPS || distance < this.minDistance - EPS ) {
|
|
|
|
|
|
- const newDistance = MathUtils.clamp( distance, this.minDistance, this.maxDistance );
|
|
|
- this.applyTransformMatrix( this.scale( newDistance / distance, this._gizmos.position ) );
|
|
|
- this.updateMatrixState();
|
|
|
+ //Vertigo effect
|
|
|
|
|
|
- }
|
|
|
+ // fov / 2
|
|
|
+ // |\
|
|
|
+ // | \
|
|
|
+ // | \
|
|
|
+ // x | \
|
|
|
+ // | \
|
|
|
+ // | \
|
|
|
+ // | _ _ _\
|
|
|
+ // y
|
|
|
|
|
|
- //check fov
|
|
|
- if ( this.camera.fov < this.minFov || this.camera.fov > this.maxFov ) {
|
|
|
+ //check for iOs shift shortcut
|
|
|
+ if ( event.deltaX != 0 ) {
|
|
|
|
|
|
- this.camera.fov = MathUtils.clamp( this.camera.fov, this.minFov, this.maxFov );
|
|
|
- this.camera.updateProjectionMatrix();
|
|
|
+ sgn = event.deltaX / notchDeltaY;
|
|
|
|
|
|
- }
|
|
|
+ size = 1;
|
|
|
|
|
|
- const oldRadius = this._tbRadius;
|
|
|
- this._tbRadius = this.calculateTbRadius( this.camera );
|
|
|
+ if ( sgn > 0 ) {
|
|
|
|
|
|
- if ( oldRadius < this._tbRadius - EPS || oldRadius > this._tbRadius + EPS ) {
|
|
|
+ size = 1 / ( Math.pow( this.scaleFactor, sgn ) );
|
|
|
|
|
|
- const scale = ( this._gizmos.scale.x + this._gizmos.scale.y + this._gizmos.scale.z ) / 3;
|
|
|
- const newRadius = this._tbRadius / scale;
|
|
|
- const curve = new EllipseCurve( 0, 0, newRadius, newRadius );
|
|
|
- const points = curve.getPoints( this._curvePts );
|
|
|
- const curveGeometry = new BufferGeometry().setFromPoints( points );
|
|
|
+ } else if ( sgn < 0 ) {
|
|
|
|
|
|
- for ( const gizmo in this._gizmos.children ) {
|
|
|
+ size = Math.pow( this.scaleFactor, - sgn );
|
|
|
|
|
|
- this._gizmos.children[ gizmo ].geometry = curveGeometry;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ this._v3_1.setFromMatrixPosition( this._cameraMatrixState );
|
|
|
+ const x = this._v3_1.distanceTo( this._gizmos.position );
|
|
|
+ let xNew = x / size; //distance between camera and gizmos if scale(size, scalepoint) would be performed
|
|
|
|
|
|
- }
|
|
|
+ //check min and max distance
|
|
|
+ xNew = MathUtils.clamp( xNew, this.minDistance, this.maxDistance );
|
|
|
|
|
|
- this.camera.lookAt( this._gizmos.position );
|
|
|
+ const y = x * Math.tan( MathUtils.DEG2RAD * this.camera.fov * 0.5 );
|
|
|
|
|
|
- };
|
|
|
+ //calculate new fov
|
|
|
+ let newFov = MathUtils.RAD2DEG * ( Math.atan( y / xNew ) * 2 );
|
|
|
|
|
|
- setStateFromJSON = ( json ) => {
|
|
|
+ //check min and max fov
|
|
|
+ if ( newFov > this.maxFov ) {
|
|
|
|
|
|
- const state = JSON.parse( json );
|
|
|
+ newFov = this.maxFov;
|
|
|
|
|
|
- if ( state.arcballState != undefined ) {
|
|
|
+ } else if ( newFov < this.minFov ) {
|
|
|
|
|
|
- this._cameraMatrixState.fromArray( state.arcballState.cameraMatrix.elements );
|
|
|
- this._cameraMatrixState.decompose( this.camera.position, this.camera.quaternion, this.camera.scale );
|
|
|
+ newFov = this.minFov;
|
|
|
|
|
|
- this.camera.up.copy( state.arcballState.cameraUp );
|
|
|
- this.camera.near = state.arcballState.cameraNear;
|
|
|
- this.camera.far = state.arcballState.cameraFar;
|
|
|
+ }
|
|
|
|
|
|
- this.camera.zoom = state.arcballState.cameraZoom;
|
|
|
+ const newDistance = y / Math.tan( MathUtils.DEG2RAD * ( newFov / 2 ) );
|
|
|
+ size = x / newDistance;
|
|
|
|
|
|
- if ( this.camera.isPerspectiveCamera ) {
|
|
|
+ this.setFov( newFov );
|
|
|
+ this.applyTransformMatrix( this.scale( size, this._gizmos.position, false ) );
|
|
|
|
|
|
- this.camera.fov = state.arcballState.cameraFov;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ if ( this._grid != null ) {
|
|
|
|
|
|
- this._gizmoMatrixState.fromArray( state.arcballState.gizmoMatrix.elements );
|
|
|
- this._gizmoMatrixState.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
|
|
|
+ this.disposeGrid();
|
|
|
+ this.drawGrid();
|
|
|
|
|
|
- this.camera.updateMatrix();
|
|
|
- this.camera.updateProjectionMatrix();
|
|
|
+ }
|
|
|
|
|
|
- this._gizmos.updateMatrix();
|
|
|
+ this.updateTbState( STATE.IDLE, false );
|
|
|
|
|
|
- this._tbRadius = this.calculateTbRadius( this.camera );
|
|
|
- const gizmoTmp = new Matrix4().copy( this._gizmoMatrixState0 );
|
|
|
- this.makeGizmos( this._gizmos.position, this._tbRadius );
|
|
|
- this._gizmoMatrixState0.copy( gizmoTmp );
|
|
|
+ this.dispatchEvent( _changeEvent );
|
|
|
+ this.dispatchEvent( _endEvent );
|
|
|
|
|
|
- this.camera.lookAt( this._gizmos.position );
|
|
|
- this.updateTbState( STATE.IDLE, false );
|
|
|
+ break;
|
|
|
|
|
|
- this.dispatchEvent( _changeEvent );
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
Mr.doob