three-stdlib 2.6.3 → 2.7.2

package/controls/ArcballControls.js

@@ -1,6 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { Matrix4, EventDispatcher, EllipseCurve, BufferGeometry, MathUtils, Vector3, GridHelper, LineBasicMaterial, Line, Raycaster, Vector2, Quaternion, Group, Box3, Sphere } from 'three';
 
+//trackball state
 const STATE = {
   IDLE: Symbol(),
   ROTATE: Symbol(),
@@ -43,25 +44,211 @@ const _endEvent = {
 };
 /**
  *
- * @param {Camera} camera Virtual camera used in the scene
- * @param {HTMLElement} domElement Renderer's dom element
- * @param {Scene} scene The scene to be rendered
+ * @param {CamOrthographicCamera | PerspectiveCameraera} camera Virtual camera used in the scene
+ * @param {HTMLElement=null} domElement Renderer's dom element
+ * @param {Scene=null} scene The scene to be rendered
  */
 
 class ArcballControls extends EventDispatcher {
-  constructor(_camera, _domElement, scene = null) {
+  constructor(_camera, _domElement = null, scene = null) {
     super();
 
+    _defineProperty(this, "camera", void 0);
+
+    _defineProperty(this, "domElement", void 0);
+
+    _defineProperty(this, "scene", void 0);
+
+    _defineProperty(this, "mouseActions", void 0);
+
+    _defineProperty(this, "_mouseOp", void 0);
+
+    _defineProperty(this, "_v2_1", void 0);
+
+    _defineProperty(this, "_v3_1", void 0);
+
+    _defineProperty(this, "_v3_2", void 0);
+
+    _defineProperty(this, "_m4_1", void 0);
+
+    _defineProperty(this, "_m4_2", void 0);
+
+    _defineProperty(this, "_quat", void 0);
+
+    _defineProperty(this, "_translationMatrix", void 0);
+
+    _defineProperty(this, "_rotationMatrix", void 0);
+
+    _defineProperty(this, "_scaleMatrix", void 0);
+
+    _defineProperty(this, "_rotationAxis", void 0);
+
+    _defineProperty(this, "_cameraMatrixState", void 0);
+
+    _defineProperty(this, "_cameraProjectionState", void 0);
+
+    _defineProperty(this, "_fovState", void 0);
+
+    _defineProperty(this, "_upState", void 0);
+
+    _defineProperty(this, "_zoomState", void 0);
+
+    _defineProperty(this, "_nearPos", void 0);
+
+    _defineProperty(this, "_farPos", void 0);
+
+    _defineProperty(this, "_gizmoMatrixState", void 0);
+
+    _defineProperty(this, "_up0", void 0);
+
+    _defineProperty(this, "_zoom0", void 0);
+
+    _defineProperty(this, "_fov0", void 0);
+
+    _defineProperty(this, "_initialNear", void 0);
+
+    _defineProperty(this, "_nearPos0", void 0);
+
+    _defineProperty(this, "_initialFar", void 0);
+
+    _defineProperty(this, "_farPos0", void 0);
+
+    _defineProperty(this, "_cameraMatrixState0", void 0);
+
+    _defineProperty(this, "_gizmoMatrixState0", void 0);
+
+    _defineProperty(this, "_button", void 0);
+
+    _defineProperty(this, "_touchStart", void 0);
+
+    _defineProperty(this, "_touchCurrent", void 0);
+
+    _defineProperty(this, "_input", void 0);
+
+    _defineProperty(this, "_switchSensibility", void 0);
+
+    _defineProperty(this, "_startFingerDistance", void 0);
+
+    _defineProperty(this, "_currentFingerDistance", void 0);
+
+    _defineProperty(this, "_startFingerRotation", void 0);
+
+    _defineProperty(this, "_currentFingerRotation", void 0);
+
+    _defineProperty(this, "_devPxRatio", void 0);
+
+    _defineProperty(this, "_downValid", void 0);
+
+    _defineProperty(this, "_nclicks", void 0);
+
+    _defineProperty(this, "_downEvents", void 0);
+
+    _defineProperty(this, "_clickStart", void 0);
+
+    _defineProperty(this, "_maxDownTime", void 0);
+
+    _defineProperty(this, "_maxInterval", void 0);
+
+    _defineProperty(this, "_posThreshold", void 0);
+
+    _defineProperty(this, "_movementThreshold", void 0);
+
+    _defineProperty(this, "_currentCursorPosition", void 0);
+
+    _defineProperty(this, "_startCursorPosition", void 0);
+
+    _defineProperty(this, "_grid", void 0);
+
+    _defineProperty(this, "_gridPosition", void 0);
+
+    _defineProperty(this, "_gizmos", void 0);
+
+    _defineProperty(this, "_curvePts", void 0);
+
+    _defineProperty(this, "_timeStart", void 0);
+
+    _defineProperty(this, "_animationId", void 0);
+
+    _defineProperty(this, "focusAnimationTime", void 0);
+
+    _defineProperty(this, "_timePrev", void 0);
+
+    _defineProperty(this, "_timeCurrent", void 0);
+
+    _defineProperty(this, "_anglePrev", void 0);
+
+    _defineProperty(this, "_angleCurrent", void 0);
+
+    _defineProperty(this, "_cursorPosPrev", void 0);
+
+    _defineProperty(this, "_cursorPosCurr", void 0);
+
+    _defineProperty(this, "_wPrev", void 0);
+
+    _defineProperty(this, "_wCurr", void 0);
+
+    _defineProperty(this, "adjustNearFar", void 0);
+
+    _defineProperty(this, "scaleFactor", void 0);
+
+    _defineProperty(this, "dampingFactor", void 0);
+
+    _defineProperty(this, "wMax", void 0);
+
+    _defineProperty(this, "enableAnimations", void 0);
+
+    _defineProperty(this, "enableGrid", void 0);
+
+    _defineProperty(this, "cursorZoom", void 0);
+
+    _defineProperty(this, "minFov", void 0);
+
+    _defineProperty(this, "maxFov", void 0);
+
+    _defineProperty(this, "enabled", void 0);
+
+    _defineProperty(this, "enablePan", void 0);
+
+    _defineProperty(this, "enableRotate", void 0);
+
+    _defineProperty(this, "enableZoom", void 0);
+
+    _defineProperty(this, "minDistance", void 0);
+
+    _defineProperty(this, "maxDistance", void 0);
+
+    _defineProperty(this, "minZoom", void 0);
+
+    _defineProperty(this, "maxZoom", void 0);
+
+    _defineProperty(this, "target", void 0);
+
+    _defineProperty(this, "_currentTarget", void 0);
+
+    _defineProperty(this, "_tbRadius", void 0);
+
+    _defineProperty(this, "_state", void 0);
+
     _defineProperty(this, "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;
+
+      if (this.camera) {
+        const tbRadius = this.calculateTbRadius(this.camera);
+
+        if (tbRadius !== undefined) {
+          this._tbRadius = tbRadius;
+        }
+      }
+
+      const newRadius = this._tbRadius / scale; // @ts-expect-error
+
       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) {
-        this._gizmos.children[gizmo].geometry = curveGeometry;
+        const child = this._gizmos.children[gizmo];
+        child.geometry = curveGeometry;
       }
 
       this.dispatchEvent(_changeEvent);
@@ -94,8 +281,6 @@ class ArcballControls extends EventDispatcher {
         this._downValid = true;
 
         this._downEvents.push(event);
-
-        this._downStart = performance.now();
       } else {
         this._downValid = false;
       }
@@ -126,7 +311,7 @@ class ArcballControls extends EventDispatcher {
           case INPUT.TWO_FINGER:
             //multipleStart
             this._input = INPUT.MULT_FINGER;
-            this.onTriplePanStart(event);
+            this.onTriplePanStart();
             break;
         }
       } else if (event.pointerType != 'touch' && this._input == INPUT.NONE) {
@@ -140,7 +325,7 @@ class ArcballControls extends EventDispatcher {
 
         this._mouseOp = this.getOpFromAction(event.button, modifier);
 
-        if (this._mouseOp != null) {
+        if (this._mouseOp) {
           window.addEventListener('pointermove', this.onPointerMove);
           window.addEventListener('pointerup', this.onPointerUp); //singleStart
 
@@ -184,7 +369,7 @@ class ArcballControls extends EventDispatcher {
           case INPUT.MULT_FINGER:
             //multMove
             this.updateTouchEvent(event);
-            this.onTriplePanMove(event);
+            this.onTriplePanMove();
             break;
         }
       } else if (event.pointerType != 'touch' && this._input == INPUT.CURSOR) {
@@ -198,7 +383,7 @@ class ArcballControls extends EventDispatcher {
 
         const mouseOpState = this.getOpStateFromAction(this._button, modifier);
 
-        if (mouseOpState != null) {
+        if (mouseOpState) {
           this.onSinglePanMove(event, mouseOpState);
         }
       } //checkDistance
@@ -239,9 +424,9 @@ class ArcballControls extends EventDispatcher {
 
           case INPUT.TWO_FINGER:
             //doubleEnd
-            this.onDoublePanEnd(event);
-            this.onPinchEnd(event);
-            this.onRotateEnd(event); //switching to singleStart
+            this.onDoublePanEnd();
+            this.onPinchEnd();
+            this.onRotateEnd(); //switching to singleStart
 
             this._input = INPUT.ONE_FINGER_SWITCHED;
             break;
@@ -311,7 +496,9 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "onWheel", event => {
-      if (this.enabled && this.enableZoom) {
+      var _this$camera3;
+
+      if (this.enabled && this.enableZoom && this.domElement) {
         let modifier = null;
 
         if (event.ctrlKey || event.metaKey) {
@@ -322,7 +509,7 @@ class ArcballControls extends EventDispatcher {
 
         const mouseOp = this.getOpFromAction('WHEEL', modifier);
 
-        if (mouseOp != null) {
+        if (mouseOp) {
           event.preventDefault();
           this.dispatchEvent(_startEvent);
           const notchDeltaY = 125; //distance of one notch of mouse wheel
@@ -347,20 +534,28 @@ class ArcballControls extends EventDispatcher {
               }
 
               if (this.cursorZoom && this.enablePan) {
+                var _this$camera, _this$camera2;
+
                 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);
-                } else if (this.camera.isPerspectiveCamera) {
-                  scalePoint = this.unprojectOnTbPlane(this.camera, event.clientX, event.clientY, this.domElement).applyQuaternion(this.camera.quaternion).add(this._gizmos.position);
+                if (((_this$camera = this.camera) === null || _this$camera === void 0 ? void 0 : _this$camera.type) === 'OrthographicCamera') {
+                  var _this$unprojectOnTbPl;
+
+                  scalePoint = (_this$unprojectOnTbPl = this.unprojectOnTbPlane(this.camera, event.clientX, event.clientY, this.domElement)) === null || _this$unprojectOnTbPl === void 0 ? void 0 : _this$unprojectOnTbPl.applyQuaternion(this.camera.quaternion).multiplyScalar(1 / this.camera.zoom).add(this._gizmos.position);
+                }
+
+                if (((_this$camera2 = this.camera) === null || _this$camera2 === void 0 ? void 0 : _this$camera2.type) === 'PerspectiveCamera') {
+                  var _this$unprojectOnTbPl2;
+
+                  scalePoint = (_this$unprojectOnTbPl2 = this.unprojectOnTbPlane(this.camera, event.clientX, event.clientY, this.domElement)) === null || _this$unprojectOnTbPl2 === void 0 ? void 0 : _this$unprojectOnTbPl2.applyQuaternion(this.camera.quaternion).add(this._gizmos.position);
                 }
 
-                this.applyTransformMatrix(this.applyScale(size, scalePoint));
+                if (scalePoint !== undefined) this.applyTransformMatrix(this.applyScale(size, scalePoint));
               } else {
                 this.applyTransformMatrix(this.applyScale(size, this._gizmos.position));
               }
 
-              if (this._grid != null) {
+              if (this._grid) {
                 this.disposeGrid();
                 this.drawGrid();
               }
@@ -371,7 +566,7 @@ class ArcballControls extends EventDispatcher {
               break;
 
             case 'FOV':
-              if (this.camera.isPerspectiveCamera) {
+              if (((_this$camera3 = this.camera) === null || _this$camera3 === void 0 ? void 0 : _this$camera3.type) === 'PerspectiveCamera') {
                 this.updateTbState(STATE.FOV, true); //Vertigo effect
                 //	  fov / 2
                 //		|\
@@ -419,7 +614,7 @@ class ArcballControls extends EventDispatcher {
                 this.applyTransformMatrix(this.applyScale(size, this._gizmos.position, false));
               }
 
-              if (this._grid != null) {
+              if (this._grid) {
                 this.disposeGrid();
                 this.drawGrid();
               }
@@ -433,28 +628,16 @@ class ArcballControls extends EventDispatcher {
       }
     });
 
-    _defineProperty(this, "onKeyDown", event => {
-      if (event.key == 'c') {
-        if (event.ctrlKey || event.metaKey) {
-          this.copyState();
-        }
-      } else if (event.key == 'v') {
-        if (event.ctrlKey || event.metaKey) {
-          this.pasteState();
-        }
-      }
-    });
-
     _defineProperty(this, "onSinglePanStart", (event, operation) => {
-      if (this.enabled) {
+      var _this$camera4;
+
+      if (this.enabled && this.domElement) {
         this.dispatchEvent(_startEvent);
         this.setCenter(event.clientX, event.clientY);
 
         switch (operation) {
           case 'PAN':
-            if (!this.enablePan) {
-              return;
-            }
+            if (!this.enablePan) return;
 
             if (this._animationId != -1) {
               cancelAnimationFrame(this._animationId);
@@ -464,21 +647,24 @@ class ArcballControls extends EventDispatcher {
               this.dispatchEvent(_changeEvent);
             }
 
-            this.updateTbState(STATE.PAN, true);
+            if (this.camera) {
+              this.updateTbState(STATE.PAN, true);
+              const rayDir = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement);
 
-            this._startCursorPosition.copy(this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement));
+              if (rayDir !== undefined) {
+                this._startCursorPosition.copy(rayDir);
+              }
 
-            if (this.enableGrid) {
-              this.drawGrid();
-              this.dispatchEvent(_changeEvent);
+              if (this.enableGrid) {
+                this.drawGrid();
+                this.dispatchEvent(_changeEvent);
+              }
             }
 
             break;
 
           case 'ROTATE':
-            if (!this.enableRotate) {
-              return;
-            }
+            if (!this.enableRotate) return;
 
             if (this._animationId != -1) {
               cancelAnimationFrame(this._animationId);
@@ -486,52 +672,55 @@ class ArcballControls extends EventDispatcher {
               this._timeStart = -1;
             }
 
-            this.updateTbState(STATE.ROTATE, true);
+            if (this.camera) {
+              this.updateTbState(STATE.ROTATE, true);
+              const rayDir = this.unprojectOnTbSurface(this.camera, _center.x, _center.y, this.domElement, this._tbRadius);
 
-            this._startCursorPosition.copy(this.unprojectOnTbSurface(this.camera, _center.x, _center.y, this.domElement, this._tbRadius));
+              if (rayDir !== undefined) {
+                this._startCursorPosition.copy(rayDir);
+              }
 
-            this.activateGizmos(true);
+              this.activateGizmos(true);
 
-            if (this.enableAnimations) {
-              this._timePrev = this._timeCurrent = performance.now();
-              this._angleCurrent = this._anglePrev = 0;
+              if (this.enableAnimations) {
+                this._timePrev = this._timeCurrent = performance.now();
+                this._angleCurrent = this._anglePrev = 0;
 
-              this._cursorPosPrev.copy(this._startCursorPosition);
+                this._cursorPosPrev.copy(this._startCursorPosition);
 
-              this._cursorPosCurr.copy(this._cursorPosPrev);
+                this._cursorPosCurr.copy(this._cursorPosPrev);
 
-              this._wCurr = 0;
-              this._wPrev = this._wCurr;
+                this._wCurr = 0;
+                this._wPrev = this._wCurr;
+              }
             }
 
             this.dispatchEvent(_changeEvent);
             break;
 
           case 'FOV':
-            if (!this.camera.isPerspectiveCamera || !this.enableZoom) {
-              return;
-            }
+            if (!this.enableZoom) return;
 
-            if (this._animationId != -1) {
-              cancelAnimationFrame(this._animationId);
-              this._animationId = -1;
-              this._timeStart = -1;
-              this.activateGizmos(false);
-              this.dispatchEvent(_changeEvent);
-            }
+            if (((_this$camera4 = this.camera) === null || _this$camera4 === void 0 ? void 0 : _this$camera4.type) === 'PerspectiveCamera') {
+              if (this._animationId != -1) {
+                cancelAnimationFrame(this._animationId);
+                this._animationId = -1;
+                this._timeStart = -1;
+                this.activateGizmos(false);
+                this.dispatchEvent(_changeEvent);
+              }
 
-            this.updateTbState(STATE.FOV, true);
+              this.updateTbState(STATE.FOV, true);
 
-            this._startCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5);
+              this._startCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5);
 
-            this._currentCursorPosition.copy(this._startCursorPosition);
+              this._currentCursorPosition.copy(this._startCursorPosition);
+            }
 
             break;
 
           case 'ZOOM':
-            if (!this.enableZoom) {
-              return;
-            }
+            if (!this.enableZoom) return;
 
             if (this._animationId != -1) {
               cancelAnimationFrame(this._animationId);
@@ -553,20 +742,25 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "onSinglePanMove", (event, opState) => {
-      if (this.enabled) {
+      var _this$camera5;
+
+      if (this.enabled && this.domElement) {
         const restart = opState != this._state;
         this.setCenter(event.clientX, event.clientY);
 
         switch (opState) {
           case STATE.PAN:
-            if (this.enablePan) {
+            if (this.enablePan && this.camera) {
               if (restart) {
                 //switch to pan operation
                 this.dispatchEvent(_endEvent);
                 this.dispatchEvent(_startEvent);
                 this.updateTbState(opState, true);
+                const rayDir = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement);
 
-                this._startCursorPosition.copy(this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement));
+                if (rayDir !== undefined) {
+                  this._startCursorPosition.copy(rayDir);
+                }
 
                 if (this.enableGrid) {
                   this.drawGrid();
@@ -575,7 +769,11 @@ class ArcballControls extends EventDispatcher {
                 this.activateGizmos(false);
               } else {
                 //continue with pan operation
-                this._currentCursorPosition.copy(this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement));
+                const rayDir = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement);
+
+                if (rayDir !== undefined) {
+                  this._currentCursorPosition.copy(rayDir);
+                }
 
                 this.applyTransformMatrix(this.pan(this._startCursorPosition, this._currentCursorPosition));
               }
@@ -584,14 +782,17 @@ class ArcballControls extends EventDispatcher {
             break;
 
           case STATE.ROTATE:
-            if (this.enableRotate) {
+            if (this.enableRotate && this.camera) {
               if (restart) {
                 //switch to rotate operation
                 this.dispatchEvent(_endEvent);
                 this.dispatchEvent(_startEvent);
                 this.updateTbState(opState, true);
+                const rayDir = this.unprojectOnTbSurface(this.camera, _center.x, _center.y, this.domElement, this._tbRadius);
 
-                this._startCursorPosition.copy(this.unprojectOnTbSurface(this.camera, _center.x, _center.y, this.domElement, this._tbRadius));
+                if (rayDir !== undefined) {
+                  this._startCursorPosition.copy(rayDir);
+                }
 
                 if (this.enableGrid) {
                   this.disposeGrid();
@@ -600,7 +801,11 @@ class ArcballControls extends EventDispatcher {
                 this.activateGizmos(true);
               } else {
                 //continue with rotate operation
-                this._currentCursorPosition.copy(this.unprojectOnTbSurface(this.camera, _center.x, _center.y, this.domElement, this._tbRadius));
+                const rayDir = this.unprojectOnTbSurface(this.camera, _center.x, _center.y, this.domElement, this._tbRadius);
+
+                if (rayDir !== undefined) {
+                  this._currentCursorPosition.copy(rayDir);
+                }
 
                 const distance = this._startCursorPosition.distanceTo(this._currentCursorPosition);
 
@@ -667,7 +872,7 @@ class ArcballControls extends EventDispatcher {
             break;
 
           case STATE.FOV:
-            if (this.enableZoom && this.camera.isPerspectiveCamera) {
+            if (this.enableZoom && ((_this$camera5 = this.camera) === null || _this$camera5 === void 0 ? void 0 : _this$camera5.type) === 'PerspectiveCamera') {
               if (restart) {
                 //switch to fov operation
                 this.dispatchEvent(_endEvent);
@@ -776,12 +981,12 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "onDoubleTap", event => {
-      if (this.enabled && this.enablePan && this.scene != null) {
+      if (this.enabled && this.enablePan && this.scene && this.camera && this.domElement) {
         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) {
+        if (hitP && this.enableAnimations) {
           const self = this;
 
           if (this._animationId != -1) {
@@ -793,7 +998,7 @@ class ArcballControls extends EventDispatcher {
             self.updateTbState(STATE.ANIMATION_FOCUS, true);
             self.onFocusAnim(t, hitP, self._cameraMatrixState, self._gizmoMatrixState);
           });
-        } else if (hitP != null && !this.enableAnimations) {
+        } else if (hitP && !this.enableAnimations) {
           this.updateTbState(STATE.FOCUS, true);
           this.focus(hitP, this.scaleFactor);
           this.updateTbState(STATE.IDLE, false);
@@ -805,12 +1010,15 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "onDoublePanStart", () => {
-      if (this.enabled && this.enablePan) {
+      if (this.enabled && this.enablePan && this.camera && this.domElement) {
         this.dispatchEvent(_startEvent);
         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);
+        const rayDir = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement, true);
 
-        this._startCursorPosition.copy(this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement, true));
+        if (rayDir !== undefined) {
+          this._startCursorPosition.copy(rayDir);
+        }
 
         this._currentCursorPosition.copy(this._startCursorPosition);
 
@@ -819,7 +1027,7 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "onDoublePanMove", () => {
-      if (this.enabled && this.enablePan) {
+      if (this.enabled && this.enablePan && this.camera && this.domElement) {
         this.setCenter((this._touchCurrent[0].clientX + this._touchCurrent[1].clientX) / 2, (this._touchCurrent[0].clientY + this._touchCurrent[1].clientY) / 2);
 
         if (this._state != STATE.PAN) {
@@ -828,8 +1036,8 @@ class ArcballControls extends EventDispatcher {
           this._startCursorPosition.copy(this._currentCursorPosition);
         }
 
-        this._currentCursorPosition.copy(this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement, true));
-
+        const rayDir = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement, true);
+        if (rayDir !== undefined) this._currentCursorPosition.copy(rayDir);
         this.applyTransformMatrix(this.pan(this._startCursorPosition, this._currentCursorPosition, true));
         this.dispatchEvent(_changeEvent);
       }
@@ -842,12 +1050,14 @@ class ArcballControls extends EventDispatcher {
 
     _defineProperty(this, "onRotateStart", () => {
       if (this.enabled && this.enableRotate) {
+        var _this$camera6;
+
         this.dispatchEvent(_startEvent);
         this.updateTbState(STATE.ZROTATE, true); //this._startFingerRotation = event.rotation;
 
         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$camera6 = this.camera) === null || _this$camera6 === void 0 ? void 0 : _this$camera6.getWorldDirection(this._rotationAxis); //rotation axis
 
         if (!this.enablePan && !this.enableZoom) {
           this.activateGizmos(true);
@@ -856,7 +1066,7 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "onRotateMove", () => {
-      if (this.enabled && this.enableRotate) {
+      if (this.enabled && this.enableRotate && this.camera && this.domElement) {
         this.setCenter((this._touchCurrent[0].clientX + this._touchCurrent[1].clientX) / 2, (this._touchCurrent[0].clientY + this._touchCurrent[1].clientY) / 2);
         let rotationPoint;
 
@@ -870,14 +1080,20 @@ class ArcballControls extends EventDispatcher {
 
         if (!this.enablePan) {
           rotationPoint = new Vector3().setFromMatrixPosition(this._gizmoMatrixState);
-        } else {
+        } else if (this.camera) {
+          var _this$unprojectOnTbPl3;
+
           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$unprojectOnTbPl3 = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement)) === null || _this$unprojectOnTbPl3 === void 0 ? void 0 : _this$unprojectOnTbPl3.applyQuaternion(this.camera.quaternion).multiplyScalar(1 / this.camera.zoom).add(this._v3_2);
         }
 
         const amount = MathUtils.DEG2RAD * (this._startFingerRotation - this._currentFingerRotation);
-        this.applyTransformMatrix(this.zRotate(rotationPoint, amount));
+
+        if (rotationPoint !== undefined) {
+          this.applyTransformMatrix(this.zRotate(rotationPoint, amount));
+        }
+
         this.dispatchEvent(_changeEvent);
       }
     });
@@ -899,7 +1115,7 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "onPinchMove", () => {
-      if (this.enabled && this.enableZoom) {
+      if (this.enabled && this.enableZoom && this.domElement) {
         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)
 
@@ -915,14 +1131,23 @@ class ArcballControls extends EventDispatcher {
         if (!this.enablePan) {
           scalePoint = this._gizmos.position;
         } else {
-          if (this.camera.isOrthographicCamera) {
-            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) {
-            scalePoint = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement).applyQuaternion(this.camera.quaternion).add(this._gizmos.position);
+          var _this$camera7, _this$camera8;
+
+          if (((_this$camera7 = this.camera) === null || _this$camera7 === void 0 ? void 0 : _this$camera7.type) === 'OrthographicCamera') {
+            var _this$unprojectOnTbPl4;
+
+            scalePoint = (_this$unprojectOnTbPl4 = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement)) === null || _this$unprojectOnTbPl4 === void 0 ? void 0 : _this$unprojectOnTbPl4.applyQuaternion(this.camera.quaternion).multiplyScalar(1 / this.camera.zoom).add(this._gizmos.position);
+          } else if (((_this$camera8 = this.camera) === null || _this$camera8 === void 0 ? void 0 : _this$camera8.type) === 'PerspectiveCamera') {
+            var _this$unprojectOnTbPl5;
+
+            scalePoint = (_this$unprojectOnTbPl5 = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement)) === null || _this$unprojectOnTbPl5 === void 0 ? void 0 : _this$unprojectOnTbPl5.applyQuaternion(this.camera.quaternion).add(this._gizmos.position);
           }
         }
 
-        this.applyTransformMatrix(this.applyScale(amount, scalePoint));
+        if (scalePoint !== undefined) {
+          this.applyTransformMatrix(this.applyScale(amount, scalePoint));
+        }
+
         this.dispatchEvent(_changeEvent);
       }
     });
@@ -933,7 +1158,7 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "onTriplePanStart", () => {
-      if (this.enabled && this.enableZoom) {
+      if (this.enabled && this.enableZoom && this.domElement) {
         this.dispatchEvent(_startEvent);
         this.updateTbState(STATE.SCALE, true); //const center = event.center;
 
@@ -955,7 +1180,7 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "onTriplePanMove", () => {
-      if (this.enabled && this.enableZoom) {
+      if (this.enabled && this.enableZoom && this.camera && this.domElement) {
         //	  fov / 2
         //		|\
         //		| \
@@ -1038,18 +1263,6 @@ class ArcballControls extends EventDispatcher {
       this.setMouseAction('FOV', 1, 'SHIFT');
     });
 
-    _defineProperty(this, "compareMouseAction", (action1, action2) => {
-      if (action1.operation == action2.operation) {
-        if (action1.mouse == action2.mouse && action1.key == action2.key) {
-          return true;
-        } else {
-          return false;
-        }
-      } else {
-        return false;
-      }
-    });
-
     _defineProperty(this, "setMouseAction", (operation, mouse, key = null) => {
       const operationInput = ['PAN', 'ROTATE', 'ZOOM', 'FOV'];
       const mouseInput = [0, 1, 2, 'WHEEL'];
@@ -1104,17 +1317,6 @@ class ArcballControls extends EventDispatcher {
       return true;
     });
 
-    _defineProperty(this, "unsetMouseAction", (mouse, key = null) => {
-      for (let i = 0; i < this.mouseActions.length; i++) {
-        if (this.mouseActions[i].mouse == mouse && this.mouseActions[i].key == key) {
-          this.mouseActions.splice(i, 1);
-          return true;
-        }
-      }
-
-      return false;
-    });
-
     _defineProperty(this, "getOpFromAction", (mouse, key) => {
       let action;
 
@@ -1126,7 +1328,7 @@ class ArcballControls extends EventDispatcher {
         }
       }
 
-      if (key != null) {
+      if (key) {
         for (let i = 0; i < this.mouseActions.length; i++) {
           action = this.mouseActions[i];
 
@@ -1150,7 +1352,7 @@ class ArcballControls extends EventDispatcher {
         }
       }
 
-      if (key != null) {
+      if (key) {
         for (let i = 0; i < this.mouseActions.length; i++) {
           action = this.mouseActions[i];
 
@@ -1218,48 +1420,52 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "focus", (point, size, amount = 1) => {
-      const focusPoint = point.clone(); //move center of camera (along with gizmos) towards point of interest
+      if (this.camera) {
+        const focusPoint = point.clone(); //move center of camera (along with gizmos) towards point of interest
 
-      focusPoint.sub(this._gizmos.position).multiplyScalar(amount);
+        focusPoint.sub(this._gizmos.position).multiplyScalar(amount);
 
-      this._translationMatrix.makeTranslation(focusPoint.x, focusPoint.y, focusPoint.z);
+        this._translationMatrix.makeTranslation(focusPoint.x, focusPoint.y, focusPoint.z);
 
-      const gizmoStateTemp = this._gizmoMatrixState.clone();
+        const gizmoStateTemp = this._gizmoMatrixState.clone();
 
-      this._gizmoMatrixState.premultiply(this._translationMatrix);
+        this._gizmoMatrixState.premultiply(this._translationMatrix);
 
-      this._gizmoMatrixState.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale);
+        this._gizmoMatrixState.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale);
 
-      const cameraStateTemp = this._cameraMatrixState.clone();
+        const cameraStateTemp = this._cameraMatrixState.clone();
 
-      this._cameraMatrixState.premultiply(this._translationMatrix);
+        this._cameraMatrixState.premultiply(this._translationMatrix);
 
-      this._cameraMatrixState.decompose(this.camera.position, this.camera.quaternion, this.camera.scale); //apply zoom
+        this._cameraMatrixState.decompose(this.camera.position, this.camera.quaternion, this.camera.scale); //apply zoom
 
 
-      if (this.enableZoom) {
-        this.applyTransformMatrix(this.applyScale(size, this._gizmos.position));
-      }
+        if (this.enableZoom) {
+          this.applyTransformMatrix(this.applyScale(size, this._gizmos.position));
+        }
 
-      this._gizmoMatrixState.copy(gizmoStateTemp);
+        this._gizmoMatrixState.copy(gizmoStateTemp);
 
-      this._cameraMatrixState.copy(cameraStateTemp);
+        this._cameraMatrixState.copy(cameraStateTemp);
+      }
     });
 
     _defineProperty(this, "drawGrid", () => {
-      if (this.scene != null) {
+      if (this.scene) {
+        var _this$camera9, _this$camera10;
+
         const color = 0x888888;
         const multiplier = 3;
         let size, divisions, maxLength, tick;
 
-        if (this.camera.isOrthographicCamera) {
+        if (((_this$camera9 = this.camera) === null || _this$camera9 === void 0 ? void 0 : _this$camera9.type) === 'OrthographicCamera') {
           const width = this.camera.right - this.camera.left;
           const height = this.camera.bottom - this.camera.top;
           maxLength = Math.max(width, height);
           tick = maxLength / 20;
           size = maxLength / this.camera.zoom * multiplier;
           divisions = size / tick * this.camera.zoom;
-        } else if (this.camera.isPerspectiveCamera) {
+        } else if (((_this$camera10 = this.camera) === null || _this$camera10 === void 0 ? void 0 : _this$camera10.type) === 'PerspectiveCamera') {
           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));
@@ -1269,7 +1475,7 @@ class ArcballControls extends EventDispatcher {
           divisions = size / tick;
         }
 
-        if (this._grid == null) {
+        if (this._grid == null && this.camera) {
           this._grid = new GridHelper(size, divisions, color, color);
 
           this._grid.position.copy(this._gizmos.position);
@@ -1286,35 +1492,42 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "connect", domElement => {
-      this.domElement = domElement;
+      // https://github.com/mrdoob/three.js/issues/20575
+      if (domElement === document) {
+        console.error('THREE.ArcballControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.');
+      }
+
+      this.domElement = domElement; // disables touch scroll
+      // touch-action needs to be defined for pointer events to work on mobile
+      // https://stackoverflow.com/a/48254578
+
       this.domElement.style.touchAction = 'none';
       this.domElement.addEventListener('contextmenu', this.onContextMenu);
-      this.domElement.addEventListener('wheel', this.onWheel);
       this.domElement.addEventListener('pointerdown', this.onPointerDown);
       this.domElement.addEventListener('pointercancel', this.onPointerCancel);
-      window.addEventListener('keydown', this.onKeyDown);
-      window.addEventListener('resize', this.onWindowResize);
+      this.domElement.addEventListener('wheel', this.onWheel);
     });
 
     _defineProperty(this, "dispose", () => {
+      var _this$domElement, _this$domElement2, _this$domElement3, _this$domElement4, _this$scene;
+
       if (this._animationId != -1) {
         window.cancelAnimationFrame(this._animationId);
       }
 
-      this.domElement.removeEventListener('pointerdown', this.onPointerDown);
-      this.domElement.removeEventListener('pointercancel', this.onPointerCancel);
-      this.domElement.removeEventListener('wheel', this.onWheel);
-      this.domElement.removeEventListener('contextmenu', this.onContextMenu);
+      (_this$domElement = this.domElement) === null || _this$domElement === void 0 ? void 0 : _this$domElement.removeEventListener('pointerdown', this.onPointerDown);
+      (_this$domElement2 = this.domElement) === null || _this$domElement2 === void 0 ? void 0 : _this$domElement2.removeEventListener('pointercancel', this.onPointerCancel);
+      (_this$domElement3 = this.domElement) === null || _this$domElement3 === void 0 ? void 0 : _this$domElement3.removeEventListener('wheel', this.onWheel);
+      (_this$domElement4 = this.domElement) === null || _this$domElement4 === void 0 ? void 0 : _this$domElement4.removeEventListener('contextmenu', this.onContextMenu);
       window.removeEventListener('pointermove', this.onPointerMove);
       window.removeEventListener('pointerup', this.onPointerUp);
       window.removeEventListener('resize', this.onWindowResize);
-      window.removeEventListener('keydown', this.onKeyDown);
-      if (this.scene) this.scene.remove(this._gizmos);
+      (_this$scene = this.scene) === null || _this$scene === void 0 ? void 0 : _this$scene.remove(this._gizmos);
       this.disposeGrid();
     });
 
     _defineProperty(this, "disposeGrid", () => {
-      if (this._grid != null && this.scene != null) {
+      if (this._grid && this.scene) {
         this.scene.remove(this._grid);
         this._grid = null;
       }
@@ -1325,29 +1538,9 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "activateGizmos", isActive => {
-      const gizmoX = this._gizmos.children[0];
-      const gizmoY = this._gizmos.children[1];
-      const gizmoZ = this._gizmos.children[2];
-
-      if (isActive) {
-        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
+      for (const gizmo of this._gizmos.children) {
+        gizmo.material.setValues({
+          opacity: isActive ? 1 : 0.6
         });
       }
     });
@@ -1363,49 +1556,62 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "getCursorPosition", (cursorX, cursorY, canvas) => {
+      var _this$camera11;
+
       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;
+      if (((_this$camera11 = this.camera) === null || _this$camera11 === void 0 ? void 0 : _this$camera11.type) === 'OrthographicCamera') {
+        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();
     });
 
     _defineProperty(this, "setCamera", camera => {
-      camera.lookAt(this.target);
-      camera.updateMatrix(); //setting state
+      if (camera) {
+        camera.lookAt(this.target);
+        camera.updateMatrix(); //setting state
 
-      if (camera.type == 'PerspectiveCamera') {
-        this._fov0 = camera.fov;
-        this._fovState = camera.fov;
-      }
+        if ((camera === null || camera === void 0 ? void 0 : camera.type) == 'PerspectiveCamera') {
+          this._fov0 = camera.fov;
+          this._fovState = camera.fov;
+        }
+
+        this._cameraMatrixState0.copy(camera.matrix);
+
+        this._cameraMatrixState.copy(this._cameraMatrixState0);
 
-      this._cameraMatrixState0.copy(camera.matrix);
+        this._cameraProjectionState.copy(camera.projectionMatrix);
 
-      this._cameraMatrixState.copy(this._cameraMatrixState0);
+        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._cameraProjectionState.copy(camera.projectionMatrix);
+        this._up0.copy(camera.up);
 
-      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._upState.copy(camera.up);
 
-      this._up0.copy(camera.up);
+        this.camera = camera;
+        this.camera.updateProjectionMatrix(); //making gizmos
 
-      this._upState.copy(camera.up);
+        const tbRadius = this.calculateTbRadius(camera);
 
-      this.camera = camera;
-      this.camera.updateProjectionMatrix(); //making gizmos
+        if (tbRadius !== undefined) {
+          this._tbRadius = tbRadius;
+        }
 
-      this._tbRadius = this.calculateTbRadius(camera);
-      this.makeGizmos(this.target, this._tbRadius);
+        this.makeGizmos(this.target, this._tbRadius);
+      }
     });
 
     _defineProperty(this, "makeGizmos", (tbCenter, tbRadius) => {
+      // @ts-expect-error
       const curve = new EllipseCurve(0, 0, tbRadius, tbRadius);
       const points = curve.getPoints(this._curvePts); //geometry
 
@@ -1441,7 +1647,7 @@ class ArcballControls extends EventDispatcher {
 
       this._gizmoMatrixState.copy(this._gizmoMatrixState0);
 
-      if (this.camera.zoom != 1) {
+      if (this.camera && this.camera.zoom != 1) {
         //adapt gizmos size to camera zoom
         const size = 1 / this.camera.zoom;
 
@@ -1550,60 +1756,72 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "pan", (p0, p1, adjust = false) => {
-      const movement = p0.clone().sub(p1);
+      if (this.camera) {
+        const movement = p0.clone().sub(p1);
 
-      if (this.camera.isOrthographicCamera) {
-        //adjust movement amount
-        movement.multiplyScalar(1 / this.camera.zoom);
-      } else if (this.camera.isPerspectiveCamera && adjust) {
-        //adjust movement amount
-        this._v3_1.setFromMatrixPosition(this._cameraMatrixState0); //camera's initial position
+        if (this.camera.type === 'OrthographicCamera') {
+          //adjust movement amount
+          movement.multiplyScalar(1 / this.camera.zoom);
+        }
 
+        if (this.camera.type === 'PerspectiveCamera' && adjust) {
+          //adjust movement amount
+          this._v3_1.setFromMatrixPosition(this._cameraMatrixState0); //camera's initial position
 
-        this._v3_2.setFromMatrixPosition(this._gizmoMatrixState0); //gizmo'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._v3_1.set(movement.x, movement.y, 0).applyQuaternion(this.camera.quaternion);
+          const distanceFactor = this._v3_1.distanceTo(this._v3_2) / this.camera.position.distanceTo(this._gizmos.position);
+          movement.multiplyScalar(1 / distanceFactor);
+        }
+
+        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._m4_1.makeTranslation(this._v3_1.x, this._v3_1.y, this._v3_1.z);
+
+        this.setTransformationMatrices(this._m4_1, this._m4_1);
+      }
 
-      this.setTransformationMatrices(this._m4_1, this._m4_1);
       return _transformation;
     });
 
     _defineProperty(this, "reset", () => {
-      this.camera.zoom = this._zoom0;
+      if (this.camera) {
+        this.camera.zoom = this._zoom0;
 
-      if (this.camera.isPerspectiveCamera) {
-        this.camera.fov = this._fov0;
-      }
+        if (this.camera.type === 'PerspectiveCamera') {
+          this.camera.fov = this._fov0;
+        }
 
-      this.camera.near = this._nearPos;
-      this.camera.far = this._farPos;
+        this.camera.near = this._nearPos;
+        this.camera.far = this._farPos;
 
-      this._cameraMatrixState.copy(this._cameraMatrixState0);
+        this._cameraMatrixState.copy(this._cameraMatrixState0);
 
-      this._cameraMatrixState.decompose(this.camera.position, this.camera.quaternion, this.camera.scale);
+        this._cameraMatrixState.decompose(this.camera.position, this.camera.quaternion, this.camera.scale);
 
-      this.camera.up.copy(this._up0);
-      this.camera.updateMatrix();
-      this.camera.updateProjectionMatrix();
+        this.camera.up.copy(this._up0);
+        this.camera.updateMatrix();
+        this.camera.updateProjectionMatrix();
 
-      this._gizmoMatrixState.copy(this._gizmoMatrixState0);
+        this._gizmoMatrixState.copy(this._gizmoMatrixState0);
 
-      this._gizmoMatrixState0.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale);
+        this._gizmoMatrixState0.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale);
 
-      this._gizmos.updateMatrix();
+        this._gizmos.updateMatrix();
 
-      this._tbRadius = this.calculateTbRadius(this.camera);
-      this.makeGizmos(this._gizmos.position, this._tbRadius);
-      this.camera.lookAt(this._gizmos.position);
-      this.updateTbState(STATE.IDLE, false);
-      this.dispatchEvent(_changeEvent);
+        const tbRadius = this.calculateTbRadius(this.camera);
+
+        if (tbRadius !== undefined) {
+          this._tbRadius = tbRadius;
+        }
+
+        this.makeGizmos(this._gizmos.position, this._tbRadius);
+        this.camera.lookAt(this._gizmos.position);
+        this.updateTbState(STATE.IDLE, false);
+        this.dispatchEvent(_changeEvent);
+      }
     });
 
     _defineProperty(this, "rotate", (axis, angle) => {
@@ -1625,10 +1843,10 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "copyState", () => {
-      let state;
+      if (this.camera) {
+        var _this$camera12;
 
-      if (this.camera.isOrthographicCamera) {
-        state = JSON.stringify({
+        const state = JSON.stringify(((_this$camera12 = this.camera) === null || _this$camera12 === void 0 ? void 0 : _this$camera12.type) === 'OrthographicCamera' ? {
           arcballState: {
             cameraFar: this.camera.far,
             cameraMatrix: this.camera.matrix,
@@ -1637,9 +1855,7 @@ class ArcballControls extends EventDispatcher {
             cameraZoom: this.camera.zoom,
             gizmoMatrix: this._gizmos.matrix
           }
-        });
-      } else if (this.camera.isPerspectiveCamera) {
-        state = JSON.stringify({
+        } : {
           arcballState: {
             cameraFar: this.camera.far,
             cameraFov: this.camera.fov,
@@ -1650,9 +1866,8 @@ class ArcballControls extends EventDispatcher {
             gizmoMatrix: this._gizmos.matrix
           }
         });
+        navigator.clipboard.writeText(state);
       }
-
-      navigator.clipboard.writeText(state);
     });
 
     _defineProperty(this, "pasteState", () => {
@@ -1663,6 +1878,8 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "saveState", () => {
+      if (!this.camera) return;
+
       this._cameraMatrixState0.copy(this.camera.matrix);
 
       this._gizmoMatrixState0.copy(this._gizmos.matrix);
@@ -1673,16 +1890,17 @@ class ArcballControls extends EventDispatcher {
 
       this._up0.copy(this.camera.up);
 
-      if (this.camera.isPerspectiveCamera) {
+      if (this.camera.type === 'PerspectiveCamera') {
         this._fov0 = this.camera.fov;
       }
     });
 
     _defineProperty(this, "applyScale", (size, point, scaleGizmos = true) => {
+      if (!this.camera) return;
       const scalePoint = point.clone();
       let sizeInverse = 1 / size;
 
-      if (this.camera.isOrthographicCamera) {
+      if (this.camera.type === 'OrthographicCamera') {
         //camera zoom
         this.camera.zoom = this._zoomState;
         this.camera.zoom *= size; //check min and max zoom
@@ -1720,7 +1938,9 @@ class ArcballControls extends EventDispatcher {
 
         this.setTransformationMatrices(this._m4_1, this._m4_2);
         return _transformation;
-      } else if (this.camera.isPerspectiveCamera) {
+      }
+
+      if (this.camera.type === 'PerspectiveCamera') {
         this._v3_1.setFromMatrixPosition(this._cameraMatrixState);
 
         this._v3_2.setFromMatrixPosition(this._gizmoMatrixState); //move camera
@@ -1773,12 +1993,32 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "setFov", value => {
-      if (this.camera.isPerspectiveCamera) {
+      var _this$camera13;
+
+      if (((_this$camera13 = this.camera) === null || _this$camera13 === void 0 ? void 0 : _this$camera13.type) === 'PerspectiveCamera') {
         this.camera.fov = MathUtils.clamp(value, this.minFov, this.maxFov);
         this.camera.updateProjectionMatrix();
       }
     });
 
+    _defineProperty(this, "setTarget", (x, y, z) => {
+      if (this.camera) {
+        this.target.set(x, y, z);
+
+        this._gizmos.position.set(x, y, z); //for correct radius calculation
+
+
+        const tbRadius = this.calculateTbRadius(this.camera);
+
+        if (tbRadius !== undefined) {
+          this._tbRadius = tbRadius;
+        }
+
+        this.makeGizmos(this.target, this._tbRadius);
+        this.camera.lookAt(this.target);
+      }
+    });
+
     _defineProperty(this, "zRotate", (point, angle) => {
       this._rotationMatrix.makeRotationAxis(this._rotationAxis, angle);
 
@@ -1805,6 +2045,7 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "unprojectOnObj", (cursor, camera) => {
+      if (!this.scene) return null;
       const raycaster = new Raycaster();
       raycaster.near = camera.near;
       raycaster.far = camera.far;
@@ -1812,7 +2053,7 @@ class ArcballControls extends EventDispatcher {
       const intersect = raycaster.intersectObjects(this.scene.children, true);
 
       for (let i = 0; i < intersect.length; i++) {
-        if (intersect[i].object.uuid != this._gizmos.uuid && intersect[i].face != null) {
+        if (intersect[i].object.uuid != this._gizmos.uuid && intersect[i].face) {
           return intersect[i].point.clone();
         }
       }
@@ -1839,7 +2080,9 @@ class ArcballControls extends EventDispatcher {
         }
 
         return this._v3_1;
-      } else if (camera.type == 'PerspectiveCamera') {
+      }
+
+      if (camera.type == 'PerspectiveCamera') {
         //unproject cursor on the near plane
         this._v2_1.copy(this.getCursorNDC(cursorX, cursorY, canvas));
 
@@ -1934,7 +2177,9 @@ class ArcballControls extends EventDispatcher {
         this._v3_1.set(this._v2_1.x, this._v2_1.y, 0);
 
         return this._v3_1.clone();
-      } else if (camera.type == 'PerspectiveCamera') {
+      }
+
+      if (camera.type == 'PerspectiveCamera') {
         this._v2_1.copy(this.getCursorNDC(cursorX, cursorY, canvas)); //unproject cursor on the near plane
 
 
@@ -1989,17 +2234,20 @@ class ArcballControls extends EventDispatcher {
     });
 
     _defineProperty(this, "updateMatrixState", () => {
-      //update camera and gizmos state
+      if (!this.camera) return; //update camera and gizmos state
+
       this._cameraMatrixState.copy(this.camera.matrix);
 
       this._gizmoMatrixState.copy(this._gizmos.matrix);
 
-      if (this.camera.isOrthographicCamera) {
+      if (this.camera.type === 'OrthographicCamera') {
         this._cameraProjectionState.copy(this.camera.projectionMatrix);
 
         this.camera.updateProjectionMatrix();
         this._zoomState = this.camera.zoom;
-      } else if (this.camera.isPerspectiveCamera) {
+      }
+
+      if (this.camera.type === 'PerspectiveCamera') {
         this._fovState = this.camera.fov;
       }
     });
@@ -2015,24 +2263,32 @@ class ArcballControls extends EventDispatcher {
     _defineProperty(this, "update", () => {
       const EPS = 0.000001; // Update target and gizmos state
 
-      if (!this.target.equals(this._currentTarget)) {
+      if (!this.target.equals(this._currentTarget) && this.camera) {
         this._gizmos.position.set(this.target.x, this.target.y, this.target.z); //for correct radius calculation
 
 
-        this._tbRadius = this.calculateTbRadius(this.camera);
+        const tbRadius = this.calculateTbRadius(this.camera);
+
+        if (tbRadius !== undefined) {
+          this._tbRadius = tbRadius;
+        }
+
         this.makeGizmos(this.target, this._tbRadius);
 
         this._currentTarget.copy(this.target);
-      } //check min/max parameters
+      }
 
+      if (!this.camera) return; //check min/max parameters
 
-      if (this.camera.isOrthographicCamera) {
+      if (this.camera.type === 'OrthographicCamera') {
         //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.applyScale(newZoom / this.camera.zoom, this._gizmos.position, true));
         }
-      } else if (this.camera.isPerspectiveCamera) {
+      }
+
+      if (this.camera.type === 'PerspectiveCamera') {
         //check distance
         const distance = this.camera.position.distanceTo(this._gizmos.position);
 
@@ -2049,17 +2305,23 @@ class ArcballControls extends EventDispatcher {
         }
 
         const oldRadius = this._tbRadius;
-        this._tbRadius = this.calculateTbRadius(this.camera);
+        const tbRadius = this.calculateTbRadius(this.camera);
+
+        if (tbRadius !== undefined) {
+          this._tbRadius = tbRadius;
+        }
 
         if (oldRadius < this._tbRadius - EPS || oldRadius > this._tbRadius + EPS) {
           const scale = (this._gizmos.scale.x + this._gizmos.scale.y + this._gizmos.scale.z) / 3;
-          const newRadius = this._tbRadius / scale;
+          const newRadius = this._tbRadius / scale; // @ts-expect-error
+
           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) {
-            this._gizmos.children[gizmo].geometry = curveGeometry;
+            const child = this._gizmos.children[gizmo];
+            child.geometry = curveGeometry;
           }
         }
       }
@@ -2070,7 +2332,7 @@ class ArcballControls extends EventDispatcher {
     _defineProperty(this, "setStateFromJSON", json => {
       const state = JSON.parse(json);
 
-      if (state.arcballState != undefined) {
+      if (state.arcballState && this.camera) {
         this._cameraMatrixState.fromArray(state.arcballState.cameraMatrix.elements);
 
         this._cameraMatrixState.decompose(this.camera.position, this.camera.quaternion, this.camera.scale);
@@ -2080,7 +2342,7 @@ class ArcballControls extends EventDispatcher {
         this.camera.far = state.arcballState.cameraFar;
         this.camera.zoom = state.arcballState.cameraZoom;
 
-        if (this.camera.isPerspectiveCamera) {
+        if (this.camera.type === 'PerspectiveCamera') {
           this.camera.fov = state.arcballState.cameraFov;
         }
 
@@ -2093,7 +2355,12 @@ class ArcballControls extends EventDispatcher {
 
         this._gizmos.updateMatrix();
 
-        this._tbRadius = this.calculateTbRadius(this.camera);
+        const tbRadius = this.calculateTbRadius(this.camera);
+
+        if (tbRadius !== undefined) {
+          this._tbRadius = tbRadius;
+        }
+
         const gizmoTmp = new Matrix4().copy(this._gizmoMatrixState0);
         this.makeGizmos(this._gizmos.position, this._tbRadius);
 
@@ -2106,6 +2373,7 @@ class ArcballControls extends EventDispatcher {
     });
 
     this.camera = null;
+    this.domElement = _domElement;
     this.scene = scene;
     this.mouseActions = [];
     this._mouseOp = null; //global vectors and matrices that are used in some operations to avoid creating new objects every time (e.g. every time cursor moves)
@@ -2163,8 +2431,6 @@ class ArcballControls extends EventDispatcher {
     this._downValid = true;
     this._nclicks = 0;
     this._downEvents = [];
-    this._downStart = 0; //pointerDown time
-
     this._clickStart = 0; //first click time
 
     this._maxDownTime = 250;
@@ -2224,7 +2490,6 @@ class ArcballControls extends EventDispatcher {
     this.enablePan = true;
     this.enableRotate = true;
     this.enableZoom = true;
-    this.enableGizmos = true;
     this.minDistance = 0;
     this.maxDistance = Infinity;
     this.minZoom = 0;
@@ -2237,14 +2502,14 @@ class ArcballControls extends EventDispatcher {
     this._state = STATE.IDLE;
     this.setCamera(_camera);
 
-    if (this.scene != null) {
+    if (this.scene) {
       this.scene.add(this._gizmos);
-    } // connect events
-
+    }
 
-    if (_domElement !== undefined) this.connect(_domElement);
     this._devPxRatio = window.devicePixelRatio;
     this.initializeMouseActions();
+    if (this.domElement) this.connect(this.domElement);
+    window.addEventListener('resize', this.onWindowResize);
   } //listeners
 
 
@@ -2253,7 +2518,7 @@ class ArcballControls extends EventDispatcher {
    * @param {Object} transformation Object containing matrices to apply to camera and gizmos
    */
   applyTransformMatrix(transformation) {
-    if (transformation.camera != null) {
+    if (transformation !== null && transformation !== void 0 && transformation.camera && this.camera) {
       this._m4_1.copy(this._cameraMatrixState).premultiply(transformation.camera);
 
       this._m4_1.decompose(this.camera.position, this.camera.quaternion, this.camera.scale);
@@ -2265,7 +2530,7 @@ class ArcballControls extends EventDispatcher {
       }
     }
 
-    if (transformation.gizmos != null) {
+    if (transformation !== null && transformation !== void 0 && transformation.gizmos) {
       this._m4_1.copy(this._gizmoMatrixState).premultiply(transformation.gizmos);
 
       this._m4_1.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale);
@@ -2273,8 +2538,12 @@ class ArcballControls extends EventDispatcher {
       this._gizmos.updateMatrix();
     }
 
-    if (this._state == STATE.SCALE || this._state == STATE.FOCUS || this._state == STATE.ANIMATION_FOCUS) {
-      this._tbRadius = this.calculateTbRadius(this.camera);
+    if ((this._state == STATE.SCALE || this._state == STATE.FOCUS || this._state == STATE.ANIMATION_FOCUS) && this.camera) {
+      const tbRadius = this.calculateTbRadius(this.camera);
+
+      if (tbRadius !== undefined) {
+        this._tbRadius = tbRadius;
+      }
 
       if (this.adjustNearFar) {
         const cameraDistance = this.camera.position.distanceTo(this._gizmos.position);
@@ -2340,8 +2609,8 @@ class ArcballControls extends EventDispatcher {
    * @param {Matrix4} gizmos Transformation to be applied to gizmos
    */
   setTransformationMatrices(camera = null, gizmos = null) {
-    if (camera != null) {
-      if (_transformation.camera != null) {
+    if (camera) {
+      if (_transformation.camera) {
         _transformation.camera.copy(camera);
       } else {
         _transformation.camera = camera.clone();
@@ -2350,8 +2619,8 @@ class ArcballControls extends EventDispatcher {
       _transformation.camera = null;
     }
 
-    if (gizmos != null) {
-      if (_transformation.gizmos != null) {
+    if (gizmos) {
+      if (_transformation.gizmos) {
         _transformation.gizmos.copy(gizmos);
       } else {
         _transformation.gizmos = gizmos.clone();