@needle-tools/three 0.162.12 → 0.169.2

package/examples/jsm/controls/ArcballControls.js

@@ -1,4 +1,5 @@
 import {
+	Controls,
 	GridHelper,
 	EllipseCurve,
 	BufferGeometry,
@@ -12,8 +13,7 @@ import {
 	Vector2,
 	Vector3,
 	Matrix4,
-	MathUtils,
-	EventDispatcher
+	MathUtils
 } from 'three';
 
 //trackball state
@@ -76,13 +76,12 @@ const _scalePointTemp = new Vector3();
  * @param {HTMLElement} domElement Renderer's dom element
  * @param {Scene} scene The scene to be rendered
  */
-class ArcballControls extends EventDispatcher {
+class ArcballControls extends Controls {
 
-	constructor( camera, domElement, scene = null ) {
+	constructor( camera, domElement = null, scene = null ) {
+
+		super( camera, domElement );
 
-		super();
-		this.camera = null;
-		this.domElement = domElement;
 		this.scene = scene;
 		this.target = new Vector3();
 		this._currentTarget = new Vector3();
@@ -201,7 +200,6 @@ class ArcballControls extends EventDispatcher {
 		this.maxFov = 90;
 		this.rotateSpeed = 1;
 
-		this.enabled = true;
 		this.enablePan = true;
 		this.enableRotate = true;
 		this.enableZoom = true;
@@ -226,11 +224,10 @@ class ArcballControls extends EventDispatcher {
 
 		}
 
-		this.domElement.style.touchAction = 'none';
-		this._devPxRatio = window.devicePixelRatio;
-
 		this.initializeMouseActions();
 
+		// event listeners
+
 		this._onContextMenu = onContextMenu.bind( this );
 		this._onWheel = onWheel.bind( this );
 		this._onPointerUp = onPointerUp.bind( this );
@@ -239,6 +236,19 @@ class ArcballControls extends EventDispatcher {
 		this._onPointerCancel = onPointerCancel.bind( this );
 		this._onWindowResize = onWindowResize.bind( this );
 
+		if ( domElement !== null ) {
+
+			this.connect();
+
+		}
+
+	}
+
+	connect() {
+
+		this.domElement.style.touchAction = 'none';
+		this._devPxRatio = window.devicePixelRatio;
+
 		this.domElement.addEventListener( 'contextmenu', this._onContextMenu );
 		this.domElement.addEventListener( 'wheel', this._onWheel );
 		this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
@@ -248,6 +258,20 @@ class ArcballControls extends EventDispatcher {
 
 	}
 
+	disconnect() {
+
+		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 );
+
+		window.removeEventListener( 'resize', this._onWindowResize );
+
+	}
+
 	onSinglePanStart( event, operation ) {
 
 		if ( this.enabled ) {
@@ -278,7 +302,7 @@ class ArcballControls extends EventDispatcher {
 					}
 
 					this.updateTbState( STATE.PAN, true );
-					this._startCursorPosition.copy( this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement ) );
+					this._startCursorPosition.copy( this.unprojectOnTbPlane( this.object, _center.x, _center.y, this.domElement ) );
 					if ( this.enableGrid ) {
 
 						this.drawGrid();
@@ -305,7 +329,7 @@ class ArcballControls extends EventDispatcher {
 					}
 
 					this.updateTbState( STATE.ROTATE, true );
-					this._startCursorPosition.copy( this.unprojectOnTbSurface( this.camera, _center.x, _center.y, this.domElement, this._tbRadius ) );
+					this._startCursorPosition.copy( this.unprojectOnTbSurface( this.object, _center.x, _center.y, this.domElement, this._tbRadius ) );
 					this.activateGizmos( true );
 					if ( this.enableAnimations ) {
 
@@ -323,7 +347,7 @@ class ArcballControls extends EventDispatcher {
 
 				case 'FOV':
 
-					if ( ! this.camera.isPerspectiveCamera || ! this.enableZoom ) {
+					if ( ! this.object.isPerspectiveCamera || ! this.enableZoom ) {
 
 						return;
 
@@ -396,7 +420,7 @@ class ArcballControls extends EventDispatcher {
 							this.dispatchEvent( _startEvent );
 
 							this.updateTbState( opState, true );
-							this._startCursorPosition.copy( this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement ) );
+							this._startCursorPosition.copy( this.unprojectOnTbPlane( this.object, _center.x, _center.y, this.domElement ) );
 							if ( this.enableGrid ) {
 
 								this.drawGrid();
@@ -408,7 +432,7 @@ class ArcballControls extends EventDispatcher {
 						} else {
 
 							//continue with pan operation
-							this._currentCursorPosition.copy( this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement ) );
+							this._currentCursorPosition.copy( this.unprojectOnTbPlane( this.object, _center.x, _center.y, this.domElement ) );
 							this.applyTransformMatrix( this.pan( this._startCursorPosition, this._currentCursorPosition ) );
 
 						}
@@ -429,7 +453,7 @@ class ArcballControls extends EventDispatcher {
 							this.dispatchEvent( _startEvent );
 
 							this.updateTbState( opState, true );
-							this._startCursorPosition.copy( this.unprojectOnTbSurface( this.camera, _center.x, _center.y, this.domElement, this._tbRadius ) );
+							this._startCursorPosition.copy( this.unprojectOnTbSurface( this.object, _center.x, _center.y, this.domElement, this._tbRadius ) );
 
 							if ( this.enableGrid ) {
 
@@ -442,7 +466,7 @@ class ArcballControls extends EventDispatcher {
 						} else {
 
 							//continue with rotate operation
-							this._currentCursorPosition.copy( this.unprojectOnTbSurface( this.camera, _center.x, _center.y, this.domElement, this._tbRadius ) );
+							this._currentCursorPosition.copy( this.unprojectOnTbSurface( this.object, _center.x, _center.y, this.domElement, this._tbRadius ) );
 
 							const distance = this._startCursorPosition.distanceTo( this._currentCursorPosition );
 							const angle = this._startCursorPosition.angleTo( this._currentCursorPosition );
@@ -524,7 +548,7 @@ class ArcballControls extends EventDispatcher {
 
 				case STATE.FOV:
 
-					if ( this.enableZoom && this.camera.isPerspectiveCamera ) {
+					if ( this.enableZoom && this.object.isPerspectiveCamera ) {
 
 						if ( restart ) {
 
@@ -588,7 +612,7 @@ class ArcballControls extends EventDispatcher {
 							this.applyTransformMatrix( this.scale( size, this._v3_2, false ) );
 
 							//adjusting distance
-							_offset.copy( this._gizmos.position ).sub( this.camera.position ).normalize().multiplyScalar( newDistance / x );
+							_offset.copy( this._gizmos.position ).sub( this.object.position ).normalize().multiplyScalar( newDistance / x );
 							this._m4_1.makeTranslation( _offset.x, _offset.y, _offset.z );
 
 						}
@@ -678,7 +702,7 @@ class ArcballControls extends EventDispatcher {
 			this.dispatchEvent( _startEvent );
 
 			this.setCenter( event.clientX, event.clientY );
-			const hitP = this.unprojectOnObj( this.getCursorNDC( _center.x, _center.y, this.domElement ), this.camera );
+			const hitP = this.unprojectOnObj( this.getCursorNDC( _center.x, _center.y, this.domElement ), this.object );
 
 			if ( hitP != null && this.enableAnimations ) {
 
@@ -721,7 +745,7 @@ class ArcballControls extends EventDispatcher {
 			this.updateTbState( STATE.PAN, true );
 
 			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._startCursorPosition.copy( this.unprojectOnTbPlane( this.object, _center.x, _center.y, this.domElement, true ) );
 			this._currentCursorPosition.copy( this._startCursorPosition );
 
 			this.activateGizmos( false );
@@ -743,7 +767,7 @@ class ArcballControls extends EventDispatcher {
 
 			}
 
-			this._currentCursorPosition.copy( this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement, true ) );
+			this._currentCursorPosition.copy( this.unprojectOnTbPlane( this.object, _center.x, _center.y, this.domElement, true ) );
 			this.applyTransformMatrix( this.pan( this._startCursorPosition, this._currentCursorPosition, true ) );
 			this.dispatchEvent( _changeEvent );
 
@@ -771,7 +795,7 @@ class ArcballControls extends EventDispatcher {
 			this._startFingerRotation = this.getAngle( this._touchCurrent[ 1 ], this._touchCurrent[ 0 ] ) + this.getAngle( this._touchStart[ 1 ], this._touchStart[ 0 ] );
 			this._currentFingerRotation = this._startFingerRotation;
 
-			this.camera.getWorldDirection( this._rotationAxis ); //rotation axis
+			this.object.getWorldDirection( this._rotationAxis ); //rotation axis
 
 			if ( ! this.enablePan && ! this.enableZoom ) {
 
@@ -807,7 +831,7 @@ class ArcballControls extends EventDispatcher {
 			} 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 );
+				rotationPoint = this.unprojectOnTbPlane( this.object, _center.x, _center.y, this.domElement ).applyQuaternion( this.object.quaternion ).multiplyScalar( 1 / this.object.zoom ).add( this._v3_2 );
 
 			}
 
@@ -869,17 +893,17 @@ class ArcballControls extends EventDispatcher {
 
 			} else {
 
-				if ( this.camera.isOrthographicCamera ) {
+				if ( this.object.isOrthographicCamera ) {
 
-					scalePoint = this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement )
-						.applyQuaternion( this.camera.quaternion )
-						.multiplyScalar( 1 / this.camera.zoom )
+					scalePoint = this.unprojectOnTbPlane( this.object, _center.x, _center.y, this.domElement )
+						.applyQuaternion( this.object.quaternion )
+						.multiplyScalar( 1 / this.object.zoom )
 						.add( this._gizmos.position );
 
-				} else if ( this.camera.isPerspectiveCamera ) {
+				} else if ( this.object.isPerspectiveCamera ) {
 
-					scalePoint = this.unprojectOnTbPlane( this.camera, _center.x, _center.y, this.domElement )
-						.applyQuaternion( this.camera.quaternion )
+					scalePoint = this.unprojectOnTbPlane( this.object, _center.x, _center.y, this.domElement )
+						.applyQuaternion( this.object.quaternion )
 						.add( this._gizmos.position );
 
 				}
@@ -997,7 +1021,7 @@ class ArcballControls extends EventDispatcher {
 			this.applyTransformMatrix( this.scale( size, this._v3_2, false ) );
 
 			//adjusting distance
-			_offset.copy( this._gizmos.position ).sub( this.camera.position ).normalize().multiplyScalar( newDistance / x );
+			_offset.copy( this._gizmos.position ).sub( this.object.position ).normalize().multiplyScalar( newDistance / x );
 			this._m4_1.makeTranslation( _offset.x, _offset.y, _offset.z );
 
 			this.dispatchEvent( _changeEvent );
@@ -1297,13 +1321,13 @@ class ArcballControls extends EventDispatcher {
 		if ( transformation.camera != null ) {
 
 			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._m4_1.decompose( this.object.position, this.object.quaternion, this.object.scale );
+			this.object.updateMatrix();
 
 			//update camera up vector
 			if ( this._state == STATE.ROTATE || this._state == STATE.ZROTATE || this._state == STATE.ANIMATION_ROTATE ) {
 
-				this.camera.up.copy( this._upState ).applyQuaternion( this.camera.quaternion );
+				this.object.up.copy( this._upState ).applyQuaternion( this.object.quaternion );
 
 			}
 
@@ -1319,11 +1343,11 @@ class ArcballControls extends EventDispatcher {
 
 		if ( this._state == STATE.SCALE || this._state == STATE.FOCUS || this._state == STATE.ANIMATION_FOCUS ) {
 
-			this._tbRadius = this.calculateTbRadius( this.camera );
+			this._tbRadius = this.calculateTbRadius( this.object );
 
 			if ( this.adjustNearFar ) {
 
-				const cameraDistance = this.camera.position.distanceTo( this._gizmos.position );
+				const cameraDistance = this.object.position.distanceTo( this._gizmos.position );
 
 				const bb = new Box3();
 				bb.setFromObject( this._gizmos );
@@ -1334,38 +1358,38 @@ class ArcballControls extends EventDispatcher {
 				const regularNearPosition = cameraDistance - this._initialNear;
 
 				const minNearPos = Math.min( adjustedNearPosition, regularNearPosition );
-				this.camera.near = cameraDistance - minNearPos;
+				this.object.near = cameraDistance - minNearPos;
 
 
 				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;
+				this.object.far = cameraDistance - minFarPos;
 
-				this.camera.updateProjectionMatrix();
+				this.object.updateProjectionMatrix();
 
 			} else {
 
 				let update = false;
 
-				if ( this.camera.near != this._initialNear ) {
+				if ( this.object.near != this._initialNear ) {
 
-					this.camera.near = this._initialNear;
+					this.object.near = this._initialNear;
 					update = true;
 
 				}
 
-				if ( this.camera.far != this._initialFar ) {
+				if ( this.object.far != this._initialFar ) {
 
-					this.camera.far = this._initialFar;
+					this.object.far = this._initialFar;
 					update = true;
 
 				}
 
 				if ( update ) {
 
-					this.camera.updateProjectionMatrix();
+					this.object.updateProjectionMatrix();
 
 				}
 
@@ -1465,7 +1489,7 @@ class ArcballControls extends EventDispatcher {
 
 		_cameraMatrixStateTemp.copy( this._cameraMatrixState );
 		this._cameraMatrixState.premultiply( this._translationMatrix );
-		this._cameraMatrixState.decompose( this.camera.position, this.camera.quaternion, this.camera.scale );
+		this._cameraMatrixState.decompose( this.object.position, this.object.quaternion, this.object.scale );
 
 		//apply zoom
 		if ( this.enableZoom ) {
@@ -1490,22 +1514,22 @@ class ArcballControls extends EventDispatcher {
 			const multiplier = 3;
 			let size, divisions, maxLength, tick;
 
-			if ( this.camera.isOrthographicCamera ) {
+			if ( this.object.isOrthographicCamera ) {
 
-				const width = this.camera.right - this.camera.left;
-				const height = this.camera.bottom - this.camera.top;
+				const width = this.object.right - this.object.left;
+				const height = this.object.bottom - this.object.top;
 
 				maxLength = Math.max( width, height );
 				tick = maxLength / 20;
 
-				size = maxLength / this.camera.zoom * multiplier;
-				divisions = size / tick * this.camera.zoom;
+				size = maxLength / this.object.zoom * multiplier;
+				divisions = size / tick * this.object.zoom;
 
-			} else if ( this.camera.isPerspectiveCamera ) {
+			} else if ( this.object.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 ) );
+				const distance = this.object.position.distanceTo( this._gizmos.position );
+				const halfFovV = MathUtils.DEG2RAD * this.object.fov * 0.5;
+				const halfFovH = Math.atan( ( this.object.aspect ) * Math.tan( halfFovV ) );
 
 				maxLength = Math.tan( Math.max( halfFovV, halfFovH ) ) * distance * 2;
 				tick = maxLength / 20;
@@ -1520,7 +1544,7 @@ class ArcballControls extends EventDispatcher {
 				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.quaternion.copy( this.object.quaternion );
 				this._grid.rotateX( Math.PI * 0.5 );
 
 				this.scene.add( this._grid );
@@ -1542,15 +1566,7 @@ class ArcballControls extends EventDispatcher {
 
 		}
 
-		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 );
-
-		window.removeEventListener( 'resize', this._onWindowResize );
+		this.disconnect();
 
 		if ( this.scene !== null ) this.scene.remove( this._gizmos );
 		this.disposeGrid();
@@ -1634,8 +1650,8 @@ class ArcballControls extends EventDispatcher {
 	getCursorPosition( cursorX, cursorY, canvas ) {
 
 		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;
+		this._v2_1.x *= ( this.object.right - this.object.left ) * 0.5;
+		this._v2_1.y *= ( this.object.top - this.object.bottom ) * 0.5;
 		return this._v2_1.clone();
 
 	}
@@ -1674,8 +1690,8 @@ class ArcballControls extends EventDispatcher {
 		this._up0.copy( camera.up );
 		this._upState.copy( camera.up );
 
-		this.camera = camera;
-		this.camera.updateProjectionMatrix();
+		this.object = camera;
+		this.object.updateProjectionMatrix();
 
 		//making gizmos
 		this._tbRadius = this.calculateTbRadius( camera );
@@ -1701,7 +1717,7 @@ class ArcballControls extends EventDispatcher {
 	setTbRadius( value ) {
 
 		this.radiusFactor = value;
-		this._tbRadius = this.calculateTbRadius( this.camera );
+		this._tbRadius = this.calculateTbRadius( this.object );
 
 		const curve = new EllipseCurve( 0, 0, this._tbRadius, this._tbRadius );
 		const points = curve.getPoints( this._curvePts );
@@ -1750,10 +1766,10 @@ class ArcballControls extends EventDispatcher {
 		this._gizmoMatrixState0.identity().setPosition( tbCenter );
 		this._gizmoMatrixState.copy( this._gizmoMatrixState0 );
 
-		if ( this.camera.zoom !== 1 ) {
+		if ( this.object.zoom !== 1 ) {
 
 			//adapt gizmos size to camera zoom
-			const size = 1 / this.camera.zoom;
+			const size = 1 / this.object.zoom;
 			this._scaleMatrix.makeScale( size, size, size );
 			this._translationMatrix.makeTranslation( - tbCenter.x, - tbCenter.y, - tbCenter.z );
 
@@ -1931,22 +1947,22 @@ class ArcballControls extends EventDispatcher {
 
 		const movement = p0.clone().sub( p1 );
 
-		if ( this.camera.isOrthographicCamera ) {
+		if ( this.object.isOrthographicCamera ) {
 
 			//adjust movement amount
-			movement.multiplyScalar( 1 / this.camera.zoom );
+			movement.multiplyScalar( 1 / this.object.zoom );
 
-		} else if ( this.camera.isPerspectiveCamera && adjust ) {
+		} else if ( this.object.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 );
+			const distanceFactor = this._v3_1.distanceTo( this._v3_2 ) / this.object.position.distanceTo( this._gizmos.position );
 			movement.multiplyScalar( 1 / distanceFactor );
 
 		}
 
-		this._v3_1.set( movement.x, movement.y, 0 ).applyQuaternion( this.camera.quaternion );
+		this._v3_1.set( movement.x, movement.y, 0 ).applyQuaternion( this.object.quaternion );
 
 		this._m4_1.makeTranslation( this._v3_1.x, this._v3_1.y, this._v3_1.z );
 
@@ -1960,31 +1976,31 @@ class ArcballControls extends EventDispatcher {
 	 */
 	reset() {
 
-		this.camera.zoom = this._zoom0;
+		this.object.zoom = this._zoom0;
 
-		if ( this.camera.isPerspectiveCamera ) {
+		if ( this.object.isPerspectiveCamera ) {
 
-			this.camera.fov = this._fov0;
+			this.object.fov = this._fov0;
 
 		}
 
-		this.camera.near = this._nearPos;
-		this.camera.far = this._farPos;
+		this.object.near = this._nearPos;
+		this.object.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._cameraMatrixState.decompose( this.object.position, this.object.quaternion, this.object.scale );
+		this.object.up.copy( this._up0 );
 
-		this.camera.updateMatrix();
-		this.camera.updateProjectionMatrix();
+		this.object.updateMatrix();
+		this.object.updateProjectionMatrix();
 
 		this._gizmoMatrixState.copy( this._gizmoMatrixState0 );
 		this._gizmoMatrixState0.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
 		this._gizmos.updateMatrix();
 
-		this._tbRadius = this.calculateTbRadius( this.camera );
+		this._tbRadius = this.calculateTbRadius( this.object );
 		this.makeGizmos( this._gizmos.position, this._tbRadius );
 
-		this.camera.lookAt( this._gizmos.position );
+		this.object.lookAt( this._gizmos.position );
 
 		this.updateTbState( STATE.IDLE, false );
 
@@ -2018,28 +2034,28 @@ class ArcballControls extends EventDispatcher {
 	copyState() {
 
 		let state;
-		if ( this.camera.isOrthographicCamera ) {
+		if ( this.object.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,
+				cameraFar: this.object.far,
+				cameraMatrix: this.object.matrix,
+				cameraNear: this.object.near,
+				cameraUp: this.object.up,
+				cameraZoom: this.object.zoom,
 				gizmoMatrix: this._gizmos.matrix
 
 			} } );
 
-		} else if ( this.camera.isPerspectiveCamera ) {
+		} else if ( this.object.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,
+				cameraFar: this.object.far,
+				cameraFov: this.object.fov,
+				cameraMatrix: this.object.matrix,
+				cameraNear: this.object.near,
+				cameraUp: this.object.up,
+				cameraZoom: this.object.zoom,
 				gizmoMatrix: this._gizmos.matrix
 
 			} } );
@@ -2066,16 +2082,16 @@ class ArcballControls extends EventDispatcher {
 	 */
 	saveState() {
 
-		this._cameraMatrixState0.copy( this.camera.matrix );
+		this._cameraMatrixState0.copy( this.object.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 );
+		this._nearPos = this.object.near;
+		this._farPos = this.object.far;
+		this._zoom0 = this.object.zoom;
+		this._up0.copy( this.object.up );
 
-		if ( this.camera.isPerspectiveCamera ) {
+		if ( this.object.isPerspectiveCamera ) {
 
-			this._fov0 = this.camera.fov;
+			this._fov0 = this.object.fov;
 
 		}
 
@@ -2093,26 +2109,26 @@ class ArcballControls extends EventDispatcher {
 		_scalePointTemp.copy( point );
 		let sizeInverse = 1 / size;
 
-		if ( this.camera.isOrthographicCamera ) {
+		if ( this.object.isOrthographicCamera ) {
 
 			//camera zoom
-			this.camera.zoom = this._zoomState;
-			this.camera.zoom *= size;
+			this.object.zoom = this._zoomState;
+			this.object.zoom *= size;
 
 			//check min and max zoom
-			if ( this.camera.zoom > this.maxZoom ) {
+			if ( this.object.zoom > this.maxZoom ) {
 
-				this.camera.zoom = this.maxZoom;
+				this.object.zoom = this.maxZoom;
 				sizeInverse = this._zoomState / this.maxZoom;
 
-			} else if ( this.camera.zoom < this.minZoom ) {
+			} else if ( this.object.zoom < this.minZoom ) {
 
-				this.camera.zoom = this.minZoom;
+				this.object.zoom = this.minZoom;
 				sizeInverse = this._zoomState / this.minZoom;
 
 			}
 
-			this.camera.updateProjectionMatrix();
+			this.object.updateProjectionMatrix();
 
 			this._v3_1.setFromMatrixPosition( this._gizmoMatrixState );	//gizmos position
 
@@ -2136,7 +2152,7 @@ class ArcballControls extends EventDispatcher {
 			this.setTransformationMatrices( this._m4_1, this._m4_2 );
 			return _transformation;
 
-		} else if ( this.camera.isPerspectiveCamera ) {
+		} else if ( this.object.isPerspectiveCamera ) {
 
 			this._v3_1.setFromMatrixPosition( this._cameraMatrixState );
 			this._v3_2.setFromMatrixPosition( this._gizmoMatrixState );
@@ -2203,10 +2219,10 @@ class ArcballControls extends EventDispatcher {
 	 */
 	setFov( value ) {
 
-		if ( this.camera.isPerspectiveCamera ) {
+		if ( this.object.isPerspectiveCamera ) {
 
-			this.camera.fov = MathUtils.clamp( value, this.minFov, this.maxFov );
-			this.camera.updateProjectionMatrix();
+			this.object.fov = MathUtils.clamp( value, this.minFov, this.maxFov );
+			this.object.updateProjectionMatrix();
 
 		}
 
@@ -2536,18 +2552,18 @@ class ArcballControls extends EventDispatcher {
 	updateMatrixState() {
 
 		//update camera and gizmos state
-		this._cameraMatrixState.copy( this.camera.matrix );
+		this._cameraMatrixState.copy( this.object.matrix );
 		this._gizmoMatrixState.copy( this._gizmos.matrix );
 
-		if ( this.camera.isOrthographicCamera ) {
+		if ( this.object.isOrthographicCamera ) {
 
-			this._cameraProjectionState.copy( this.camera.projectionMatrix );
-			this.camera.updateProjectionMatrix();
-			this._zoomState = this.camera.zoom;
+			this._cameraProjectionState.copy( this.object.projectionMatrix );
+			this.object.updateProjectionMatrix();
+			this._zoomState = this.object.zoom;
 
-		} else if ( this.camera.isPerspectiveCamera ) {
+		} else if ( this.object.isPerspectiveCamera ) {
 
-			this._fovState = this.camera.fov;
+			this._fovState = this.object.fov;
 
 		}
 
@@ -2576,27 +2592,27 @@ class ArcballControls extends EventDispatcher {
 		if ( this.target.equals( this._currentTarget ) === false ) {
 
 			this._gizmos.position.copy( this.target );	//for correct radius calculation
-			this._tbRadius = this.calculateTbRadius( this.camera );
+			this._tbRadius = this.calculateTbRadius( this.object );
 			this.makeGizmos( this.target, this._tbRadius );
 			this._currentTarget.copy( this.target );
 
 		}
 
 		//check min/max parameters
-		if ( this.camera.isOrthographicCamera ) {
+		if ( this.object.isOrthographicCamera ) {
 
 			//check zoom
-			if ( this.camera.zoom > this.maxZoom || this.camera.zoom < this.minZoom ) {
+			if ( this.object.zoom > this.maxZoom || this.object.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 ) );
+				const newZoom = MathUtils.clamp( this.object.zoom, this.minZoom, this.maxZoom );
+				this.applyTransformMatrix( this.scale( newZoom / this.object.zoom, this._gizmos.position, true ) );
 
 			}
 
-		} else if ( this.camera.isPerspectiveCamera ) {
+		} else if ( this.object.isPerspectiveCamera ) {
 
 			//check distance
-			const distance = this.camera.position.distanceTo( this._gizmos.position );
+			const distance = this.object.position.distanceTo( this._gizmos.position );
 
 			if ( distance > this.maxDistance + EPS || distance < this.minDistance - EPS ) {
 
@@ -2607,15 +2623,15 @@ class ArcballControls extends EventDispatcher {
 			 }
 
 			//check fov
-			if ( this.camera.fov < this.minFov || this.camera.fov > this.maxFov ) {
+			if ( this.object.fov < this.minFov || this.object.fov > this.maxFov ) {
 
-				this.camera.fov = MathUtils.clamp( this.camera.fov, this.minFov, this.maxFov );
-				this.camera.updateProjectionMatrix();
+				this.object.fov = MathUtils.clamp( this.object.fov, this.minFov, this.maxFov );
+				this.object.updateProjectionMatrix();
 
 			}
 
 			const oldRadius = this._tbRadius;
-			this._tbRadius = this.calculateTbRadius( this.camera );
+			this._tbRadius = this.calculateTbRadius( this.object );
 
 			if ( oldRadius < this._tbRadius - EPS || oldRadius > this._tbRadius + EPS ) {
 
@@ -2635,7 +2651,7 @@ class ArcballControls extends EventDispatcher {
 
 		}
 
-		this.camera.lookAt( this._gizmos.position );
+		this.object.lookAt( this._gizmos.position );
 
 	}
 
@@ -2646,34 +2662,34 @@ class ArcballControls extends EventDispatcher {
 		if ( state.arcballState != undefined ) {
 
 			this._cameraMatrixState.fromArray( state.arcballState.cameraMatrix.elements );
-			this._cameraMatrixState.decompose( this.camera.position, this.camera.quaternion, this.camera.scale );
+			this._cameraMatrixState.decompose( this.object.position, this.object.quaternion, this.object.scale );
 
-			this.camera.up.copy( state.arcballState.cameraUp );
-			this.camera.near = state.arcballState.cameraNear;
-			this.camera.far = state.arcballState.cameraFar;
+			this.object.up.copy( state.arcballState.cameraUp );
+			this.object.near = state.arcballState.cameraNear;
+			this.object.far = state.arcballState.cameraFar;
 
-			this.camera.zoom = state.arcballState.cameraZoom;
+			this.object.zoom = state.arcballState.cameraZoom;
 
-			if ( this.camera.isPerspectiveCamera ) {
+			if ( this.object.isPerspectiveCamera ) {
 
-				this.camera.fov = state.arcballState.cameraFov;
+				this.object.fov = state.arcballState.cameraFov;
 
 			}
 
 			this._gizmoMatrixState.fromArray( state.arcballState.gizmoMatrix.elements );
 			this._gizmoMatrixState.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
 
-			this.camera.updateMatrix();
-			this.camera.updateProjectionMatrix();
+			this.object.updateMatrix();
+			this.object.updateProjectionMatrix();
 
 			this._gizmos.updateMatrix();
 
-			this._tbRadius = this.calculateTbRadius( this.camera );
+			this._tbRadius = this.calculateTbRadius( this.object );
 			const gizmoTmp = new Matrix4().copy( this._gizmoMatrixState0 );
 			this.makeGizmos( this._gizmos.position, this._tbRadius );
 			this._gizmoMatrixState0.copy( gizmoTmp );
 
-			this.camera.lookAt( this._gizmos.position );
+			this.object.lookAt( this._gizmos.position );
 			this.updateTbState( STATE.IDLE, false );
 
 			this.dispatchEvent( _changeEvent );
@@ -2689,7 +2705,7 @@ class ArcballControls extends EventDispatcher {
 function onWindowResize() {
 
 	const scale = ( this._gizmos.scale.x + this._gizmos.scale.y + this._gizmos.scale.z ) / 3;
-	this._tbRadius = this.calculateTbRadius( this.camera );
+	this._tbRadius = this.calculateTbRadius( this.object );
 
 	const newRadius = this._tbRadius / scale;
 	const curve = new EllipseCurve( 0, 0, newRadius, newRadius );
@@ -3098,13 +3114,13 @@ function onWheel( event ) {
 
 						let scalePoint;
 
-						if ( this.camera.isOrthographicCamera ) {
+						if ( this.object.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 );
+							scalePoint = this.unprojectOnTbPlane( this.object, event.clientX, event.clientY, this.domElement ).applyQuaternion( this.object.quaternion ).multiplyScalar( 1 / this.object.zoom ).add( this._gizmos.position );
 
-						} else if ( this.camera.isPerspectiveCamera ) {
+						} else if ( this.object.isPerspectiveCamera ) {
 
-							scalePoint = this.unprojectOnTbPlane( this.camera, event.clientX, event.clientY, this.domElement ).applyQuaternion( this.camera.quaternion ).add( this._gizmos.position );
+							scalePoint = this.unprojectOnTbPlane( this.object, event.clientX, event.clientY, this.domElement ).applyQuaternion( this.object.quaternion ).add( this._gizmos.position );
 
 						}
 
@@ -3132,7 +3148,7 @@ function onWheel( event ) {
 
 				case 'FOV':
 
-					if ( this.camera.isPerspectiveCamera ) {
+					if ( this.object.isPerspectiveCamera ) {
 
 						this.updateTbState( STATE.FOV, true );
 
@@ -3175,7 +3191,7 @@ function onWheel( event ) {
 						//check min and max distance
 						xNew = MathUtils.clamp( xNew, this.minDistance, this.maxDistance );
 
-						const y = x * Math.tan( MathUtils.DEG2RAD * this.camera.fov * 0.5 );
+						const y = x * Math.tan( MathUtils.DEG2RAD * this.object.fov * 0.5 );
 
 						//calculate new fov
 						let newFov = MathUtils.RAD2DEG * ( Math.atan( y / xNew ) * 2 );