super-three 0.147.1 → 0.154.0

package/examples/jsm/controls/ArcballControls.js

@@ -199,6 +199,7 @@ class ArcballControls extends EventDispatcher {
 		this.cursorZoom = false;	//if wheel zoom should be cursor centered
 		this.minFov = 5;
 		this.maxFov = 90;
+		this.rotateSpeed = 1;
 
 		this.enabled = true;
 		this.enablePan = true;
@@ -230,2986 +231,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
-
-	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 );
+		window.addEventListener( 'resize', this._onWindowResize );
 
+	}
 
-		for ( const gizmo in this._gizmos.children ) {
+	onSinglePanStart( event, operation ) {
 
-			this._gizmos.children[ gizmo ].geometry = curveGeometry;
+		if ( this.enabled ) {
 
-		}
+			this.dispatchEvent( _startEvent );
 
-		this.dispatchEvent( _changeEvent );
+			this.setCenter( event.clientX, event.clientY );
 
-	};
+			switch ( operation ) {
 
-	onContextMenu = ( event ) => {
+				case 'PAN':
 
-		if ( ! this.enabled ) {
+					if ( ! this.enablePan ) {
 
-			return;
+						return;
 
-		}
+					}
 
-		for ( let i = 0; i < this.mouseActions.length; i ++ ) {
+					if ( this._animationId != - 1 ) {
 
-			if ( this.mouseActions[ i ].mouse == 2 ) {
+						cancelAnimationFrame( this._animationId );
+						this._animationId = - 1;
+						this._timeStart = - 1;
 
-				//prevent only if button 2 is actually used
-				event.preventDefault();
-				break;
+						this.activateGizmos( false );
+						this.dispatchEvent( _changeEvent );
 
-			}
+					}
 
-		}
+					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 );
 
-	onPointerCancel = () => {
+					}
 
-		this._touchStart.splice( 0, this._touchStart.length );
-		this._touchCurrent.splice( 0, this._touchCurrent.length );
-		this._input = INPUT.NONE;
+					break;
 
-	};
+				case 'ROTATE':
 
-	onPointerDown = ( event ) => {
+					if ( ! this.enableRotate ) {
 
-		if ( event.button == 0 && event.isPrimary ) {
+						return;
 
-			this._downValid = true;
-			this._downEvents.push( event );
-			this._downStart = performance.now();
+					}
 
-		} else {
+					if ( this._animationId != - 1 ) {
 
-			this._downValid = false;
+						cancelAnimationFrame( this._animationId );
+						this._animationId = - 1;
+						this._timeStart = - 1;
 
-		}
+					}
 
-		if ( event.pointerType == 'touch' && this._input != INPUT.CURSOR ) {
+					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._touchStart.push( event );
-			this._touchCurrent.push( event );
+						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;
 
-			switch ( this._input ) {
+					}
 
-				case INPUT.NONE:
+					this.dispatchEvent( _changeEvent );
+					break;
 
-					//singleStart
-					this._input = INPUT.ONE_FINGER;
-					this.onSinglePanStart( event, 'ROTATE' );
+				case 'FOV':
 
-					window.addEventListener( 'pointermove', this.onPointerMove );
-					window.addEventListener( 'pointerup', this.onPointerUp );
+					if ( ! this.camera.isPerspectiveCamera || ! this.enableZoom ) {
 
-					break;
+						return;
 
-				case INPUT.ONE_FINGER:
-				case INPUT.ONE_FINGER_SWITCHED:
+					}
 
-					//doubleStart
-					this._input = INPUT.TWO_FINGER;
+					if ( this._animationId != - 1 ) {
 
-					this.onRotateStart();
-					this.onPinchStart();
-					this.onDoublePanStart();
+						cancelAnimationFrame( this._animationId );
+						this._animationId = - 1;
+						this._timeStart = - 1;
 
-					break;
+						this.activateGizmos( false );
+						this.dispatchEvent( _changeEvent );
 
-				case INPUT.TWO_FINGER:
+					}
 
-					//multipleStart
-					this._input = INPUT.MULT_FINGER;
-					this.onTriplePanStart( event );
+					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 if ( event.pointerType != 'touch' && this._input == INPUT.NONE ) {
-
-			let modifier = null;
+				case 'ZOOM':
 
-			if ( event.ctrlKey || event.metaKey ) {
+					if ( ! this.enableZoom ) {
 
-				modifier = 'CTRL';
+						return;
 
-			} else if ( event.shiftKey ) {
+					}
 
-				modifier = 'SHIFT';
+					if ( this._animationId != - 1 ) {
 
-			}
+						cancelAnimationFrame( this._animationId );
+						this._animationId = - 1;
+						this._timeStart = - 1;
 
-			this._mouseOp = this.getOpFromAction( event.button, modifier );
-			if ( this._mouseOp != null ) {
+						this.activateGizmos( false );
+						this.dispatchEvent( _changeEvent );
 
-				window.addEventListener( 'pointermove', this.onPointerMove );
-				window.addEventListener( 'pointerup', this.onPointerUp );
+					}
 
-				//singleStart
-				this._input = INPUT.CURSOR;
-				this._button = event.button;
-				this.onSinglePanStart( event, this._mouseOp );
+					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;
 
 			}
 
 		}
 
-	};
+	}
 
-	onPointerMove = ( event ) => {
+	onSinglePanMove( event, opState ) {
 
-		if ( event.pointerType == 'touch' && this._input != INPUT.CURSOR ) {
+		if ( this.enabled ) {
 
-			switch ( this._input ) {
+			const restart = opState != this._state;
+			this.setCenter( event.clientX, event.clientY );
 
-				case INPUT.ONE_FINGER:
+			switch ( opState ) {
 
-					//singleMove
-					this.updateTouchEvent( event );
+				case STATE.PAN:
 
-					this.onSinglePanMove( event, STATE.ROTATE );
-					break;
+					if ( this.enablePan ) {
 
-				case INPUT.ONE_FINGER_SWITCHED:
+						if ( restart ) {
 
-					const movement = this.calculatePointersDistance( this._touchCurrent[ 0 ], event ) * this._devPxRatio;
+							//switch to pan operation
 
-					if ( movement >= this._switchSensibility ) {
+							this.dispatchEvent( _endEvent );
+							this.dispatchEvent( _startEvent );
 
-						//singleMove
-						this._input = INPUT.ONE_FINGER;
-						this.updateTouchEvent( event );
+							this.updateTbState( opState, true );
+							this._startCursorPosition.copy( this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement ) );
+							if ( this.enableGrid ) {
 
-						this.onSinglePanStart( event, 'ROTATE' );
-						break;
+								this.drawGrid();
 
-					}
+							}
 
-					break;
+							this.activateGizmos( false );
 
-				case INPUT.TWO_FINGER:
+						} else {
 
-					//rotate/pan/pinchMove
-					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.onRotateMove();
-					this.onPinchMove();
-					this.onDoublePanMove();
+					}
 
 					break;
 
-				case INPUT.MULT_FINGER:
-
-					//multMove
-					this.updateTouchEvent( event );
+				case STATE.ROTATE:
 
-					this.onTriplePanMove( event );
-					break;
+					if ( this.enableRotate ) {
 
-			}
+						if ( restart ) {
 
-		} else if ( event.pointerType != 'touch' && this._input == INPUT.CURSOR ) {
+							//switch to rotate operation
 
-			let modifier = null;
+							this.dispatchEvent( _endEvent );
+							this.dispatchEvent( _startEvent );
 
-			if ( event.ctrlKey || event.metaKey ) {
+							this.updateTbState( opState, true );
+							this._startCursorPosition.copy( this.unprojectOnTbSurface( this.camera, _center.x, _center.y, this.domElement, this._tbRadius ) );
 
-				modifier = 'CTRL';
+							if ( this.enableGrid ) {
 
-			} else if ( event.shiftKey ) {
+								this.disposeGrid();
 
-				modifier = 'SHIFT';
+							}
 
-			}
+							this.activateGizmos( true );
 
-			const mouseOpState = this.getOpStateFromAction( this._button, modifier );
+						} else {
 
-			if ( mouseOpState != null ) {
+							//continue with rotate operation
+							this._currentCursorPosition.copy( this.unprojectOnTbSurface( this.camera, _center.x, _center.y, this.domElement, this._tbRadius ) );
 
-				this.onSinglePanMove( event, mouseOpState );
+							const distance = this._startCursorPosition.distanceTo( this._currentCursorPosition );
+							const angle = this._startCursorPosition.angleTo( this._currentCursorPosition );
+							const amount = Math.max( distance / this._tbRadius, angle ) * this.rotateSpeed; //effective rotation angle
 
-			}
+							this.applyTransformMatrix( this.rotate( this.calculateRotationAxis( this._startCursorPosition, this._currentCursorPosition ), amount ) );
 
-		}
+							if ( this.enableAnimations ) {
 
-		//checkDistance
-		if ( this._downValid ) {
+								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 movement = this.calculatePointersDistance( this._downEvents[ this._downEvents.length - 1 ], event ) * this._devPxRatio;
-			if ( movement > this._movementThreshold ) {
+							}
 
-				this._downValid = false;
+						}
 
-			}
+					}
 
-		}
+					break;
 
-	};
+				case STATE.SCALE:
 
-	onPointerUp = ( event ) => {
+					if ( this.enableZoom ) {
 
-		if ( event.pointerType == 'touch' && this._input != INPUT.CURSOR ) {
+						if ( restart ) {
 
-			const nTouch = this._touchCurrent.length;
+							//switch to zoom operation
 
-			for ( let i = 0; i < nTouch; i ++ ) {
+							this.dispatchEvent( _endEvent );
+							this.dispatchEvent( _startEvent );
 
-				if ( this._touchCurrent[ i ].pointerId == event.pointerId ) {
+							this.updateTbState( opState, true );
+							this._startCursorPosition.setY( this.getCursorNDC( _center.x, _center.y, this.domElement ).y * 0.5 );
+							this._currentCursorPosition.copy( this._startCursorPosition );
 
-					this._touchCurrent.splice( i, 1 );
-					this._touchStart.splice( i, 1 );
-					break;
+							if ( this.enableGrid ) {
 
-				}
+								this.disposeGrid();
 
-			}
+							}
 
-			switch ( this._input ) {
+							this.activateGizmos( false );
 
-				case INPUT.ONE_FINGER:
-				case INPUT.ONE_FINGER_SWITCHED:
+						} else {
 
-					//singleEnd
-					window.removeEventListener( 'pointermove', this.onPointerMove );
-					window.removeEventListener( 'pointerup', this.onPointerUp );
+							//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._input = INPUT.NONE;
-					this.onSinglePanEnd();
+							const movement = this._currentCursorPosition.y - this._startCursorPosition.y;
 
-					break;
+							let size = 1;
 
-				case INPUT.TWO_FINGER:
+							if ( movement < 0 ) {
 
-					//doubleEnd
-					this.onDoublePanEnd( event );
-					this.onPinchEnd( event );
-					this.onRotateEnd( event );
+								size = 1 / ( Math.pow( this.scaleFactor, - movement * screenNotches ) );
 
-					//switching to singleStart
-					this._input = INPUT.ONE_FINGER_SWITCHED;
+							} else if ( movement > 0 ) {
 
-					break;
+								size = Math.pow( this.scaleFactor, movement * screenNotches );
 
-				case INPUT.MULT_FINGER:
+							}
 
-					if ( this._touchCurrent.length == 0 ) {
+							this._v3_1.setFromMatrixPosition( this._gizmoMatrixState );
 
-						window.removeEventListener( 'pointermove', this.onPointerMove );
-						window.removeEventListener( 'pointerup', this.onPointerUp );
+							this.applyTransformMatrix( this.scale( size, this._v3_1 ) );
 
-						//multCancel
-						this._input = INPUT.NONE;
-						this.onTriplePanEnd();
+						}
 
 					}
 
 					break;
 
-			}
+				case STATE.FOV:
 
-		} else if ( event.pointerType != 'touch' && this._input == INPUT.CURSOR ) {
+					if ( this.enableZoom && this.camera.isPerspectiveCamera ) {
 
-			window.removeEventListener( 'pointermove', this.onPointerMove );
-			window.removeEventListener( 'pointerup', this.onPointerUp );
+						if ( restart ) {
 
-			this._input = INPUT.NONE;
-			this.onSinglePanEnd();
-			this._button = - 1;
+							//switch to fov operation
 
-		}
+							this.dispatchEvent( _endEvent );
+							this.dispatchEvent( _startEvent );
 
-		if ( event.isPrimary ) {
+							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._downValid ) {
+							if ( this.enableGrid ) {
 
-				const downTime = event.timeStamp - this._downEvents[ this._downEvents.length - 1 ].timeStamp;
+								this.disposeGrid();
 
-				if ( downTime <= this._maxDownTime ) {
+							}
 
-					if ( this._nclicks == 0 ) {
+							this.activateGizmos( false );
 
-						//first valid click detected
-						this._nclicks = 1;
-						this._clickStart = performance.now();
+						} else {
 
-					} 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 );
 
-						const clickInterval = event.timeStamp - this._clickStart;
-						const movement = this.calculatePointersDistance( this._downEvents[ 1 ], this._downEvents[ 0 ] ) * this._devPxRatio;
+							const movement = this._currentCursorPosition.y - this._startCursorPosition.y;
 
-						if ( clickInterval <= this._maxInterval && movement <= this._posThreshold ) {
+							let size = 1;
 
-							//second valid click detected
-							//fire double tap and reset values
-							this._nclicks = 0;
-							this._downEvents.splice( 0, this._downEvents.length );
-							this.onDoubleTap( event );
+							if ( movement < 0 ) {
 
-						} else {
+								size = 1 / ( Math.pow( this.scaleFactor, - movement * screenNotches ) );
 
-							//new 'first click'
-							this._nclicks = 1;
-							this._downEvents.shift();
-							this._clickStart = performance.now();
+							} else if ( movement > 0 ) {
 
-						}
+								size = Math.pow( this.scaleFactor, movement * screenNotches );
 
-					}
+							}
 
-				} 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
 
-					this._downValid = false;
-					this._nclicks = 0;
-					this._downEvents.splice( 0, this._downEvents.length );
+							//check min and max distance
+							xNew = MathUtils.clamp( xNew, this.minDistance, this.maxDistance );
 
-				}
+							const y = x * Math.tan( MathUtils.DEG2RAD * this._fovState * 0.5 );
 
-			} else {
+							//calculate new fov
+							let newFov = MathUtils.RAD2DEG * ( Math.atan( y / xNew ) * 2 );
 
-				this._nclicks = 0;
-				this._downEvents.splice( 0, this._downEvents.length );
+							//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 );
 
-		}
+							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 );
+
+						}
 
-	};
+					}
 
-	onWheel = ( event ) => {
+					break;
 
-		if ( this.enabled && this.enableZoom ) {
+			}
+
+			this.dispatchEvent( _changeEvent );
+
+		}
+
+	}
 
-			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
+				state = STATE.FOV;
+				break;
 
-							//check min and max distance
-							xNew = MathUtils.clamp( xNew, this.minDistance, this.maxDistance );
+		}
 
-							const y = x * Math.tan( MathUtils.DEG2RAD * this._fovState * 0.5 );
+		const action = {
 
-							//calculate new fov
-							let newFov = MathUtils.RAD2DEG * ( Math.atan( y / xNew ) * 2 );
+			operation: operation,
+			mouse: mouse,
+			key: key,
+			state: state
 
-							//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 );
+		for ( let i = 0; i < this.mouseActions.length; i ++ ) {
 
-							this.setFov( newFov );
-							this.applyTransformMatrix( this.scale( size, this._v3_2, false ) );
+			if ( this.mouseActions[ i ].mouse == action.mouse && this.mouseActions[ i ].key == action.key ) {
 
-							//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.mouseActions.splice( i, 1, action );
+				return true;
 
-						}
+			}
 
-					}
+		}
 
-					break;
+		this.mouseActions.push( action );
+		return true;
 
-			}
+	}
 
-			this.dispatchEvent( _changeEvent );
+	/**
+	 * 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.mouseActions[ i ].mouse == mouse && this.mouseActions[ i ].key == key ) {
 
-	onSinglePanEnd = () => {
+				this.mouseActions.splice( i, 1 );
+				return true;
 
-		if ( this._state == STATE.ROTATE ) {
+			}
 
+		}
 
-			if ( ! this.enableRotate ) {
+		return false;
 
-				return;
+	}
 
-			}
+	/**
+	 * 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 ) {
 
-			if ( this.enableAnimations ) {
+		let action;
 
-				//perform rotation animation
-				const deltaTime = ( performance.now() - this._timeCurrent );
-				if ( deltaTime < 120 ) {
+		for ( let i = 0; i < this.mouseActions.length; i ++ ) {
 
-					const w = Math.abs( ( this._wPrev + this._wCurr ) / 2 );
+			action = this.mouseActions[ i ];
+			if ( action.mouse == mouse && action.key == key ) {
 
-					const self = this;
-					this._animationId = window.requestAnimationFrame( function ( t ) {
+				return action.operation;
 
-						self.updateTbState( STATE.ANIMATION_ROTATE, true );
-						const rotationAxis = self.calculateRotationAxis( self._cursorPosPrev, self._cursorPosCurr );
+			}
 
-						self.onRotationAnim( t, rotationAxis, Math.min( w, self.wMax ) );
+		}
 
-					} );
+		if ( key != null ) {
 
-				} else {
+			for ( let i = 0; i < this.mouseActions.length; i ++ ) {
 
-					//cursor has been standing still for over 120 ms since last movement
-					this.updateTbState( STATE.IDLE, false );
-					this.activateGizmos( false );
-					this.dispatchEvent( _changeEvent );
+				action = this.mouseActions[ i ];
+				if ( action.mouse == mouse && action.key == null ) {
+
+					return action.operation;
 
 				}
 
-			} else {
+			}
 
-				this.updateTbState( STATE.IDLE, false );
-				this.activateGizmos( false );
-				this.dispatchEvent( _changeEvent );
+		}
 
-			}
+		return null;
 
-		} else if ( this._state == STATE.PAN || this._state == STATE.IDLE ) {
+	}
 
-			this.updateTbState( STATE.IDLE, false );
+	/**
+	 * 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 ( this.enableGrid ) {
+		let action;
 
-				this.disposeGrid();
+		for ( let i = 0; i < this.mouseActions.length; i ++ ) {
 
-			}
+			action = this.mouseActions[ i ];
+			if ( action.mouse == mouse && action.key == key ) {
 
-			this.activateGizmos( false );
-			this.dispatchEvent( _changeEvent );
+				return action.state;
 
+			}
 
 		}
 
-		this.dispatchEvent( _endEvent );
+		if ( key != null ) {
 
-	};
+			for ( let i = 0; i < this.mouseActions.length; i ++ ) {
 
-	onDoubleTap = ( event ) => {
+				action = this.mouseActions[ i ];
+				if ( action.mouse == mouse && action.key == null ) {
 
-		if ( this.enabled && this.enablePan && this.scene != null ) {
+					return action.state;
 
-			this.dispatchEvent( _startEvent );
+				}
 
-			this.setCenter( event.clientX, event.clientY );
-			const hitP = this.unprojectOnObj( this.getCursorNDC( _center.x, _center.y, this.domElement ), this.camera );
+			}
 
-			if ( hitP != null && this.enableAnimations ) {
+		}
 
-				const self = this;
-				if ( this._animationId != - 1 ) {
+		return null;
 
-					window.cancelAnimationFrame( this._animationId );
+	}
 
-				}
+	/**
+	 * Calculate the angle between two pointers
+	 * @param {PointerEvent} p1
+	 * @param {PointerEvent} p2
+	 * @returns {Number} The angle between two pointers in degrees
+	 */
+	getAngle( p1, p2 ) {
 
-				this._timeStart = - 1;
-				this._animationId = window.requestAnimationFrame( function ( t ) {
+		return Math.atan2( p2.clientY - p1.clientY, p2.clientX - p1.clientX ) * 180 / Math.PI;
 
-					self.updateTbState( STATE.ANIMATION_FOCUS, true );
-					self.onFocusAnim( t, hitP, self._cameraMatrixState, self._gizmoMatrixState );
+	}
 
-				} );
+	/**
+	 * Update a PointerEvent inside current pointerevents array
+	 * @param {PointerEvent} event
+	 */
+	updateTouchEvent( event ) {
 
-			} else if ( hitP != null && ! this.enableAnimations ) {
+		for ( let i = 0; i < this._touchCurrent.length; i ++ ) {
 
-				this.updateTbState( STATE.FOCUS, true );
-				this.focus( hitP, this.scaleFactor );
-				this.updateTbState( STATE.IDLE, false );
-				this.dispatchEvent( _changeEvent );
+			if ( this._touchCurrent[ i ].pointerId == event.pointerId ) {
+
+				this._touchCurrent.splice( i, 1, event );
+				break;
 
 			}
 
 		}
 
-		this.dispatchEvent( _endEvent );
-
-	};
+	}
 
-	onDoublePanStart = () => {
+	/**
+	 * 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.dispatchEvent( _startEvent );
+			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();
 
-			this.updateTbState( STATE.PAN, true );
+			//update camera up vector
+			if ( this._state == STATE.ROTATE || this._state == STATE.ZROTATE || this._state == STATE.ANIMATION_ROTATE ) {
 
-			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 );
+				this.camera.up.copy( this._upState ).applyQuaternion( this.camera.quaternion );
 
-			this.activateGizmos( false );
+			}
 
 		}
 
-	};
+		if ( transformation.gizmos != null ) {
 
-	onDoublePanMove = () => {
+			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.enabled && this.enablePan ) {
+		}
 
-			this.setCenter( ( this._touchCurrent[ 0 ].clientX + this._touchCurrent[ 1 ].clientX ) / 2, ( this._touchCurrent[ 0 ].clientY + this._touchCurrent[ 1 ].clientY ) / 2 );
+		if ( this._state == STATE.SCALE || this._state == STATE.FOCUS || this._state == STATE.ANIMATION_FOCUS ) {
 
-			if ( this._state != STATE.PAN ) {
+			this._tbRadius = this.calculateTbRadius( this.camera );
 
-				this.updateTbState( STATE.PAN, true );
-				this._startCursorPosition.copy( this._currentCursorPosition );
+			if ( this.adjustNearFar ) {
 
-			}
+				const cameraDistance = this.camera.position.distanceTo( this._gizmos.position );
 
-			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 );
+				const bb = new Box3();
+				bb.setFromObject( this._gizmos );
+				const sphere = new Sphere();
+				bb.getBoundingSphere( sphere );
 
-		}
+				const adjustedNearPosition = Math.max( this._nearPos0, sphere.radius + sphere.center.length() );
+				const regularNearPosition = cameraDistance - this._initialNear;
+
+				const minNearPos = Math.min( adjustedNearPosition, regularNearPosition );
+				this.camera.near = cameraDistance - minNearPos;
 
-	};
 
-	onDoublePanEnd = () => {
+				const adjustedFarPosition = Math.min( this._farPos0, - sphere.radius + sphere.center.length() );
+				const regularFarPosition = cameraDistance - this._initialFar;
 
-		this.updateTbState( STATE.IDLE, false );
-		this.dispatchEvent( _endEvent );
+				const minFarPos = Math.min( adjustedFarPosition, regularFarPosition );
+				this.camera.far = cameraDistance - minFarPos;
 
-	};
+				this.camera.updateProjectionMatrix();
 
+			} else {
 
-	onRotateStart = () => {
+				let update = false;
 
-		if ( this.enabled && this.enableRotate ) {
+				if ( this.camera.near != this._initialNear ) {
 
-			this.dispatchEvent( _startEvent );
+					this.camera.near = this._initialNear;
+					update = true;
 
-			this.updateTbState( STATE.ZROTATE, true );
+				}
 
-			//this._startFingerRotation = event.rotation;
+				if ( this.camera.far != this._initialFar ) {
 
-			this._startFingerRotation = this.getAngle( this._touchCurrent[ 1 ], this._touchCurrent[ 0 ] ) + this.getAngle( this._touchStart[ 1 ], this._touchStart[ 0 ] );
-			this._currentFingerRotation = this._startFingerRotation;
+					this.camera.far = this._initialFar;
+					update = true;
 
-			this.camera.getWorldDirection( this._rotationAxis ); //rotation axis
+				}
 
-			if ( ! this.enablePan && ! this.enableZoom ) {
+				if ( update ) {
 
-				this.activateGizmos( true );
+					this.camera.updateProjectionMatrix();
+
+				}
 
 			}
 
 		}
 
-	};
-
-	onRotateMove = () => {
+	}
 
-		if ( this.enabled && this.enableRotate ) {
+	/**
+	 * 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 ) {
 
-			this.setCenter( ( this._touchCurrent[ 0 ].clientX + this._touchCurrent[ 1 ].clientX ) / 2, ( this._touchCurrent[ 0 ].clientY + this._touchCurrent[ 1 ].clientY ) / 2 );
-			let rotationPoint;
+		const s = p1 - p0;
+		const t = ( t1 - t0 ) / 1000;
+		if ( t == 0 ) {
 
-			if ( this._state != STATE.ZROTATE ) {
+			return 0;
 
-				this.updateTbState( STATE.ZROTATE, true );
-				this._startFingerRotation = this._currentFingerRotation;
+		}
 
-			}
+		return s / t;
 
-			//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 ) {
+	/**
+	 * 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 ) {
 
-				rotationPoint = new Vector3().setFromMatrixPosition( this._gizmoMatrixState );
+		return Math.sqrt( Math.pow( p1.clientX - p0.clientX, 2 ) + Math.pow( p1.clientY - p0.clientY, 2 ) );
 
-			} 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 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._rotationMatrix.extractRotation( this._cameraMatrixState );
+		this._quat.setFromRotationMatrix( this._rotationMatrix );
 
-			const amount = MathUtils.DEG2RAD * ( this._startFingerRotation - this._currentFingerRotation );
+		this._rotationAxis.crossVectors( vec1, vec2 ).applyQuaternion( this._quat );
+		return this._rotationAxis.normalize().clone();
 
-			this.applyTransformMatrix( this.zRotate( rotationPoint, amount ) );
-			this.dispatchEvent( _changeEvent );
+	}
 
-		}
+	/**
+	 * 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 );
 
-	onRotateEnd = () => {
+		if ( camera.type == 'PerspectiveCamera' ) {
 
-		this.updateTbState( STATE.IDLE, false );
-		this.activateGizmos( false );
-		this.dispatchEvent( _endEvent );
+			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;
 
-	};
+		} else if ( camera.type == 'OrthographicCamera' ) {
 
-	onPinchStart = () => {
+			return Math.min( camera.top, camera.right ) * this.radiusFactor;
 
-		if ( this.enabled && this.enableZoom ) {
+		}
 
-			this.dispatchEvent( _startEvent );
-			this.updateTbState( STATE.SCALE, true );
+	}
 
-			this._startFingerDistance = this.calculatePointersDistance( this._touchCurrent[ 0 ], this._touchCurrent[ 1 ] );
-			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 ) {
 
-			this.activateGizmos( false );
+		//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 );
 
-		}
+		_gizmoMatrixStateTemp.copy( this._gizmoMatrixState );
+		this._gizmoMatrixState.premultiply( this._translationMatrix );
+		this._gizmoMatrixState.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
 
-	};
+		_cameraMatrixStateTemp.copy( this._cameraMatrixState );
+		this._cameraMatrixState.premultiply( this._translationMatrix );
+		this._cameraMatrixState.decompose( this.camera.position, this.camera.quaternion, this.camera.scale );
 
-	onPinchMove = () => {
+		//apply zoom
+		if ( this.enableZoom ) {
 
-		if ( this.enabled && this.enableZoom ) {
+			this.applyTransformMatrix( this.scale( size, this._gizmos.position ) );
 
-			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._state != STATE.SCALE ) {
+		this._gizmoMatrixState.copy( _gizmoMatrixStateTemp );
+		this._cameraMatrixState.copy( _cameraMatrixStateTemp );
 
-				this._startFingerDistance = this._currentFingerDistance;
-				this.updateTbState( STATE.SCALE, true );
+	}
 
-			}
+	/**
+	 * Draw a grid and add it to the scene
+	 */
+	drawGrid() {
 
-			this._currentFingerDistance = Math.max( this.calculatePointersDistance( this._touchCurrent[ 0 ], this._touchCurrent[ 1 ] ), minDistance * this._devPxRatio );
-			const amount = this._currentFingerDistance / this._startFingerDistance;
+		if ( this.scene != null ) {
 
-			let scalePoint;
+			const color = 0x888888;
+			const multiplier = 3;
+			let size, divisions, maxLength, tick;
 
-			if ( ! this.enablePan ) {
+			if ( this.camera.isOrthographicCamera ) {
 
-				scalePoint = this._gizmos.position;
+				const width = this.camera.right - this.camera.left;
+				const height = this.camera.bottom - this.camera.top;
 
-			} else {
+				maxLength = Math.max( width, height );
+				tick = maxLength / 20;
 
-				if ( this.camera.isOrthographicCamera ) {
+				size = maxLength / this.camera.zoom * multiplier;
+				divisions = size / tick * this.camera.zoom;
 
-					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 ) {
 
-				} else if ( this.camera.isPerspectiveCamera ) {
+				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 ) );
 
-					scalePoint = this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement )
-						.applyQuaternion( this.camera.quaternion )
-						.add( this._gizmos.position );
+				maxLength = Math.tan( Math.max( halfFovV, halfFovH ) ) * distance * 2;
+				tick = maxLength / 20;
 
-				}
+				size = maxLength * multiplier;
+				divisions = size / tick;
 
 			}
 
-			this.applyTransformMatrix( this.scale( amount, scalePoint ) );
-			this.dispatchEvent( _changeEvent );
+			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 );
 
-	};
+				this.scene.add( this._grid );
 
-	onPinchEnd = () => {
+			}
 
-		this.updateTbState( STATE.IDLE, false );
-		this.dispatchEvent( _endEvent );
+		}
 
-	};
+	}
 
-	onTriplePanStart = () => {
+	/**
+	 * Remove all listeners, stop animations and clean scene
+	 */
+	dispose() {
 
-		if ( this.enabled && this.enableZoom ) {
+		if ( this._animationId != - 1 ) {
 
-			this.dispatchEvent( _startEvent );
+			window.cancelAnimationFrame( this._animationId );
 
-			this.updateTbState( STATE.SCALE, true );
+		}
 
-			//const center = event.center;
-			let clientX = 0;
-			let clientY = 0;
-			const nFingers = this._touchCurrent.length;
+		this.domElement.removeEventListener( 'pointerdown', this._onPointerDown );
+		this.domElement.removeEventListener( 'pointercancel', this._onPointerCancel );
+		this.domElement.removeEventListener( 'wheel', this._onWheel );
+		this.domElement.removeEventListener( 'contextmenu', this._onContextMenu );
 
-			for ( let i = 0; i < nFingers; i ++ ) {
+		window.removeEventListener( 'pointermove', this._onPointerMove );
+		window.removeEventListener( 'pointerup', this._onPointerUp );
 
-				clientX += this._touchCurrent[ i ].clientX;
-				clientY += this._touchCurrent[ i ].clientY;
+		window.removeEventListener( 'resize', this._onWindowResize );
 
-			}
+		if ( this.scene !== null ) this.scene.remove( this._gizmos );
+		this.disposeGrid();
 
-			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 );
+	/**
+	 * remove the grid from the scene
+	 */
+	disposeGrid() {
 
-		}
+		if ( this._grid != null && this.scene != null ) {
 
-	};
+			this.scene.remove( this._grid );
+			this._grid = null;
 
-	onTriplePanMove = () => {
+		}
 
-		if ( this.enabled && this.enableZoom ) {
+	}
 
-			//	  fov / 2
-			//		|\
-			//		| \
-			//		|  \
-			//	x	|	\
-			//		| 	 \
-			//		| 	  \
-			//		| _ _ _\
-			//			y
+	/**
+	 * 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 ) {
 
-			//const center = event.center;
-			let clientX = 0;
-			let clientY = 0;
-			const nFingers = this._touchCurrent.length;
+		return 1 - Math.pow( 1 - t, 3 );
 
-			for ( let i = 0; i < nFingers; i ++ ) {
+	}
 
-				clientX += this._touchCurrent[ i ].clientX;
-				clientY += this._touchCurrent[ i ].clientY;
+	/**
+	 * Make rotation gizmos more or less visible
+	 * @param {Boolean} isActive If true, make gizmos more visible
+	 */
+	activateGizmos( isActive ) {
 
-			}
+		const gizmoX = this._gizmos.children[ 0 ];
+		const gizmoY = this._gizmos.children[ 1 ];
+		const gizmoZ = this._gizmos.children[ 2 ];
 
-			this.setCenter( clientX / nFingers, clientY / nFingers );
+		if ( isActive ) {
 
-			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 );
+			gizmoX.material.setValues( { opacity: 1 } );
+			gizmoY.material.setValues( { opacity: 1 } );
+			gizmoZ.material.setValues( { opacity: 1 } );
 
-			const movement = this._currentCursorPosition.y - this._startCursorPosition.y;
+		} else {
 
-			let size = 1;
+			gizmoX.material.setValues( { opacity: 0.6 } );
+			gizmoY.material.setValues( { opacity: 0.6 } );
+			gizmoZ.material.setValues( { opacity: 0.6 } );
 
-			if ( movement < 0 ) {
+		}
 
-				size = 1 / ( Math.pow( this.scaleFactor, - movement * screenNotches ) );
+	}
 
-			} else if ( movement > 0 ) {
+	/**
+	 * 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 ) {
 
-				size = Math.pow( this.scaleFactor, movement * screenNotches );
+		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._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
+	/**
+	 * 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 ) {
 
-			//check min and max distance
-			xNew = MathUtils.clamp( xNew, this.minDistance, this.maxDistance );
+		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();
 
-			const y = x * Math.tan( MathUtils.DEG2RAD * this._fovState * 0.5 );
+	}
 
-			//calculate new fov
-			let newFov = MathUtils.RAD2DEG * ( Math.atan( y / xNew ) * 2 );
+	/**
+	 * Set the camera to be controlled
+	 * @param {Camera} camera The virtual camera to be controlled
+	 */
+	setCamera( camera ) {
 
-			//check min and max fov
-			newFov = MathUtils.clamp( newFov, this.minFov, this.maxFov );
+		camera.lookAt( this.target );
+		camera.updateMatrix();
 
-			const newDistance = y / Math.tan( MathUtils.DEG2RAD * ( newFov / 2 ) );
-			size = x / newDistance;
-			this._v3_2.setFromMatrixPosition( this._gizmoMatrixState );
+		//setting state
+		if ( camera.type == 'PerspectiveCamera' ) {
 
-			this.setFov( newFov );
-			this.applyTransformMatrix( this.scale( size, this._v3_2, false ) );
+			this._fov0 = camera.fov;
+			this._fovState = camera.fov;
 
-			//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 );
+		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 );
 
-	onTriplePanEnd = () => {
+		this.camera = camera;
+		this.camera.updateProjectionMatrix();
 
-		this.updateTbState( STATE.IDLE, false );
-		this.dispatchEvent( _endEvent );
-		//this.dispatchEvent( _changeEvent );
+		//making gizmos
+		this._tbRadius = this.calculateTbRadius( camera );
+		this.makeGizmos( this.target, this._tbRadius );
 
-	};
+	}
 
 	/**
-	 * Set _center's x/y coordinates
-	 * @param {Number} clientX
-	 * @param {Number} clientY
+	 * Set gizmos visibility
+	 * @param {Boolean} value Value of gizmos visibility
 	 */
-	setCenter = ( clientX, clientY ) => {
+	setGizmosVisible( value ) {
 
-		_center.x = clientX;
-		_center.y = clientY;
+		this._gizmos.visible = value;
+		this.dispatchEvent( _changeEvent );
 
-	};
+	}
 
 	/**
-	 * Set default mouse actions
+	 * Set gizmos radius factor and redraws gizmos
+	 * @param {Float} value Value of radius factor
 	 */
-	initializeMouseActions = () => {
-
-		this.setMouseAction( 'PAN', 0, 'CTRL' );
-		this.setMouseAction( 'PAN', 2 );
-
-		this.setMouseAction( 'ROTATE', 0 );
+	setTbRadius( value ) {
 
-		this.setMouseAction( 'ZOOM', 'WHEEL' );
-		this.setMouseAction( 'ZOOM', 1 );
+		this.radiusFactor = value;
+		this._tbRadius = this.calculateTbRadius( this.camera );
 
-		this.setMouseAction( 'FOV', 'WHEEL', 'SHIFT' );
-		this.setMouseAction( 'FOV', 1, 'SHIFT' );
+		const curve = new EllipseCurve( 0, 0, this._tbRadius, this._tbRadius );
+		const points = curve.getPoints( this._curvePts );
+		const curveGeometry = new BufferGeometry().setFromPoints( points );
 
 
-	};
+		for ( const gizmo in this._gizmos.children ) {
 
-	/**
-	 * 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 ) => {
+			this._gizmos.children[ gizmo ].geometry = curveGeometry;
 
-		if ( action1.operation == action2.operation ) {
+		}
 
-			if ( action1.mouse == action2.mouse && action1.key == action2.key ) {
+		this.dispatchEvent( _changeEvent );
 
-				return true;
+	}
 
-			} 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 ) {
 
-				return false;
+		const curve = new EllipseCurve( 0, 0, tbRadius, tbRadius );
+		const points = curve.getPoints( this._curvePts );
 
-			}
+		//geometry
+		const curveGeometry = new BufferGeometry().setFromPoints( points );
 
-		} else {
+		//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 } );
 
-			return false;
+		//line
+		const gizmoX = new Line( curveGeometry, curveMaterialX );
+		const gizmoY = new Line( curveGeometry, curveMaterialY );
+		const gizmoZ = new Line( curveGeometry, curveMaterialZ );
 
-		}
+		const rotation = Math.PI * 0.5;
+		gizmoX.rotation.x = rotation;
+		gizmoY.rotation.y = rotation;
 
-	};
 
-	/**
-	 * 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 ) => {
+		//setting state
+		this._gizmoMatrixState0.identity().setPosition( tbCenter );
+		this._gizmoMatrixState.copy( this._gizmoMatrixState0 );
 
-		const operationInput = [ 'PAN', 'ROTATE', 'ZOOM', 'FOV' ];
-		const mouseInput = [ 0, 1, 2, 'WHEEL' ];
-		const keyInput = [ 'CTRL', 'SHIFT', null ];
-		let state;
+		if ( this.camera.zoom !== 1 ) {
 
-		if ( ! operationInput.includes( operation ) || ! mouseInput.includes( mouse ) || ! keyInput.includes( key ) ) {
+			//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 );
 
-			//invalid parameters
-			return false;
+			this._gizmoMatrixState.premultiply( this._translationMatrix ).premultiply( this._scaleMatrix );
+			this._translationMatrix.makeTranslation( tbCenter.x, tbCenter.y, tbCenter.z );
+			this._gizmoMatrixState.premultiply( this._translationMatrix );
 
 		}
 
-		if ( mouse == 'WHEEL' ) {
+		this._gizmoMatrixState.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
 
-			if ( operation != 'ZOOM' && operation != 'FOV' ) {
+		//
 
-				//cannot associate 2D operation to 1D input
-				return false;
+		this._gizmos.traverse( function ( object ) {
 
-			}
+			if ( object.isLine ) {
 
-		}
+				object.geometry.dispose();
+				object.material.dispose();
 
-		switch ( operation ) {
+			}
 
-			case 'PAN':
+		} );
 
-				state = STATE.PAN;
-				break;
+		this._gizmos.clear();
 
-			case 'ROTATE':
+		//
 
-				state = STATE.ROTATE;
-				break;
+		this._gizmos.add( gizmoX );
+		this._gizmos.add( gizmoY );
+		this._gizmos.add( gizmoZ );
 
-			case 'ZOOM':
+	}
 
-				state = STATE.SCALE;
-				break;
+	/**
+	 * 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 ) {
 
-			case 'FOV':
+		if ( this._timeStart == - 1 ) {
 
-				state = STATE.FOV;
-				break;
+			//animation start
+			this._timeStart = time;
 
 		}
 
-		const action = {
+		if ( this._state == STATE.ANIMATION_FOCUS ) {
 
-			operation: operation,
-			mouse: mouse,
-			key: key,
-			state: state
+			const deltaTime = time - this._timeStart;
+			const animTime = deltaTime / this.focusAnimationTime;
 
-		};
+			this._gizmoMatrixState.copy( gizmoMatrix );
 
-		for ( let i = 0; i < this.mouseActions.length; i ++ ) {
+			if ( animTime >= 1 ) {
 
-			if ( this.mouseActions[ i ].mouse == action.mouse && this.mouseActions[ i ].key == action.key ) {
+				//animation end
 
-				this.mouseActions.splice( i, 1, action );
-				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 );
 
-		this.mouseActions.push( action );
-		return true;
+				this.dispatchEvent( _changeEvent );
 
-	};
+			} else {
 
-	/**
-	 * 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 ) => {
+				const amount = this.easeOutCubic( animTime );
+				const size = ( ( 1 - amount ) + ( this.scaleFactor * amount ) );
 
-		for ( let i = 0; i < this.mouseActions.length; i ++ ) {
+				this._gizmoMatrixState.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
+				this.focus( point, size, amount );
 
-			if ( this.mouseActions[ i ].mouse == mouse && this.mouseActions[ i ].key == key ) {
+				this.dispatchEvent( _changeEvent );
+				const self = this;
+				this._animationId = window.requestAnimationFrame( function ( t ) {
 
-				this.mouseActions.splice( i, 1 );
-				return true;
+					self.onFocusAnim( t, point, cameraMatrix, gizmoMatrix.clone() );
+
+				} );
 
 			}
 
-		}
+		} else {
 
-		return false;
+			//interrupt animation
 
-	};
+			this._animationId = - 1;
+			this._timeStart = - 1;
 
-	/**
-	 * 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 ) => {
-
-		let action;
+		}
 
-		for ( let i = 0; i < this.mouseActions.length; i ++ ) {
+	}
 
-			action = this.mouseActions[ i ];
-			if ( action.mouse == mouse && action.key == key ) {
+	/**
+	 * 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 ) {
 
-				return action.operation;
+		if ( this._timeStart == - 1 ) {
 
-			}
+			//animation start
+			this._anglePrev = 0;
+			this._angleCurrent = 0;
+			this._timeStart = time;
 
 		}
 
-		if ( key != null ) {
-
-			for ( let i = 0; i < this.mouseActions.length; i ++ ) {
-
-				action = this.mouseActions[ i ];
-				if ( action.mouse == mouse && action.key == null ) {
-
-					return action.operation;
-
-				}
+		if ( this._state == STATE.ANIMATION_ROTATE ) {
 
-			}
+			//w = w0 + alpha * t
+			const deltaTime = ( time - this._timeStart ) / 1000;
+			const w = w0 + ( ( - this.dampingFactor ) * deltaTime );
 
-		}
+			if ( w > 0 ) {
 
-		return null;
+				//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 );
 
-	/**
-	 * 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 ) => {
+				} );
 
-		let action;
+			} else {
 
-		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 == key ) {
+				this.updateTbState( STATE.IDLE, false );
+				this.activateGizmos( false );
 
-				return action.state;
+				this.dispatchEvent( _changeEvent );
 
 			}
 
-		}
-
-		if ( key != null ) {
+		} else {
 
-			for ( let i = 0; i < this.mouseActions.length; i ++ ) {
+			//interrupt animation
 
-				action = this.mouseActions[ i ];
-				if ( action.mouse == mouse && action.key == null ) {
+			this._animationId = - 1;
+			this._timeStart = - 1;
 
-					return action.state;
+			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 );
+			}
 
 		}
 
-	};
+	}
 
 }