three-stdlib 2.16.0 → 2.16.2

package/controls/ArcballControls.js

@@ -1,6 +1,7 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const THREE = require("three");
+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(),
@@ -20,300 +21,604 @@ const INPUT = {
   TWO_FINGER: Symbol(),
   MULT_FINGER: Symbol(),
   CURSOR: Symbol()
-};
+}; //cursor center coordinates
+
 const _center = {
   x: 0,
   y: 0
-};
+}; //transformation matrices for gizmos and camera
+
 const _transformation = {
-  camera: new THREE.Matrix4(),
-  gizmos: new THREE.Matrix4()
+  camera: new Matrix4(),
+  gizmos: new Matrix4()
+}; //events
+
+const _changeEvent = {
+  type: 'change'
+};
+const _startEvent = {
+  type: 'start'
+};
+const _endEvent = {
+  type: 'end'
 };
-const _changeEvent = { type: "change" };
-const _startEvent = { type: "start" };
-const _endEvent = { type: "end" };
-class ArcballControls extends THREE.EventDispatcher {
-  constructor(camera, domElement = null, scene = null) {
+/**
+ *
+ * @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 = null, scene = null) {
     super();
-    this.onWindowResize = () => {
+
+    _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;
+
       if (this.camera) {
         const tbRadius = this.calculateTbRadius(this.camera);
-        if (tbRadius !== void 0) {
+
+        if (tbRadius !== undefined) {
           this._tbRadius = tbRadius;
         }
       }
-      const newRadius = this._tbRadius / scale;
-      const curve = new THREE.EllipseCurve(0, 0, newRadius, newRadius);
+
+      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 THREE.BufferGeometry().setFromPoints(points);
+      const curveGeometry = new BufferGeometry().setFromPoints(points);
+
       for (const gizmo in this._gizmos.children) {
         const child = this._gizmos.children[gizmo];
         child.geometry = curveGeometry;
       }
+
       this.dispatchEvent(_changeEvent);
-    };
-    this.onContextMenu = (event) => {
+    });
+
+    _defineProperty(this, "onContextMenu", event => {
       if (!this.enabled) {
         return;
       }
+
       for (let i = 0; i < this.mouseActions.length; i++) {
         if (this.mouseActions[i].mouse == 2) {
+          //prevent only if button 2 is actually used
           event.preventDefault();
           break;
         }
       }
-    };
-    this.onPointerCancel = () => {
+    });
+
+    _defineProperty(this, "onPointerCancel", () => {
       this._touchStart.splice(0, this._touchStart.length);
+
       this._touchCurrent.splice(0, this._touchCurrent.length);
+
       this._input = INPUT.NONE;
-    };
-    this.onPointerDown = (event) => {
+    });
+
+    _defineProperty(this, "onPointerDown", event => {
       if (event.button == 0 && event.isPrimary) {
         this._downValid = true;
+
         this._downEvents.push(event);
       } else {
         this._downValid = false;
       }
-      if (event.pointerType == "touch" && this._input != INPUT.CURSOR) {
+
+      if (event.pointerType == 'touch' && this._input != INPUT.CURSOR) {
         this._touchStart.push(event);
+
         this._touchCurrent.push(event);
+
         switch (this._input) {
           case INPUT.NONE:
+            //singleStart
             this._input = INPUT.ONE_FINGER;
-            this.onSinglePanStart(event, "ROTATE");
-            window.addEventListener("pointermove", this.onPointerMove);
-            window.addEventListener("pointerup", this.onPointerUp);
+            this.onSinglePanStart(event, 'ROTATE');
+            window.addEventListener('pointermove', this.onPointerMove);
+            window.addEventListener('pointerup', this.onPointerUp);
             break;
+
           case INPUT.ONE_FINGER:
           case INPUT.ONE_FINGER_SWITCHED:
+            //doubleStart
             this._input = INPUT.TWO_FINGER;
             this.onRotateStart();
             this.onPinchStart();
             this.onDoublePanStart();
             break;
+
           case INPUT.TWO_FINGER:
+            //multipleStart
             this._input = INPUT.MULT_FINGER;
             this.onTriplePanStart();
             break;
         }
-      } else if (event.pointerType != "touch" && this._input == INPUT.NONE) {
+      } else if (event.pointerType != 'touch' && this._input == INPUT.NONE) {
         let modifier = null;
+
         if (event.ctrlKey || event.metaKey) {
-          modifier = "CTRL";
+          modifier = 'CTRL';
         } else if (event.shiftKey) {
-          modifier = "SHIFT";
+          modifier = 'SHIFT';
         }
+
         this._mouseOp = this.getOpFromAction(event.button, modifier);
+
         if (this._mouseOp) {
-          window.addEventListener("pointermove", this.onPointerMove);
-          window.addEventListener("pointerup", this.onPointerUp);
+          window.addEventListener('pointermove', this.onPointerMove);
+          window.addEventListener('pointerup', this.onPointerUp); //singleStart
+
           this._input = INPUT.CURSOR;
           this._button = event.button;
           this.onSinglePanStart(event, this._mouseOp);
         }
       }
-    };
-    this.onPointerMove = (event) => {
-      if (event.pointerType == "touch" && this._input != INPUT.CURSOR) {
+    });
+
+    _defineProperty(this, "onPointerMove", event => {
+      if (event.pointerType == 'touch' && this._input != INPUT.CURSOR) {
         switch (this._input) {
           case INPUT.ONE_FINGER:
+            //singleMove
             this.updateTouchEvent(event);
             this.onSinglePanMove(event, STATE.ROTATE);
             break;
+
           case INPUT.ONE_FINGER_SWITCHED:
             const movement = this.calculatePointersDistance(this._touchCurrent[0], event) * this._devPxRatio;
+
             if (movement >= this._switchSensibility) {
+              //singleMove
               this._input = INPUT.ONE_FINGER;
               this.updateTouchEvent(event);
-              this.onSinglePanStart(event, "ROTATE");
+              this.onSinglePanStart(event, 'ROTATE');
               break;
             }
+
             break;
+
           case INPUT.TWO_FINGER:
+            //rotate/pan/pinchMove
             this.updateTouchEvent(event);
             this.onRotateMove();
             this.onPinchMove();
             this.onDoublePanMove();
             break;
+
           case INPUT.MULT_FINGER:
+            //multMove
             this.updateTouchEvent(event);
             this.onTriplePanMove();
             break;
         }
-      } else if (event.pointerType != "touch" && this._input == INPUT.CURSOR) {
+      } else if (event.pointerType != 'touch' && this._input == INPUT.CURSOR) {
         let modifier = null;
+
         if (event.ctrlKey || event.metaKey) {
-          modifier = "CTRL";
+          modifier = 'CTRL';
         } else if (event.shiftKey) {
-          modifier = "SHIFT";
+          modifier = 'SHIFT';
         }
+
         const mouseOpState = this.getOpStateFromAction(this._button, modifier);
+
         if (mouseOpState) {
           this.onSinglePanMove(event, mouseOpState);
         }
-      }
+      } //checkDistance
+
+
       if (this._downValid) {
         const movement = this.calculatePointersDistance(this._downEvents[this._downEvents.length - 1], event) * this._devPxRatio;
+
         if (movement > this._movementThreshold) {
           this._downValid = false;
         }
       }
-    };
-    this.onPointerUp = (event) => {
-      if (event.pointerType == "touch" && this._input != INPUT.CURSOR) {
+    });
+
+    _defineProperty(this, "onPointerUp", event => {
+      if (event.pointerType == 'touch' && this._input != INPUT.CURSOR) {
         const nTouch = this._touchCurrent.length;
+
         for (let i = 0; i < nTouch; i++) {
           if (this._touchCurrent[i].pointerId == event.pointerId) {
             this._touchCurrent.splice(i, 1);
+
             this._touchStart.splice(i, 1);
+
             break;
           }
         }
+
         switch (this._input) {
           case INPUT.ONE_FINGER:
           case INPUT.ONE_FINGER_SWITCHED:
-            window.removeEventListener("pointermove", this.onPointerMove);
-            window.removeEventListener("pointerup", this.onPointerUp);
+            //singleEnd
+            window.removeEventListener('pointermove', this.onPointerMove);
+            window.removeEventListener('pointerup', this.onPointerUp);
             this._input = INPUT.NONE;
             this.onSinglePanEnd();
             break;
+
           case INPUT.TWO_FINGER:
+            //doubleEnd
             this.onDoublePanEnd();
             this.onPinchEnd();
-            this.onRotateEnd();
+            this.onRotateEnd(); //switching to singleStart
+
             this._input = INPUT.ONE_FINGER_SWITCHED;
             break;
+
           case INPUT.MULT_FINGER:
             if (this._touchCurrent.length == 0) {
-              window.removeEventListener("pointermove", this.onPointerMove);
-              window.removeEventListener("pointerup", this.onPointerUp);
+              window.removeEventListener('pointermove', this.onPointerMove);
+              window.removeEventListener('pointerup', this.onPointerUp); //multCancel
+
               this._input = INPUT.NONE;
               this.onTriplePanEnd();
             }
+
             break;
         }
-      } else if (event.pointerType != "touch" && this._input == INPUT.CURSOR) {
-        window.removeEventListener("pointermove", this.onPointerMove);
-        window.removeEventListener("pointerup", this.onPointerUp);
+      } else if (event.pointerType != 'touch' && this._input == INPUT.CURSOR) {
+        window.removeEventListener('pointermove', this.onPointerMove);
+        window.removeEventListener('pointerup', this.onPointerUp);
         this._input = INPUT.NONE;
         this.onSinglePanEnd();
         this._button = -1;
       }
+
       if (event.isPrimary) {
         if (this._downValid) {
           const downTime = event.timeStamp - this._downEvents[this._downEvents.length - 1].timeStamp;
+
           if (downTime <= this._maxDownTime) {
             if (this._nclicks == 0) {
+              //first valid click detected
               this._nclicks = 1;
               this._clickStart = performance.now();
             } else {
               const clickInterval = event.timeStamp - this._clickStart;
+
               const movement = this.calculatePointersDistance(this._downEvents[1], this._downEvents[0]) * this._devPxRatio;
+
               if (clickInterval <= this._maxInterval && movement <= this._posThreshold) {
+                //second valid click detected
+                //fire double tap and reset values
                 this._nclicks = 0;
+
                 this._downEvents.splice(0, this._downEvents.length);
+
                 this.onDoubleTap(event);
               } else {
+                //new 'first click'
                 this._nclicks = 1;
+
                 this._downEvents.shift();
+
                 this._clickStart = performance.now();
               }
             }
           } else {
             this._downValid = false;
             this._nclicks = 0;
+
             this._downEvents.splice(0, this._downEvents.length);
           }
         } else {
           this._nclicks = 0;
+
           this._downEvents.splice(0, this._downEvents.length);
         }
       }
-    };
-    this.onWheel = (event) => {
-      var _a, _b, _c, _d, _e;
+    });
+
+    _defineProperty(this, "onWheel", event => {
+      var _this$camera3;
+
       if (this.enabled && this.enableZoom && this.domElement) {
         let modifier = null;
+
         if (event.ctrlKey || event.metaKey) {
-          modifier = "CTRL";
+          modifier = 'CTRL';
         } else if (event.shiftKey) {
-          modifier = "SHIFT";
+          modifier = 'SHIFT';
         }
-        const mouseOp = this.getOpFromAction("WHEEL", modifier);
+
+        const mouseOp = this.getOpFromAction('WHEEL', modifier);
+
         if (mouseOp) {
           event.preventDefault();
           this.dispatchEvent(_startEvent);
-          const notchDeltaY = 125;
+          const notchDeltaY = 125; //distance of one notch of mouse wheel
+
           let sgn = event.deltaY / notchDeltaY;
           let size = 1;
+
           if (sgn > 0) {
             size = 1 / this.scaleFactor;
           } else if (sgn < 0) {
             size = this.scaleFactor;
           }
+
           switch (mouseOp) {
-            case "ZOOM":
+            case 'ZOOM':
               this.updateTbState(STATE.SCALE, true);
+
               if (sgn > 0) {
                 size = 1 / Math.pow(this.scaleFactor, sgn);
               } else if (sgn < 0) {
                 size = Math.pow(this.scaleFactor, -sgn);
               }
+
               if (this.cursorZoom && this.enablePan) {
+                var _this$camera, _this$camera2;
+
                 let scalePoint;
-                if (((_a = this.camera) == null ? void 0 : _a.type) === "OrthographicCamera") {
-                  scalePoint = (_b = this.unprojectOnTbPlane(this.camera, event.clientX, event.clientY, this.domElement)) == null ? void 0 : _b.applyQuaternion(this.camera.quaternion).multiplyScalar(1 / this.camera.zoom).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 (((_c = this.camera) == null ? void 0 : _c.type) === "PerspectiveCamera") {
-                  scalePoint = (_d = this.unprojectOnTbPlane(this.camera, event.clientX, event.clientY, this.domElement)) == null ? void 0 : _d.applyQuaternion(this.camera.quaternion).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);
                 }
-                if (scalePoint !== void 0)
-                  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) {
                 this.disposeGrid();
                 this.drawGrid();
               }
+
               this.updateTbState(STATE.IDLE, false);
               this.dispatchEvent(_changeEvent);
               this.dispatchEvent(_endEvent);
               break;
-            case "FOV":
-              if (((_e = this.camera) == null ? void 0 : _e.type) === "PerspectiveCamera") {
-                this.updateTbState(STATE.FOV, true);
+
+            case 'FOV':
+              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
+                //		|\
+                //		| \
+                //		|  \
+                //	x	|	\
+                //		| 	 \
+                //		| 	  \
+                //		| _ _ _\
+                //			y
+                //check for iOs shift shortcut
+
                 if (event.deltaX != 0) {
                   sgn = event.deltaX / notchDeltaY;
                   size = 1;
+
                   if (sgn > 0) {
                     size = 1 / Math.pow(this.scaleFactor, sgn);
                   } else if (sgn < 0) {
                     size = Math.pow(this.scaleFactor, -sgn);
                   }
                 }
+
                 this._v3_1.setFromMatrixPosition(this._cameraMatrixState);
+
                 const x = this._v3_1.distanceTo(this._gizmos.position);
-                let xNew = x / size;
-                xNew = THREE.MathUtils.clamp(xNew, this.minDistance, this.maxDistance);
-                const y = x * Math.tan(THREE.MathUtils.DEG2RAD * this.camera.fov * 0.5);
-                let newFov = THREE.MathUtils.RAD2DEG * (Math.atan(y / xNew) * 2);
+
+                let xNew = x / size; //distance between camera and gizmos if scale(size, scalepoint) would be performed
+                //check min and max distance
+
+                xNew = MathUtils.clamp(xNew, this.minDistance, this.maxDistance);
+                const y = x * Math.tan(MathUtils.DEG2RAD * this.camera.fov * 0.5); //calculate new fov
+
+                let newFov = MathUtils.RAD2DEG * (Math.atan(y / xNew) * 2); //check min and max fov
+
                 if (newFov > this.maxFov) {
                   newFov = this.maxFov;
                 } else if (newFov < this.minFov) {
                   newFov = this.minFov;
                 }
-                const newDistance = y / Math.tan(THREE.MathUtils.DEG2RAD * (newFov / 2));
+
+                const newDistance = y / Math.tan(MathUtils.DEG2RAD * (newFov / 2));
                 size = x / newDistance;
                 this.setFov(newFov);
                 this.applyTransformMatrix(this.applyScale(size, this._gizmos.position, false));
               }
+
               if (this._grid) {
                 this.disposeGrid();
                 this.drawGrid();
               }
+
               this.updateTbState(STATE.IDLE, false);
               this.dispatchEvent(_changeEvent);
               this.dispatchEvent(_endEvent);
@@ -321,16 +626,19 @@ class ArcballControls extends THREE.EventDispatcher {
           }
         }
       }
-    };
-    this.onSinglePanStart = (event, operation) => {
-      var _a;
+    });
+
+    _defineProperty(this, "onSinglePanStart", (event, operation) => {
+      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;
+          case 'PAN':
+            if (!this.enablePan) return;
+
             if (this._animationId != -1) {
               cancelAnimationFrame(this._animationId);
               this._animationId = -1;
@@ -338,48 +646,62 @@ class ArcballControls extends THREE.EventDispatcher {
               this.activateGizmos(false);
               this.dispatchEvent(_changeEvent);
             }
+
             if (this.camera) {
               this.updateTbState(STATE.PAN, true);
               const rayDir = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement);
-              if (rayDir !== void 0) {
+
+              if (rayDir !== undefined) {
                 this._startCursorPosition.copy(rayDir);
               }
+
               if (this.enableGrid) {
                 this.drawGrid();
                 this.dispatchEvent(_changeEvent);
               }
             }
+
             break;
-          case "ROTATE":
-            if (!this.enableRotate)
-              return;
+
+          case 'ROTATE':
+            if (!this.enableRotate) return;
+
             if (this._animationId != -1) {
               cancelAnimationFrame(this._animationId);
               this._animationId = -1;
               this._timeStart = -1;
             }
+
             if (this.camera) {
               this.updateTbState(STATE.ROTATE, true);
               const rayDir = this.unprojectOnTbSurface(this.camera, _center.x, _center.y, this.domElement, this._tbRadius);
-              if (rayDir !== void 0) {
+
+              if (rayDir !== undefined) {
                 this._startCursorPosition.copy(rayDir);
               }
+
               this.activateGizmos(true);
+
               if (this.enableAnimations) {
                 this._timePrev = this._timeCurrent = performance.now();
                 this._angleCurrent = this._anglePrev = 0;
+
                 this._cursorPosPrev.copy(this._startCursorPosition);
+
                 this._cursorPosCurr.copy(this._cursorPosPrev);
+
                 this._wCurr = 0;
                 this._wPrev = this._wCurr;
               }
             }
+
             this.dispatchEvent(_changeEvent);
             break;
-          case "FOV":
-            if (!this.enableZoom)
-              return;
-            if (((_a = this.camera) == null ? void 0 : _a.type) === "PerspectiveCamera") {
+
+          case 'FOV':
+            if (!this.enableZoom) return;
+
+            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;
@@ -387,14 +709,19 @@ class ArcballControls extends THREE.EventDispatcher {
                 this.activateGizmos(false);
                 this.dispatchEvent(_changeEvent);
               }
+
               this.updateTbState(STATE.FOV, true);
+
               this._startCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5);
+
               this._currentCursorPosition.copy(this._startCursorPosition);
             }
+
             break;
-          case "ZOOM":
-            if (!this.enableZoom)
-              return;
+
+          case 'ZOOM':
+            if (!this.enableZoom) return;
+
             if (this._animationId != -1) {
               cancelAnimationFrame(this._animationId);
               this._animationId = -1;
@@ -402,182 +729,234 @@ class ArcballControls extends THREE.EventDispatcher {
               this.activateGizmos(false);
               this.dispatchEvent(_changeEvent);
             }
+
             this.updateTbState(STATE.SCALE, true);
+
             this._startCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5);
+
             this._currentCursorPosition.copy(this._startCursorPosition);
+
             break;
         }
       }
-    };
-    this.onSinglePanMove = (event, opState) => {
-      var _a;
+    });
+
+    _defineProperty(this, "onSinglePanMove", (event, opState) => {
+      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 && 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);
-                if (rayDir !== void 0) {
+
+                if (rayDir !== undefined) {
                   this._startCursorPosition.copy(rayDir);
                 }
+
                 if (this.enableGrid) {
                   this.drawGrid();
                 }
+
                 this.activateGizmos(false);
               } else {
+                //continue with pan operation
                 const rayDir = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement);
-                if (rayDir !== void 0) {
+
+                if (rayDir !== undefined) {
                   this._currentCursorPosition.copy(rayDir);
                 }
+
                 this.applyTransformMatrix(this.pan(this._startCursorPosition, this._currentCursorPosition));
               }
             }
+
             break;
+
           case STATE.ROTATE:
             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
-                );
-                if (rayDir !== void 0) {
+                const rayDir = this.unprojectOnTbSurface(this.camera, _center.x, _center.y, this.domElement, this._tbRadius);
+
+                if (rayDir !== undefined) {
                   this._startCursorPosition.copy(rayDir);
                 }
+
                 if (this.enableGrid) {
                   this.disposeGrid();
                 }
+
                 this.activateGizmos(true);
               } else {
-                const rayDir = this.unprojectOnTbSurface(
-                  this.camera,
-                  _center.x,
-                  _center.y,
-                  this.domElement,
-                  this._tbRadius
-                );
-                if (rayDir !== void 0) {
+                //continue with rotate operation
+                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);
+
                 const angle = this._startCursorPosition.angleTo(this._currentCursorPosition);
-                const amount = Math.max(distance / this._tbRadius, angle);
-                this.applyTransformMatrix(
-                  this.rotate(this.calculateRotationAxis(this._startCursorPosition, this._currentCursorPosition), amount)
-                );
+
+                const amount = Math.max(distance / this._tbRadius, angle); //effective rotation angle
+
+                this.applyTransformMatrix(this.rotate(this.calculateRotationAxis(this._startCursorPosition, this._currentCursorPosition), amount));
+
                 if (this.enableAnimations) {
                   this._timePrev = this._timeCurrent;
                   this._timeCurrent = performance.now();
                   this._anglePrev = this._angleCurrent;
                   this._angleCurrent = amount;
+
                   this._cursorPosPrev.copy(this._cursorPosCurr);
+
                   this._cursorPosCurr.copy(this._currentCursorPosition);
+
                   this._wPrev = this._wCurr;
-                  this._wCurr = this.calculateAngularSpeed(
-                    this._anglePrev,
-                    this._angleCurrent,
-                    this._timePrev,
-                    this._timeCurrent
-                  );
+                  this._wCurr = this.calculateAngularSpeed(this._anglePrev, this._angleCurrent, this._timePrev, this._timeCurrent);
                 }
               }
             }
+
             break;
+
           case STATE.SCALE:
             if (this.enableZoom) {
               if (restart) {
+                //switch to zoom operation
                 this.dispatchEvent(_endEvent);
                 this.dispatchEvent(_startEvent);
                 this.updateTbState(opState, true);
+
                 this._startCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5);
+
                 this._currentCursorPosition.copy(this._startCursorPosition);
+
                 if (this.enableGrid) {
                   this.disposeGrid();
                 }
+
                 this.activateGizmos(false);
               } else {
-                const screenNotches = 8;
+                //continue with zoom operation
+                const screenNotches = 8; //how many wheel notches corresponds to a full screen pan
+
                 this._currentCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5);
+
                 const movement = this._currentCursorPosition.y - this._startCursorPosition.y;
                 let size = 1;
+
                 if (movement < 0) {
                   size = 1 / Math.pow(this.scaleFactor, -movement * screenNotches);
                 } else if (movement > 0) {
                   size = Math.pow(this.scaleFactor, movement * screenNotches);
                 }
+
                 this.applyTransformMatrix(this.applyScale(size, this._gizmos.position));
               }
             }
+
             break;
+
           case STATE.FOV:
-            if (this.enableZoom && ((_a = this.camera) == null ? void 0 : _a.type) === "PerspectiveCamera") {
+            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);
                 this.dispatchEvent(_startEvent);
                 this.updateTbState(opState, true);
+
                 this._startCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5);
+
                 this._currentCursorPosition.copy(this._startCursorPosition);
+
                 if (this.enableGrid) {
                   this.disposeGrid();
                 }
+
                 this.activateGizmos(false);
               } else {
-                const screenNotches = 8;
+                //continue with fov operation
+                const screenNotches = 8; //how many wheel notches corresponds to a full screen pan
+
                 this._currentCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5);
+
                 const movement = this._currentCursorPosition.y - this._startCursorPosition.y;
                 let size = 1;
+
                 if (movement < 0) {
                   size = 1 / Math.pow(this.scaleFactor, -movement * screenNotches);
                 } else if (movement > 0) {
                   size = Math.pow(this.scaleFactor, movement * screenNotches);
                 }
+
                 this._v3_1.setFromMatrixPosition(this._cameraMatrixState);
+
                 const x = this._v3_1.distanceTo(this._gizmos.position);
-                let xNew = x / size;
-                xNew = THREE.MathUtils.clamp(xNew, this.minDistance, this.maxDistance);
-                const y = x * Math.tan(THREE.MathUtils.DEG2RAD * this._fovState * 0.5);
-                let newFov = THREE.MathUtils.RAD2DEG * (Math.atan(y / xNew) * 2);
-                newFov = THREE.MathUtils.clamp(newFov, this.minFov, this.maxFov);
-                const newDistance = y / Math.tan(THREE.MathUtils.DEG2RAD * (newFov / 2));
+
+                let xNew = x / size; //distance between camera and gizmos if scale(size, scalepoint) would be performed
+                //check min and max distance
+
+                xNew = MathUtils.clamp(xNew, this.minDistance, this.maxDistance);
+                const y = x * Math.tan(MathUtils.DEG2RAD * this._fovState * 0.5); //calculate new fov
+
+                let newFov = MathUtils.RAD2DEG * (Math.atan(y / xNew) * 2); //check min and max fov
+
+                newFov = MathUtils.clamp(newFov, this.minFov, this.maxFov);
+                const newDistance = y / Math.tan(MathUtils.DEG2RAD * (newFov / 2));
                 size = x / newDistance;
+
                 this._v3_2.setFromMatrixPosition(this._gizmoMatrixState);
+
                 this.setFov(newFov);
-                this.applyTransformMatrix(this.applyScale(size, this._v3_2, false));
+                this.applyTransformMatrix(this.applyScale(size, this._v3_2, false)); //adjusting distance
+
                 const direction = this._gizmos.position.clone().sub(this.camera.position).normalize().multiplyScalar(newDistance / x);
+
                 this._m4_1.makeTranslation(direction.x, direction.y, direction.z);
               }
             }
+
             break;
         }
+
         this.dispatchEvent(_changeEvent);
       }
-    };
-    this.onSinglePanEnd = () => {
+    });
+
+    _defineProperty(this, "onSinglePanEnd", () => {
       if (this._state == STATE.ROTATE) {
         if (!this.enableRotate) {
           return;
         }
+
         if (this.enableAnimations) {
+          //perform rotation animation
           const deltaTime = performance.now() - this._timeCurrent;
+
           if (deltaTime < 120) {
             const w = Math.abs((this._wPrev + this._wCurr) / 2);
             const self = this;
-            this._animationId = window.requestAnimationFrame(function(t) {
+            this._animationId = window.requestAnimationFrame(function (t) {
               self.updateTbState(STATE.ANIMATION_ROTATE, true);
               const rotationAxis = self.calculateRotationAxis(self._cursorPosPrev, self._cursorPosCurr);
               self.onRotationAnim(t, rotationAxis, Math.min(w, self.wMax));
             });
           } else {
+            //cursor has been standing still for over 120 ms since last movement
             this.updateTbState(STATE.IDLE, false);
             this.activateGizmos(false);
             this.dispatchEvent(_changeEvent);
@@ -589,26 +968,33 @@ class ArcballControls extends THREE.EventDispatcher {
         }
       } else if (this._state == STATE.PAN || this._state == STATE.IDLE) {
         this.updateTbState(STATE.IDLE, false);
+
         if (this.enableGrid) {
           this.disposeGrid();
         }
+
         this.activateGizmos(false);
         this.dispatchEvent(_changeEvent);
       }
+
       this.dispatchEvent(_endEvent);
-    };
-    this.onDoubleTap = (event) => {
+    });
+
+    _defineProperty(this, "onDoubleTap", event => {
       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 && this.enableAnimations) {
           const self = this;
+
           if (this._animationId != -1) {
             window.cancelAnimationFrame(this._animationId);
           }
+
           this._timeStart = -1;
-          this._animationId = window.requestAnimationFrame(function(t) {
+          this._animationId = window.requestAnimationFrame(function (t) {
             self.updateTbState(STATE.ANIMATION_FOCUS, true);
             self.onFocusAnim(t, hitP, self._cameraMatrixState, self._gizmoMatrixState);
           });
@@ -619,90 +1005,106 @@ class ArcballControls extends THREE.EventDispatcher {
           this.dispatchEvent(_changeEvent);
         }
       }
+
       this.dispatchEvent(_endEvent);
-    };
-    this.onDoublePanStart = () => {
+    });
+
+    _defineProperty(this, "onDoublePanStart", () => {
       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
-        );
+        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);
-        if (rayDir !== void 0) {
+
+        if (rayDir !== undefined) {
           this._startCursorPosition.copy(rayDir);
         }
+
         this._currentCursorPosition.copy(this._startCursorPosition);
+
         this.activateGizmos(false);
       }
-    };
-    this.onDoublePanMove = () => {
+    });
+
+    _defineProperty(this, "onDoublePanMove", () => {
       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
-        );
+        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) {
           this.updateTbState(STATE.PAN, true);
+
           this._startCursorPosition.copy(this._currentCursorPosition);
         }
+
         const rayDir = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement, true);
-        if (rayDir !== void 0)
-          this._currentCursorPosition.copy(rayDir);
+        if (rayDir !== undefined) this._currentCursorPosition.copy(rayDir);
         this.applyTransformMatrix(this.pan(this._startCursorPosition, this._currentCursorPosition, true));
         this.dispatchEvent(_changeEvent);
       }
-    };
-    this.onDoublePanEnd = () => {
+    });
+
+    _defineProperty(this, "onDoublePanEnd", () => {
       this.updateTbState(STATE.IDLE, false);
       this.dispatchEvent(_endEvent);
-    };
-    this.onRotateStart = () => {
-      var _a;
+    });
+
+    _defineProperty(this, "onRotateStart", () => {
       if (this.enabled && this.enableRotate) {
+        var _this$camera6;
+
         this.dispatchEvent(_startEvent);
-        this.updateTbState(STATE.ZROTATE, true);
+        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;
-        (_a = this.camera) == null ? void 0 : _a.getWorldDirection(this._rotationAxis);
+        (_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);
         }
       }
-    };
-    this.onRotateMove = () => {
-      var _a;
+    });
+
+    _defineProperty(this, "onRotateMove", () => {
       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
-        );
+        this.setCenter((this._touchCurrent[0].clientX + this._touchCurrent[1].clientX) / 2, (this._touchCurrent[0].clientY + this._touchCurrent[1].clientY) / 2);
         let rotationPoint;
+
         if (this._state != STATE.ZROTATE) {
           this.updateTbState(STATE.ZROTATE, true);
           this._startFingerRotation = this._currentFingerRotation;
-        }
+        } //this._currentFingerRotation = event.rotation;
+
+
         this._currentFingerRotation = this.getAngle(this._touchCurrent[1], this._touchCurrent[0]) + this.getAngle(this._touchStart[1], this._touchStart[0]);
+
         if (!this.enablePan) {
-          rotationPoint = new THREE.Vector3().setFromMatrixPosition(this._gizmoMatrixState);
+          rotationPoint = new Vector3().setFromMatrixPosition(this._gizmoMatrixState);
         } else if (this.camera) {
+          var _this$unprojectOnTbPl3;
+
           this._v3_2.setFromMatrixPosition(this._gizmoMatrixState);
-          rotationPoint = (_a = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement)) == null ? void 0 : _a.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 = THREE.MathUtils.DEG2RAD * (this._startFingerRotation - this._currentFingerRotation);
-        if (rotationPoint !== void 0) {
+
+        const amount = MathUtils.DEG2RAD * (this._startFingerRotation - this._currentFingerRotation);
+
+        if (rotationPoint !== undefined) {
           this.applyTransformMatrix(this.zRotate(rotationPoint, amount));
         }
+
         this.dispatchEvent(_changeEvent);
       }
-    };
-    this.onRotateEnd = () => {
+    });
+
+    _defineProperty(this, "onRotateEnd", () => {
       this.updateTbState(STATE.IDLE, false);
       this.activateGizmos(false);
       this.dispatchEvent(_endEvent);
-    };
-    this.onPinchStart = () => {
+    });
+
+    _defineProperty(this, "onPinchStart", () => {
       if (this.enabled && this.enableZoom) {
         this.dispatchEvent(_startEvent);
         this.updateTbState(STATE.SCALE, true);
@@ -710,407 +1112,583 @@ class ArcballControls extends THREE.EventDispatcher {
         this._currentFingerDistance = this._startFingerDistance;
         this.activateGizmos(false);
       }
-    };
-    this.onPinchMove = () => {
-      var _a, _b, _c, _d;
+    });
+
+    _defineProperty(this, "onPinchMove", () => {
       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;
+        this.setCenter((this._touchCurrent[0].clientX + this._touchCurrent[1].clientX) / 2, (this._touchCurrent[0].clientY + this._touchCurrent[1].clientY) / 2);
+        const minDistance = 12; //minimum distance between fingers (in css pixels)
+
         if (this._state != STATE.SCALE) {
           this._startFingerDistance = this._currentFingerDistance;
           this.updateTbState(STATE.SCALE, true);
         }
-        this._currentFingerDistance = Math.max(
-          this.calculatePointersDistance(this._touchCurrent[0], this._touchCurrent[1]),
-          minDistance * this._devPxRatio
-        );
+
+        this._currentFingerDistance = Math.max(this.calculatePointersDistance(this._touchCurrent[0], this._touchCurrent[1]), minDistance * this._devPxRatio);
         const amount = this._currentFingerDistance / this._startFingerDistance;
         let scalePoint;
+
         if (!this.enablePan) {
           scalePoint = this._gizmos.position;
         } else {
-          if (((_a = this.camera) == null ? void 0 : _a.type) === "OrthographicCamera") {
-            scalePoint = (_b = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement)) == null ? void 0 : _b.applyQuaternion(this.camera.quaternion).multiplyScalar(1 / this.camera.zoom).add(this._gizmos.position);
-          } else if (((_c = this.camera) == null ? void 0 : _c.type) === "PerspectiveCamera") {
-            scalePoint = (_d = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement)) == null ? void 0 : _d.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);
           }
         }
-        if (scalePoint !== void 0) {
+
+        if (scalePoint !== undefined) {
           this.applyTransformMatrix(this.applyScale(amount, scalePoint));
         }
+
         this.dispatchEvent(_changeEvent);
       }
-    };
-    this.onPinchEnd = () => {
+    });
+
+    _defineProperty(this, "onPinchEnd", () => {
       this.updateTbState(STATE.IDLE, false);
       this.dispatchEvent(_endEvent);
-    };
-    this.onTriplePanStart = () => {
+    });
+
+    _defineProperty(this, "onTriplePanStart", () => {
       if (this.enabled && this.enableZoom && this.domElement) {
         this.dispatchEvent(_startEvent);
-        this.updateTbState(STATE.SCALE, true);
+        this.updateTbState(STATE.SCALE, true); //const center = event.center;
+
         let clientX = 0;
         let clientY = 0;
         const nFingers = this._touchCurrent.length;
+
         for (let i = 0; i < nFingers; i++) {
           clientX += this._touchCurrent[i].clientX;
           clientY += this._touchCurrent[i].clientY;
         }
+
         this.setCenter(clientX / nFingers, clientY / nFingers);
+
         this._startCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5);
+
         this._currentCursorPosition.copy(this._startCursorPosition);
       }
-    };
-    this.onTriplePanMove = () => {
+    });
+
+    _defineProperty(this, "onTriplePanMove", () => {
       if (this.enabled && this.enableZoom && this.camera && this.domElement) {
+        //	  fov / 2
+        //		|\
+        //		| \
+        //		|  \
+        //	x	|	\
+        //		| 	 \
+        //		| 	  \
+        //		| _ _ _\
+        //			y
+        //const center = event.center;
         let clientX = 0;
         let clientY = 0;
         const nFingers = this._touchCurrent.length;
+
         for (let i = 0; i < nFingers; i++) {
           clientX += this._touchCurrent[i].clientX;
           clientY += this._touchCurrent[i].clientY;
         }
+
         this.setCenter(clientX / nFingers, clientY / nFingers);
-        const screenNotches = 8;
+        const screenNotches = 8; //how many wheel notches corresponds to a full screen pan
+
         this._currentCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5);
+
         const movement = this._currentCursorPosition.y - this._startCursorPosition.y;
         let size = 1;
+
         if (movement < 0) {
           size = 1 / Math.pow(this.scaleFactor, -movement * screenNotches);
         } else if (movement > 0) {
           size = Math.pow(this.scaleFactor, movement * screenNotches);
         }
+
         this._v3_1.setFromMatrixPosition(this._cameraMatrixState);
+
         const x = this._v3_1.distanceTo(this._gizmos.position);
-        let xNew = x / size;
-        xNew = THREE.MathUtils.clamp(xNew, this.minDistance, this.maxDistance);
-        const y = x * Math.tan(THREE.MathUtils.DEG2RAD * this._fovState * 0.5);
-        let newFov = THREE.MathUtils.RAD2DEG * (Math.atan(y / xNew) * 2);
-        newFov = THREE.MathUtils.clamp(newFov, this.minFov, this.maxFov);
-        const newDistance = y / Math.tan(THREE.MathUtils.DEG2RAD * (newFov / 2));
+
+        let xNew = x / size; //distance between camera and gizmos if scale(size, scalepoint) would be performed
+        //check min and max distance
+
+        xNew = MathUtils.clamp(xNew, this.minDistance, this.maxDistance);
+        const y = x * Math.tan(MathUtils.DEG2RAD * this._fovState * 0.5); //calculate new fov
+
+        let newFov = MathUtils.RAD2DEG * (Math.atan(y / xNew) * 2); //check min and max fov
+
+        newFov = MathUtils.clamp(newFov, this.minFov, this.maxFov);
+        const newDistance = y / Math.tan(MathUtils.DEG2RAD * (newFov / 2));
         size = x / newDistance;
+
         this._v3_2.setFromMatrixPosition(this._gizmoMatrixState);
+
         this.setFov(newFov);
-        this.applyTransformMatrix(this.applyScale(size, this._v3_2, false));
+        this.applyTransformMatrix(this.applyScale(size, this._v3_2, false)); //adjusting distance
+
         const direction = this._gizmos.position.clone().sub(this.camera.position).normalize().multiplyScalar(newDistance / x);
+
         this._m4_1.makeTranslation(direction.x, direction.y, direction.z);
+
         this.dispatchEvent(_changeEvent);
       }
-    };
-    this.onTriplePanEnd = () => {
+    });
+
+    _defineProperty(this, "onTriplePanEnd", () => {
       this.updateTbState(STATE.IDLE, false);
-      this.dispatchEvent(_endEvent);
-    };
-    this.setCenter = (clientX, clientY) => {
+      this.dispatchEvent(_endEvent); //this.dispatchEvent( _changeEvent );
+    });
+
+    _defineProperty(this, "setCenter", (clientX, clientY) => {
       _center.x = clientX;
       _center.y = clientY;
-    };
-    this.initializeMouseActions = () => {
-      this.setMouseAction("PAN", 0, "CTRL");
-      this.setMouseAction("PAN", 2);
-      this.setMouseAction("ROTATE", 0);
-      this.setMouseAction("ZOOM", "WHEEL");
-      this.setMouseAction("ZOOM", 1);
-      this.setMouseAction("FOV", "WHEEL", "SHIFT");
-      this.setMouseAction("FOV", 1, "SHIFT");
-    };
-    this.setMouseAction = (operation, mouse, key = null) => {
-      const operationInput = ["PAN", "ROTATE", "ZOOM", "FOV"];
-      const mouseInput = [0, 1, 2, "WHEEL"];
-      const keyInput = ["CTRL", "SHIFT", null];
+    });
+
+    _defineProperty(this, "initializeMouseActions", () => {
+      this.setMouseAction('PAN', 0, 'CTRL');
+      this.setMouseAction('PAN', 2);
+      this.setMouseAction('ROTATE', 0);
+      this.setMouseAction('ZOOM', 'WHEEL');
+      this.setMouseAction('ZOOM', 1);
+      this.setMouseAction('FOV', 'WHEEL', 'SHIFT');
+      this.setMouseAction('FOV', 1, 'SHIFT');
+    });
+
+    _defineProperty(this, "setMouseAction", (operation, mouse, key = null) => {
+      const operationInput = ['PAN', 'ROTATE', 'ZOOM', 'FOV'];
+      const mouseInput = [0, 1, 2, 'WHEEL'];
+      const keyInput = ['CTRL', 'SHIFT', null];
       let state;
+
       if (!operationInput.includes(operation) || !mouseInput.includes(mouse) || !keyInput.includes(key)) {
+        //invalid parameters
         return false;
       }
-      if (mouse == "WHEEL") {
-        if (operation != "ZOOM" && operation != "FOV") {
+
+      if (mouse == 'WHEEL') {
+        if (operation != 'ZOOM' && operation != 'FOV') {
+          //cannot associate 2D operation to 1D input
           return false;
         }
       }
+
       switch (operation) {
-        case "PAN":
+        case 'PAN':
           state = STATE.PAN;
           break;
-        case "ROTATE":
+
+        case 'ROTATE':
           state = STATE.ROTATE;
           break;
-        case "ZOOM":
+
+        case 'ZOOM':
           state = STATE.SCALE;
           break;
-        case "FOV":
+
+        case 'FOV':
           state = STATE.FOV;
           break;
       }
+
       const action = {
-        operation,
-        mouse,
-        key,
-        state
+        operation: operation,
+        mouse: mouse,
+        key: key,
+        state: state
       };
+
       for (let i = 0; i < this.mouseActions.length; i++) {
         if (this.mouseActions[i].mouse == action.mouse && this.mouseActions[i].key == action.key) {
           this.mouseActions.splice(i, 1, action);
           return true;
         }
       }
+
       this.mouseActions.push(action);
       return true;
-    };
-    this.getOpFromAction = (mouse, key) => {
+    });
+
+    _defineProperty(this, "getOpFromAction", (mouse, key) => {
       let action;
+
       for (let i = 0; i < this.mouseActions.length; i++) {
         action = this.mouseActions[i];
+
         if (action.mouse == mouse && action.key == key) {
           return action.operation;
         }
       }
+
       if (key) {
         for (let i = 0; i < this.mouseActions.length; i++) {
           action = this.mouseActions[i];
+
           if (action.mouse == mouse && action.key == null) {
             return action.operation;
           }
         }
       }
+
       return null;
-    };
-    this.getOpStateFromAction = (mouse, key) => {
+    });
+
+    _defineProperty(this, "getOpStateFromAction", (mouse, key) => {
       let action;
+
       for (let i = 0; i < this.mouseActions.length; i++) {
         action = this.mouseActions[i];
+
         if (action.mouse == mouse && action.key == key) {
           return action.state;
         }
       }
+
       if (key) {
         for (let i = 0; i < this.mouseActions.length; i++) {
           action = this.mouseActions[i];
+
           if (action.mouse == mouse && action.key == null) {
             return action.state;
           }
         }
       }
+
       return null;
-    };
-    this.getAngle = (p1, p2) => {
+    });
+
+    _defineProperty(this, "getAngle", (p1, p2) => {
       return Math.atan2(p2.clientY - p1.clientY, p2.clientX - p1.clientX) * 180 / Math.PI;
-    };
-    this.updateTouchEvent = (event) => {
+    });
+
+    _defineProperty(this, "updateTouchEvent", event => {
       for (let i = 0; i < this._touchCurrent.length; i++) {
         if (this._touchCurrent[i].pointerId == event.pointerId) {
           this._touchCurrent.splice(i, 1, event);
+
           break;
         }
       }
-    };
-    this.calculateAngularSpeed = (p0, p1, t0, t1) => {
+    });
+
+    _defineProperty(this, "calculateAngularSpeed", (p0, p1, t0, t1) => {
       const s = p1 - p0;
-      const t = (t1 - t0) / 1e3;
+      const t = (t1 - t0) / 1000;
+
       if (t == 0) {
         return 0;
       }
+
       return s / t;
-    };
-    this.calculatePointersDistance = (p0, p1) => {
+    });
+
+    _defineProperty(this, "calculatePointersDistance", (p0, p1) => {
       return Math.sqrt(Math.pow(p1.clientX - p0.clientX, 2) + Math.pow(p1.clientY - p0.clientY, 2));
-    };
-    this.calculateRotationAxis = (vec1, vec2) => {
+    });
+
+    _defineProperty(this, "calculateRotationAxis", (vec1, vec2) => {
       this._rotationMatrix.extractRotation(this._cameraMatrixState);
+
       this._quat.setFromRotationMatrix(this._rotationMatrix);
+
       this._rotationAxis.crossVectors(vec1, vec2).applyQuaternion(this._quat);
+
       return this._rotationAxis.normalize().clone();
-    };
-    this.calculateTbRadius = (camera2) => {
+    });
+
+    _defineProperty(this, "calculateTbRadius", camera => {
       const factor = 0.67;
-      const distance = camera2.position.distanceTo(this._gizmos.position);
-      if (camera2.type == "PerspectiveCamera") {
-        const halfFovV = THREE.MathUtils.DEG2RAD * camera2.fov * 0.5;
-        const halfFovH = Math.atan(camera2.aspect * Math.tan(halfFovV));
+      const distance = camera.position.distanceTo(this._gizmos.position);
+
+      if (camera.type == 'PerspectiveCamera') {
+        const halfFovV = MathUtils.DEG2RAD * camera.fov * 0.5; //vertical fov/2 in radians
+
+        const halfFovH = Math.atan(camera.aspect * Math.tan(halfFovV)); //horizontal fov/2 in radians
+
         return Math.tan(Math.min(halfFovV, halfFovH)) * distance * factor;
-      } else if (camera2.type == "OrthographicCamera") {
-        return Math.min(camera2.top, camera2.right) * factor;
+      } else if (camera.type == 'OrthographicCamera') {
+        return Math.min(camera.top, camera.right) * factor;
       }
-    };
-    this.focus = (point, size, amount = 1) => {
+    });
+
+    _defineProperty(this, "focus", (point, size, amount = 1) => {
       if (this.camera) {
-        const focusPoint = point.clone();
+        const focusPoint = point.clone(); //move center of camera (along with gizmos) towards point of interest
+
         focusPoint.sub(this._gizmos.position).multiplyScalar(amount);
+
         this._translationMatrix.makeTranslation(focusPoint.x, focusPoint.y, focusPoint.z);
+
         const gizmoStateTemp = this._gizmoMatrixState.clone();
+
         this._gizmoMatrixState.premultiply(this._translationMatrix);
+
         this._gizmoMatrixState.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale);
+
         const cameraStateTemp = this._cameraMatrixState.clone();
+
         this._cameraMatrixState.premultiply(this._translationMatrix);
-        this._cameraMatrixState.decompose(this.camera.position, this.camera.quaternion, this.camera.scale);
+
+        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));
         }
+
         this._gizmoMatrixState.copy(gizmoStateTemp);
+
         this._cameraMatrixState.copy(cameraStateTemp);
       }
-    };
-    this.drawGrid = () => {
-      var _a, _b;
+    });
+
+    _defineProperty(this, "drawGrid", () => {
       if (this.scene) {
-        const color = 8947848;
+        var _this$camera9, _this$camera10;
+
+        const color = 0x888888;
         const multiplier = 3;
         let size, divisions, maxLength, tick;
-        if (((_a = this.camera) == null ? void 0 : _a.type) === "OrthographicCamera") {
+
+        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 (((_b = this.camera) == null ? void 0 : _b.type) === "PerspectiveCamera") {
+        } 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 = THREE.MathUtils.DEG2RAD * this.camera.fov * 0.5;
+          const halfFovV = MathUtils.DEG2RAD * this.camera.fov * 0.5;
           const halfFovH = Math.atan(this.camera.aspect * Math.tan(halfFovV));
           maxLength = Math.tan(Math.max(halfFovV, halfFovH)) * distance * 2;
           tick = maxLength / 20;
           size = maxLength * multiplier;
           divisions = size / tick;
         }
+
         if (this._grid == null && this.camera) {
-          this._grid = new THREE.GridHelper(size, divisions, color, color);
+          this._grid = new GridHelper(size, divisions, color, color);
+
           this._grid.position.copy(this._gizmos.position);
+
           this._gridPosition.copy(this._grid.position);
+
           this._grid.quaternion.copy(this.camera.quaternion);
+
           this._grid.rotateX(Math.PI * 0.5);
+
           this.scene.add(this._grid);
         }
       }
-    };
-    this.connect = (domElement2) => {
-      if (domElement2 === document) {
-        console.error(
-          'THREE.ArcballControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.'
-        );
-      }
-      this.domElement = domElement2;
-      this.domElement.style.touchAction = "none";
-      this.domElement.addEventListener("contextmenu", this.onContextMenu);
-      this.domElement.addEventListener("pointerdown", this.onPointerDown);
-      this.domElement.addEventListener("pointercancel", this.onPointerCancel);
-      this.domElement.addEventListener("wheel", this.onWheel);
-    };
-    this.dispose = () => {
-      var _a, _b, _c, _d, _e;
+    });
+
+    _defineProperty(this, "connect", 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('pointerdown', this.onPointerDown);
+      this.domElement.addEventListener('pointercancel', this.onPointerCancel);
+      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);
       }
-      (_a = this.domElement) == null ? void 0 : _a.removeEventListener("pointerdown", this.onPointerDown);
-      (_b = this.domElement) == null ? void 0 : _b.removeEventListener("pointercancel", this.onPointerCancel);
-      (_c = this.domElement) == null ? void 0 : _c.removeEventListener("wheel", this.onWheel);
-      (_d = this.domElement) == null ? void 0 : _d.removeEventListener("contextmenu", this.onContextMenu);
-      window.removeEventListener("pointermove", this.onPointerMove);
-      window.removeEventListener("pointerup", this.onPointerUp);
-      window.removeEventListener("resize", this.onWindowResize);
-      (_e = this.scene) == null ? void 0 : _e.remove(this._gizmos);
+
+      (_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);
+      (_this$scene = this.scene) === null || _this$scene === void 0 ? void 0 : _this$scene.remove(this._gizmos);
       this.disposeGrid();
-    };
-    this.disposeGrid = () => {
+    });
+
+    _defineProperty(this, "disposeGrid", () => {
       if (this._grid && this.scene) {
         this.scene.remove(this._grid);
         this._grid = null;
       }
-    };
-    this.easeOutCubic = (t) => {
+    });
+
+    _defineProperty(this, "easeOutCubic", t => {
       return 1 - Math.pow(1 - t, 3);
-    };
-    this.activateGizmos = (isActive) => {
+    });
+
+    _defineProperty(this, "activateGizmos", isActive => {
       for (const gizmo of this._gizmos.children) {
-        ;
-        gizmo.material.setValues({ opacity: isActive ? 1 : 0.6 });
+        gizmo.material.setValues({
+          opacity: isActive ? 1 : 0.6
+        });
       }
-    };
-    this.getCursorNDC = (cursorX, cursorY, canvas) => {
+    });
+
+    _defineProperty(this, "getCursorNDC", (cursorX, cursorY, canvas) => {
       const canvasRect = canvas.getBoundingClientRect();
+
       this._v2_1.setX((cursorX - canvasRect.left) / canvasRect.width * 2 - 1);
+
       this._v2_1.setY((canvasRect.bottom - cursorY) / canvasRect.height * 2 - 1);
+
       return this._v2_1.clone();
-    };
-    this.getCursorPosition = (cursorX, cursorY, canvas) => {
-      var _a;
+    });
+
+    _defineProperty(this, "getCursorPosition", (cursorX, cursorY, canvas) => {
+      var _this$camera11;
+
       this._v2_1.copy(this.getCursorNDC(cursorX, cursorY, canvas));
-      if (((_a = this.camera) == null ? void 0 : _a.type) === "OrthographicCamera") {
+
+      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();
-    };
-    this.setCamera = (camera2) => {
-      if (camera2) {
-        camera2.lookAt(this.target);
-        camera2.updateMatrix();
-        if ((camera2 == null ? void 0 : camera2.type) == "PerspectiveCamera") {
-          this._fov0 = camera2.fov;
-          this._fovState = camera2.fov;
-        }
-        this._cameraMatrixState0.copy(camera2.matrix);
+    });
+
+    _defineProperty(this, "setCamera", camera => {
+      if (camera) {
+        camera.lookAt(this.target);
+        camera.updateMatrix(); //setting state
+
+        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._cameraProjectionState.copy(camera2.projectionMatrix);
-        this._zoom0 = camera2.zoom;
+
+        this._cameraProjectionState.copy(camera.projectionMatrix);
+
+        this._zoom0 = camera.zoom;
         this._zoomState = this._zoom0;
-        this._initialNear = camera2.near;
-        this._nearPos0 = camera2.position.distanceTo(this.target) - camera2.near;
+        this._initialNear = camera.near;
+        this._nearPos0 = camera.position.distanceTo(this.target) - camera.near;
         this._nearPos = this._initialNear;
-        this._initialFar = camera2.far;
-        this._farPos0 = camera2.position.distanceTo(this.target) - camera2.far;
+        this._initialFar = camera.far;
+        this._farPos0 = camera.position.distanceTo(this.target) - camera.far;
         this._farPos = this._initialFar;
-        this._up0.copy(camera2.up);
-        this._upState.copy(camera2.up);
-        this.camera = camera2;
-        this.camera.updateProjectionMatrix();
-        const tbRadius = this.calculateTbRadius(camera2);
-        if (tbRadius !== void 0) {
+
+        this._up0.copy(camera.up);
+
+        this._upState.copy(camera.up);
+
+        this.camera = camera;
+        this.camera.updateProjectionMatrix(); //making gizmos
+
+        const tbRadius = this.calculateTbRadius(camera);
+
+        if (tbRadius !== undefined) {
           this._tbRadius = tbRadius;
         }
+
         this.makeGizmos(this.target, this._tbRadius);
       }
-    };
-    this.makeGizmos = (tbCenter, tbRadius) => {
-      const curve = new THREE.EllipseCurve(0, 0, tbRadius, tbRadius);
-      const points = curve.getPoints(this._curvePts);
-      const curveGeometry = new THREE.BufferGeometry().setFromPoints(points);
-      const curveMaterialX = new THREE.LineBasicMaterial({ color: 16744576, fog: false, transparent: true, opacity: 0.6 });
-      const curveMaterialY = new THREE.LineBasicMaterial({ color: 8454016, fog: false, transparent: true, opacity: 0.6 });
-      const curveMaterialZ = new THREE.LineBasicMaterial({ color: 8421631, fog: false, transparent: true, opacity: 0.6 });
-      const gizmoX = new THREE.Line(curveGeometry, curveMaterialX);
-      const gizmoY = new THREE.Line(curveGeometry, curveMaterialY);
-      const gizmoZ = new THREE.Line(curveGeometry, curveMaterialZ);
+    });
+
+    _defineProperty(this, "makeGizmos", (tbCenter, tbRadius) => {
+      // @ts-expect-error
+      const curve = new EllipseCurve(0, 0, tbRadius, tbRadius);
+      const points = curve.getPoints(this._curvePts); //geometry
+
+      const curveGeometry = new BufferGeometry().setFromPoints(points); //material
+
+      const curveMaterialX = new LineBasicMaterial({
+        color: 0xff8080,
+        fog: false,
+        transparent: true,
+        opacity: 0.6
+      });
+      const curveMaterialY = new LineBasicMaterial({
+        color: 0x80ff80,
+        fog: false,
+        transparent: true,
+        opacity: 0.6
+      });
+      const curveMaterialZ = new LineBasicMaterial({
+        color: 0x8080ff,
+        fog: false,
+        transparent: true,
+        opacity: 0.6
+      }); //line
+
+      const gizmoX = new Line(curveGeometry, curveMaterialX);
+      const gizmoY = new Line(curveGeometry, curveMaterialY);
+      const gizmoZ = new Line(curveGeometry, curveMaterialZ);
       const rotation = Math.PI * 0.5;
       gizmoX.rotation.x = rotation;
-      gizmoY.rotation.y = rotation;
+      gizmoY.rotation.y = rotation; //setting state
+
       this._gizmoMatrixState0.identity().setPosition(tbCenter);
+
       this._gizmoMatrixState.copy(this._gizmoMatrixState0);
+
       if (this.camera && this.camera.zoom != 1) {
+        //adapt gizmos size to camera zoom
         const size = 1 / this.camera.zoom;
+
         this._scaleMatrix.makeScale(size, size, size);
+
         this._translationMatrix.makeTranslation(-tbCenter.x, -tbCenter.y, -tbCenter.z);
+
         this._gizmoMatrixState.premultiply(this._translationMatrix).premultiply(this._scaleMatrix);
+
         this._translationMatrix.makeTranslation(tbCenter.x, tbCenter.y, tbCenter.z);
+
         this._gizmoMatrixState.premultiply(this._translationMatrix);
       }
+
       this._gizmoMatrixState.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale);
+
       this._gizmos.clear();
+
       this._gizmos.add(gizmoX);
+
       this._gizmos.add(gizmoY);
+
       this._gizmos.add(gizmoZ);
-    };
-    this.onFocusAnim = (time, point, cameraMatrix, gizmoMatrix) => {
+    });
+
+    _defineProperty(this, "onFocusAnim", (time, point, cameraMatrix, gizmoMatrix) => {
       if (this._timeStart == -1) {
+        //animation start
         this._timeStart = time;
       }
+
       if (this._state == STATE.ANIMATION_FOCUS) {
         const deltaTime = time - this._timeStart;
         const animTime = deltaTime / this.focusAnimationTime;
+
         this._gizmoMatrixState.copy(gizmoMatrix);
+
         if (animTime >= 1) {
+          //animation end
           this._gizmoMatrixState.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale);
+
           this.focus(point, this.scaleFactor);
           this._timeStart = -1;
           this.updateTbState(STATE.IDLE, false);
@@ -1119,34 +1697,43 @@ class ArcballControls extends THREE.EventDispatcher {
         } else {
           const amount = this.easeOutCubic(animTime);
           const size = 1 - amount + this.scaleFactor * amount;
+
           this._gizmoMatrixState.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale);
+
           this.focus(point, size, amount);
           this.dispatchEvent(_changeEvent);
           const self = this;
-          this._animationId = window.requestAnimationFrame(function(t) {
+          this._animationId = window.requestAnimationFrame(function (t) {
             self.onFocusAnim(t, point, cameraMatrix, gizmoMatrix.clone());
           });
         }
       } else {
+        //interrupt animation
         this._animationId = -1;
         this._timeStart = -1;
       }
-    };
-    this.onRotationAnim = (time, rotationAxis, w0) => {
+    });
+
+    _defineProperty(this, "onRotationAnim", (time, rotationAxis, w0) => {
       if (this._timeStart == -1) {
+        //animation start
         this._anglePrev = 0;
         this._angleCurrent = 0;
         this._timeStart = time;
       }
+
       if (this._state == STATE.ANIMATION_ROTATE) {
-        const deltaTime = (time - this._timeStart) / 1e3;
+        //w = w0 + alpha * t
+        const deltaTime = (time - this._timeStart) / 1000;
         const w = w0 + -this.dampingFactor * deltaTime;
+
         if (w > 0) {
+          //tetha = 0.5 * alpha * t^2 + w0 * t + tetha0
           this._angleCurrent = 0.5 * -this.dampingFactor * Math.pow(deltaTime, 2) + w0 * deltaTime + 0;
           this.applyTransformMatrix(this.rotate(rotationAxis, this._angleCurrent));
           this.dispatchEvent(_changeEvent);
           const self = this;
-          this._animationId = window.requestAnimationFrame(function(t) {
+          this._animationId = window.requestAnimationFrame(function (t) {
             self.onRotationAnim(t, rotationAxis, w0);
           });
         } else {
@@ -1157,123 +1744,167 @@ class ArcballControls extends THREE.EventDispatcher {
           this.dispatchEvent(_changeEvent);
         }
       } else {
+        //interrupt animation
         this._animationId = -1;
         this._timeStart = -1;
+
         if (this._state != STATE.ROTATE) {
           this.activateGizmos(false);
           this.dispatchEvent(_changeEvent);
         }
       }
-    };
-    this.pan = (p0, p1, adjust = false) => {
+    });
+
+    _defineProperty(this, "pan", (p0, p1, adjust = false) => {
       if (this.camera) {
         const movement = p0.clone().sub(p1);
-        if (this.camera.type === "OrthographicCamera") {
+
+        if (this.camera.type === 'OrthographicCamera') {
+          //adjust movement amount
           movement.multiplyScalar(1 / this.camera.zoom);
         }
-        if (this.camera.type === "PerspectiveCamera" && adjust) {
-          this._v3_1.setFromMatrixPosition(this._cameraMatrixState0);
-          this._v3_2.setFromMatrixPosition(this._gizmoMatrixState0);
+
+        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
+
+
           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.setTransformationMatrices(this._m4_1, this._m4_1);
       }
+
       return _transformation;
-    };
-    this.reset = () => {
+    });
+
+    _defineProperty(this, "reset", () => {
       if (this.camera) {
         this.camera.zoom = this._zoom0;
-        if (this.camera.type === "PerspectiveCamera") {
+
+        if (this.camera.type === 'PerspectiveCamera') {
           this.camera.fov = this._fov0;
         }
+
         this.camera.near = this._nearPos;
         this.camera.far = this._farPos;
+
         this._cameraMatrixState.copy(this._cameraMatrixState0);
+
         this._cameraMatrixState.decompose(this.camera.position, this.camera.quaternion, this.camera.scale);
+
         this.camera.up.copy(this._up0);
         this.camera.updateMatrix();
         this.camera.updateProjectionMatrix();
+
         this._gizmoMatrixState.copy(this._gizmoMatrixState0);
+
         this._gizmoMatrixState0.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale);
+
         this._gizmos.updateMatrix();
+
         const tbRadius = this.calculateTbRadius(this.camera);
-        if (tbRadius !== void 0) {
+
+        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);
       }
-    };
-    this.rotate = (axis, angle) => {
-      const point = this._gizmos.position;
+    });
+
+    _defineProperty(this, "rotate", (axis, angle) => {
+      const point = this._gizmos.position; //rotation center
+
       this._translationMatrix.makeTranslation(-point.x, -point.y, -point.z);
-      this._rotationMatrix.makeRotationAxis(axis, -angle);
+
+      this._rotationMatrix.makeRotationAxis(axis, -angle); //rotate camera
+
+
       this._m4_1.makeTranslation(point.x, point.y, point.z);
+
       this._m4_1.multiply(this._rotationMatrix);
+
       this._m4_1.multiply(this._translationMatrix);
+
       this.setTransformationMatrices(this._m4_1);
       return _transformation;
-    };
-    this.copyState = () => {
-      var _a;
+    });
+
+    _defineProperty(this, "copyState", () => {
       if (this.camera) {
-        const state = JSON.stringify(
-          ((_a = this.camera) == null ? void 0 : _a.type) === "OrthographicCamera" ? {
-            arcballState: {
-              cameraFar: this.camera.far,
-              cameraMatrix: this.camera.matrix,
-              cameraNear: this.camera.near,
-              cameraUp: this.camera.up,
-              cameraZoom: this.camera.zoom,
-              gizmoMatrix: this._gizmos.matrix
-            }
-          } : {
-            arcballState: {
-              cameraFar: this.camera.far,
-              cameraFov: this.camera.fov,
-              cameraMatrix: this.camera.matrix,
-              cameraNear: this.camera.near,
-              cameraUp: this.camera.up,
-              cameraZoom: this.camera.zoom,
-              gizmoMatrix: this._gizmos.matrix
-            }
+        var _this$camera12;
+
+        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,
+            cameraNear: this.camera.near,
+            cameraUp: this.camera.up,
+            cameraZoom: this.camera.zoom,
+            gizmoMatrix: this._gizmos.matrix
           }
-        );
+        } : {
+          arcballState: {
+            cameraFar: this.camera.far,
+            cameraFov: this.camera.fov,
+            cameraMatrix: this.camera.matrix,
+            cameraNear: this.camera.near,
+            cameraUp: this.camera.up,
+            cameraZoom: this.camera.zoom,
+            gizmoMatrix: this._gizmos.matrix
+          }
+        });
         navigator.clipboard.writeText(state);
       }
-    };
-    this.pasteState = () => {
+    });
+
+    _defineProperty(this, "pasteState", () => {
       const self = this;
       navigator.clipboard.readText().then(function resolved(value) {
         self.setStateFromJSON(value);
       });
-    };
-    this.saveState = () => {
-      if (!this.camera)
-        return;
+    });
+
+    _defineProperty(this, "saveState", () => {
+      if (!this.camera) return;
+
       this._cameraMatrixState0.copy(this.camera.matrix);
+
       this._gizmoMatrixState0.copy(this._gizmos.matrix);
+
       this._nearPos = this.camera.near;
       this._farPos = this.camera.far;
       this._zoom0 = this.camera.zoom;
+
       this._up0.copy(this.camera.up);
-      if (this.camera.type === "PerspectiveCamera") {
+
+      if (this.camera.type === 'PerspectiveCamera') {
         this._fov0 = this.camera.fov;
       }
-    };
-    this.applyScale = (size, point, scaleGizmos = true) => {
-      if (!this.camera)
-        return;
+    });
+
+    _defineProperty(this, "applyScale", (size, point, scaleGizmos = true) => {
+      if (!this.camera) return;
       const scalePoint = point.clone();
       let sizeInverse = 1 / size;
-      if (this.camera.type === "OrthographicCamera") {
+
+      if (this.camera.type === 'OrthographicCamera') {
+        //camera zoom
         this.camera.zoom = this._zoomState;
-        this.camera.zoom *= size;
+        this.camera.zoom *= size; //check min and max zoom
+
         if (this.camera.zoom > this.maxZoom) {
           this.camera.zoom = this.maxZoom;
           sizeInverse = this._zoomState / this.maxZoom;
@@ -1281,26 +1912,46 @@ class ArcballControls extends THREE.EventDispatcher {
           this.camera.zoom = this.minZoom;
           sizeInverse = this._zoomState / this.minZoom;
         }
+
         this.camera.updateProjectionMatrix();
-        this._v3_1.setFromMatrixPosition(this._gizmoMatrixState);
+
+        this._v3_1.setFromMatrixPosition(this._gizmoMatrixState); //gizmos position
+        //scale gizmos so they appear in the same spot having the same dimension
+
+
         this._scaleMatrix.makeScale(sizeInverse, sizeInverse, sizeInverse);
+
         this._translationMatrix.makeTranslation(-this._v3_1.x, -this._v3_1.y, -this._v3_1.z);
+
         this._m4_2.makeTranslation(this._v3_1.x, this._v3_1.y, this._v3_1.z).multiply(this._scaleMatrix);
-        this._m4_2.multiply(this._translationMatrix);
+
+        this._m4_2.multiply(this._translationMatrix); //move camera and gizmos to obtain pinch effect
+
+
         scalePoint.sub(this._v3_1);
         const amount = scalePoint.clone().multiplyScalar(sizeInverse);
         scalePoint.sub(amount);
+
         this._m4_1.makeTranslation(scalePoint.x, scalePoint.y, scalePoint.z);
+
         this._m4_2.premultiply(this._m4_1);
+
         this.setTransformationMatrices(this._m4_1, this._m4_2);
         return _transformation;
       }
-      if (this.camera.type === "PerspectiveCamera") {
+
+      if (this.camera.type === 'PerspectiveCamera') {
         this._v3_1.setFromMatrixPosition(this._cameraMatrixState);
-        this._v3_2.setFromMatrixPosition(this._gizmoMatrixState);
+
+        this._v3_2.setFromMatrixPosition(this._gizmoMatrixState); //move camera
+
+
         let distance = this._v3_1.distanceTo(scalePoint);
-        let amount = distance - distance * sizeInverse;
+
+        let amount = distance - distance * sizeInverse; //check min and max distance
+
         const newDistance = distance - amount;
+
         if (newDistance < this.minDistance) {
           sizeInverse = this.minDistance / distance;
           amount = distance - distance * sizeInverse;
@@ -1308,152 +1959,270 @@ class ArcballControls extends THREE.EventDispatcher {
           sizeInverse = this.maxDistance / distance;
           amount = distance - distance * sizeInverse;
         }
+
         let direction = scalePoint.clone().sub(this._v3_1).normalize().multiplyScalar(amount);
+
         this._m4_1.makeTranslation(direction.x, direction.y, direction.z);
+
         if (scaleGizmos) {
+          //scale gizmos so they appear in the same spot having the same dimension
           const pos = this._v3_2;
           distance = pos.distanceTo(scalePoint);
           amount = distance - distance * sizeInverse;
           direction = scalePoint.clone().sub(this._v3_2).normalize().multiplyScalar(amount);
+
           this._translationMatrix.makeTranslation(pos.x, pos.y, pos.z);
+
           this._scaleMatrix.makeScale(sizeInverse, sizeInverse, sizeInverse);
+
           this._m4_2.makeTranslation(direction.x, direction.y, direction.z).multiply(this._translationMatrix);
+
           this._m4_2.multiply(this._scaleMatrix);
+
           this._translationMatrix.makeTranslation(-pos.x, -pos.y, -pos.z);
+
           this._m4_2.multiply(this._translationMatrix);
+
           this.setTransformationMatrices(this._m4_1, this._m4_2);
         } else {
           this.setTransformationMatrices(this._m4_1);
         }
+
         return _transformation;
       }
-    };
-    this.setFov = (value) => {
-      var _a;
-      if (((_a = this.camera) == null ? void 0 : _a.type) === "PerspectiveCamera") {
-        this.camera.fov = THREE.MathUtils.clamp(value, this.minFov, this.maxFov);
+    });
+
+    _defineProperty(this, "setFov", value => {
+      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();
       }
-    };
-    this.setTarget = (x, y, z) => {
+    });
+
+    _defineProperty(this, "setTarget", (x, y, z) => {
       if (this.camera) {
         this.target.set(x, y, z);
-        this._gizmos.position.set(x, y, z);
+
+        this._gizmos.position.set(x, y, z); //for correct radius calculation
+
+
         const tbRadius = this.calculateTbRadius(this.camera);
-        if (tbRadius !== void 0) {
+
+        if (tbRadius !== undefined) {
           this._tbRadius = tbRadius;
         }
+
         this.makeGizmos(this.target, this._tbRadius);
         this.camera.lookAt(this.target);
       }
-    };
-    this.zRotate = (point, angle) => {
+    });
+
+    _defineProperty(this, "zRotate", (point, angle) => {
       this._rotationMatrix.makeRotationAxis(this._rotationAxis, angle);
+
       this._translationMatrix.makeTranslation(-point.x, -point.y, -point.z);
+
       this._m4_1.makeTranslation(point.x, point.y, point.z);
+
       this._m4_1.multiply(this._rotationMatrix);
+
       this._m4_1.multiply(this._translationMatrix);
-      this._v3_1.setFromMatrixPosition(this._gizmoMatrixState).sub(point);
-      this._v3_2.copy(this._v3_1).applyAxisAngle(this._rotationAxis, angle);
+
+      this._v3_1.setFromMatrixPosition(this._gizmoMatrixState).sub(point); //vector from rotation center to gizmos position
+
+
+      this._v3_2.copy(this._v3_1).applyAxisAngle(this._rotationAxis, angle); //apply rotation
+
+
       this._v3_2.sub(this._v3_1);
+
       this._m4_2.makeTranslation(this._v3_2.x, this._v3_2.y, this._v3_2.z);
+
       this.setTransformationMatrices(this._m4_1, this._m4_2);
       return _transformation;
-    };
-    this.unprojectOnObj = (cursor, camera2) => {
-      if (!this.scene)
-        return null;
-      const raycaster = new THREE.Raycaster();
-      raycaster.near = camera2.near;
-      raycaster.far = camera2.far;
-      raycaster.setFromCamera(cursor, camera2);
+    });
+
+    _defineProperty(this, "unprojectOnObj", (cursor, camera) => {
+      if (!this.scene) return null;
+      const raycaster = new Raycaster();
+      raycaster.near = camera.near;
+      raycaster.far = camera.far;
+      raycaster.setFromCamera(cursor, camera);
       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) {
           return intersect[i].point.clone();
         }
       }
+
       return null;
-    };
-    this.unprojectOnTbSurface = (camera2, cursorX, cursorY, canvas, tbRadius) => {
-      if (camera2.type == "OrthographicCamera") {
+    });
+
+    _defineProperty(this, "unprojectOnTbSurface", (camera, cursorX, cursorY, canvas, tbRadius) => {
+      if (camera.type == 'OrthographicCamera') {
         this._v2_1.copy(this.getCursorPosition(cursorX, cursorY, canvas));
+
         this._v3_1.set(this._v2_1.x, this._v2_1.y, 0);
+
         const x2 = Math.pow(this._v2_1.x, 2);
         const y2 = Math.pow(this._v2_1.y, 2);
         const r2 = Math.pow(this._tbRadius, 2);
+
         if (x2 + y2 <= r2 * 0.5) {
+          //intersection with sphere
           this._v3_1.setZ(Math.sqrt(r2 - (x2 + y2)));
         } else {
+          //intersection with hyperboloid
           this._v3_1.setZ(r2 * 0.5 / Math.sqrt(x2 + y2));
         }
+
         return this._v3_1;
       }
-      if (camera2.type == "PerspectiveCamera") {
+
+      if (camera.type == 'PerspectiveCamera') {
+        //unproject cursor on the near plane
         this._v2_1.copy(this.getCursorNDC(cursorX, cursorY, canvas));
+
         this._v3_1.set(this._v2_1.x, this._v2_1.y, -1);
-        this._v3_1.applyMatrix4(camera2.projectionMatrixInverse);
-        const rayDir = this._v3_1.clone().normalize();
-        const cameraGizmoDistance = camera2.position.distanceTo(this._gizmos.position);
-        const radius2 = Math.pow(tbRadius, 2);
+
+        this._v3_1.applyMatrix4(camera.projectionMatrixInverse);
+
+        const rayDir = this._v3_1.clone().normalize(); //unprojected ray direction
+
+
+        const cameraGizmoDistance = camera.position.distanceTo(this._gizmos.position);
+        const radius2 = Math.pow(tbRadius, 2); //	  camera
+        //		|\
+        //		| \
+        //		|  \
+        //	h	|	\
+        //		| 	 \
+        //		| 	  \
+        //	_ _ | _ _ _\ _ _  near plane
+        //			l
+
         const h = this._v3_1.z;
         const l = Math.sqrt(Math.pow(this._v3_1.x, 2) + Math.pow(this._v3_1.y, 2));
+
         if (l == 0) {
+          //ray aligned with camera
           rayDir.set(this._v3_1.x, this._v3_1.y, tbRadius);
           return rayDir;
         }
+
         const m = h / l;
         const q = cameraGizmoDistance;
+        /*
+         * calculate intersection point between unprojected ray and trackball surface
+         *|y = m * x + q
+         *|x^2 + y^2 = r^2
+         *
+         * (m^2 + 1) * x^2 + (2 * m * q) * x + q^2 - r^2 = 0
+         */
+
         let a = Math.pow(m, 2) + 1;
         let b = 2 * m * q;
         let c = Math.pow(q, 2) - radius2;
         let delta = Math.pow(b, 2) - 4 * a * c;
+
         if (delta >= 0) {
+          //intersection with sphere
           this._v2_1.setX((-b - Math.sqrt(delta)) / (2 * a));
+
           this._v2_1.setY(m * this._v2_1.x + q);
-          const angle = THREE.MathUtils.RAD2DEG * this._v2_1.angle();
+
+          const angle = MathUtils.RAD2DEG * this._v2_1.angle();
+
           if (angle >= 45) {
-            const rayLength2 = Math.sqrt(Math.pow(this._v2_1.x, 2) + Math.pow(cameraGizmoDistance - this._v2_1.y, 2));
-            rayDir.multiplyScalar(rayLength2);
+            //if angle between intersection point and X' axis is >= 45°, return that point
+            //otherwise, calculate intersection point with hyperboloid
+            const rayLength = Math.sqrt(Math.pow(this._v2_1.x, 2) + Math.pow(cameraGizmoDistance - this._v2_1.y, 2));
+            rayDir.multiplyScalar(rayLength);
             rayDir.z += cameraGizmoDistance;
             return rayDir;
           }
-        }
+        } //intersection with hyperboloid
+
+        /*
+         *|y = m * x + q
+         *|y = (1 / x) * (r^2 / 2)
+         *
+         * m * x^2 + q * x - r^2 / 2 = 0
+         */
+
+
         a = m;
         b = q;
         c = -radius2 * 0.5;
         delta = Math.pow(b, 2) - 4 * a * c;
+
         this._v2_1.setX((-b - Math.sqrt(delta)) / (2 * a));
+
         this._v2_1.setY(m * this._v2_1.x + q);
+
         const rayLength = Math.sqrt(Math.pow(this._v2_1.x, 2) + Math.pow(cameraGizmoDistance - this._v2_1.y, 2));
         rayDir.multiplyScalar(rayLength);
         rayDir.z += cameraGizmoDistance;
         return rayDir;
       }
-    };
-    this.unprojectOnTbPlane = (camera2, cursorX, cursorY, canvas, initialDistance = false) => {
-      if (camera2.type == "OrthographicCamera") {
+    });
+
+    _defineProperty(this, "unprojectOnTbPlane", (camera, cursorX, cursorY, canvas, initialDistance = false) => {
+      if (camera.type == 'OrthographicCamera') {
         this._v2_1.copy(this.getCursorPosition(cursorX, cursorY, canvas));
+
         this._v3_1.set(this._v2_1.x, this._v2_1.y, 0);
+
         return this._v3_1.clone();
       }
-      if (camera2.type == "PerspectiveCamera") {
-        this._v2_1.copy(this.getCursorNDC(cursorX, cursorY, canvas));
+
+      if (camera.type == 'PerspectiveCamera') {
+        this._v2_1.copy(this.getCursorNDC(cursorX, cursorY, canvas)); //unproject cursor on the near plane
+
+
         this._v3_1.set(this._v2_1.x, this._v2_1.y, -1);
-        this._v3_1.applyMatrix4(camera2.projectionMatrixInverse);
-        const rayDir = this._v3_1.clone().normalize();
+
+        this._v3_1.applyMatrix4(camera.projectionMatrixInverse);
+
+        const rayDir = this._v3_1.clone().normalize(); //unprojected ray direction
+        //	  camera
+        //		|\
+        //		| \
+        //		|  \
+        //	h	|	\
+        //		| 	 \
+        //		| 	  \
+        //	_ _ | _ _ _\ _ _  near plane
+        //			l
+
+
         const h = this._v3_1.z;
         const l = Math.sqrt(Math.pow(this._v3_1.x, 2) + Math.pow(this._v3_1.y, 2));
         let cameraGizmoDistance;
+
         if (initialDistance) {
           cameraGizmoDistance = this._v3_1.setFromMatrixPosition(this._cameraMatrixState0).distanceTo(this._v3_2.setFromMatrixPosition(this._gizmoMatrixState0));
         } else {
-          cameraGizmoDistance = camera2.position.distanceTo(this._gizmos.position);
-        }
+          cameraGizmoDistance = camera.position.distanceTo(this._gizmos.position);
+        }
+        /*
+         * calculate intersection point between unprojected ray and the plane
+         *|y = mx + q
+         *|y = 0
+         *
+         * x = -q/m
+         */
+
+
         if (l == 0) {
+          //ray aligned with camera
           rayDir.set(0, 0, 0);
           return rayDir;
         }
+
         const m = h / l;
         const q = cameraGizmoDistance;
         const x = -q / m;
@@ -1462,179 +2231,259 @@ class ArcballControls extends THREE.EventDispatcher {
         rayDir.z = 0;
         return rayDir;
       }
-    };
-    this.updateMatrixState = () => {
-      if (!this.camera)
-        return;
+    });
+
+    _defineProperty(this, "updateMatrixState", () => {
+      if (!this.camera) return; //update camera and gizmos state
+
       this._cameraMatrixState.copy(this.camera.matrix);
+
       this._gizmoMatrixState.copy(this._gizmos.matrix);
-      if (this.camera.type === "OrthographicCamera") {
+
+      if (this.camera.type === 'OrthographicCamera') {
         this._cameraProjectionState.copy(this.camera.projectionMatrix);
+
         this.camera.updateProjectionMatrix();
         this._zoomState = this.camera.zoom;
       }
-      if (this.camera.type === "PerspectiveCamera") {
+
+      if (this.camera.type === 'PerspectiveCamera') {
         this._fovState = this.camera.fov;
       }
-    };
-    this.updateTbState = (newState, updateMatrices) => {
+    });
+
+    _defineProperty(this, "updateTbState", (newState, updateMatrices) => {
       this._state = newState;
+
       if (updateMatrices) {
         this.updateMatrixState();
       }
-    };
-    this.update = () => {
-      const EPS = 1e-6;
+    });
+
+    _defineProperty(this, "update", () => {
+      const EPS = 0.000001; // Update target and gizmos state
+
       if (!this.target.equals(this._currentTarget) && this.camera) {
-        this._gizmos.position.set(this.target.x, this.target.y, this.target.z);
+        this._gizmos.position.set(this.target.x, this.target.y, this.target.z); //for correct radius calculation
+
+
         const tbRadius = this.calculateTbRadius(this.camera);
-        if (tbRadius !== void 0) {
+
+        if (tbRadius !== undefined) {
           this._tbRadius = tbRadius;
         }
+
         this.makeGizmos(this.target, this._tbRadius);
+
         this._currentTarget.copy(this.target);
       }
-      if (!this.camera)
-        return;
-      if (this.camera.type === "OrthographicCamera") {
+
+      if (!this.camera) return; //check min/max parameters
+
+      if (this.camera.type === 'OrthographicCamera') {
+        //check zoom
         if (this.camera.zoom > this.maxZoom || this.camera.zoom < this.minZoom) {
-          const newZoom = THREE.MathUtils.clamp(this.camera.zoom, this.minZoom, this.maxZoom);
+          const newZoom = MathUtils.clamp(this.camera.zoom, this.minZoom, this.maxZoom);
           this.applyTransformMatrix(this.applyScale(newZoom / this.camera.zoom, this._gizmos.position, true));
         }
       }
-      if (this.camera.type === "PerspectiveCamera") {
+
+      if (this.camera.type === 'PerspectiveCamera') {
+        //check distance
         const distance = this.camera.position.distanceTo(this._gizmos.position);
+
         if (distance > this.maxDistance + EPS || distance < this.minDistance - EPS) {
-          const newDistance = THREE.MathUtils.clamp(distance, this.minDistance, this.maxDistance);
+          const newDistance = MathUtils.clamp(distance, this.minDistance, this.maxDistance);
           this.applyTransformMatrix(this.applyScale(newDistance / distance, this._gizmos.position));
           this.updateMatrixState();
-        }
+        } //check fov
+
+
         if (this.camera.fov < this.minFov || this.camera.fov > this.maxFov) {
-          this.camera.fov = THREE.MathUtils.clamp(this.camera.fov, this.minFov, this.maxFov);
+          this.camera.fov = MathUtils.clamp(this.camera.fov, this.minFov, this.maxFov);
           this.camera.updateProjectionMatrix();
         }
+
         const oldRadius = this._tbRadius;
         const tbRadius = this.calculateTbRadius(this.camera);
-        if (tbRadius !== void 0) {
+
+        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 curve = new THREE.EllipseCurve(0, 0, newRadius, newRadius);
+          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 THREE.BufferGeometry().setFromPoints(points);
+          const curveGeometry = new BufferGeometry().setFromPoints(points);
+
           for (const gizmo in this._gizmos.children) {
             const child = this._gizmos.children[gizmo];
             child.geometry = curveGeometry;
           }
         }
       }
+
       this.camera.lookAt(this._gizmos.position);
-    };
-    this.setStateFromJSON = (json) => {
+    });
+
+    _defineProperty(this, "setStateFromJSON", json => {
       const state = JSON.parse(json);
+
       if (state.arcballState && this.camera) {
         this._cameraMatrixState.fromArray(state.arcballState.cameraMatrix.elements);
+
         this._cameraMatrixState.decompose(this.camera.position, this.camera.quaternion, this.camera.scale);
+
         this.camera.up.copy(state.arcballState.cameraUp);
         this.camera.near = state.arcballState.cameraNear;
         this.camera.far = state.arcballState.cameraFar;
         this.camera.zoom = state.arcballState.cameraZoom;
-        if (this.camera.type === "PerspectiveCamera") {
+
+        if (this.camera.type === 'PerspectiveCamera') {
           this.camera.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._gizmos.updateMatrix();
+
         const tbRadius = this.calculateTbRadius(this.camera);
-        if (tbRadius !== void 0) {
+
+        if (tbRadius !== undefined) {
           this._tbRadius = tbRadius;
         }
-        const gizmoTmp = new THREE.Matrix4().copy(this._gizmoMatrixState0);
+
+        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.updateTbState(STATE.IDLE, false);
         this.dispatchEvent(_changeEvent);
       }
-    };
+    });
+
     this.camera = null;
-    this.domElement = domElement;
+    this.domElement = _domElement;
     this.scene = scene;
     this.mouseActions = [];
-    this._mouseOp = null;
-    this._v2_1 = new THREE.Vector2();
-    this._v3_1 = new THREE.Vector3();
-    this._v3_2 = new THREE.Vector3();
-    this._m4_1 = new THREE.Matrix4();
-    this._m4_2 = new THREE.Matrix4();
-    this._quat = new THREE.Quaternion();
-    this._translationMatrix = new THREE.Matrix4();
-    this._rotationMatrix = new THREE.Matrix4();
-    this._scaleMatrix = new THREE.Matrix4();
-    this._rotationAxis = new THREE.Vector3();
-    this._cameraMatrixState = new THREE.Matrix4();
-    this._cameraProjectionState = new THREE.Matrix4();
+    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)
+
+    this._v2_1 = new Vector2();
+    this._v3_1 = new Vector3();
+    this._v3_2 = new Vector3();
+    this._m4_1 = new Matrix4();
+    this._m4_2 = new Matrix4();
+    this._quat = new Quaternion(); //transformation matrices
+
+    this._translationMatrix = new Matrix4(); //matrix for translation operation
+
+    this._rotationMatrix = new Matrix4(); //matrix for rotation operation
+
+    this._scaleMatrix = new Matrix4(); //matrix for scaling operation
+
+    this._rotationAxis = new Vector3(); //axis for rotate operation
+    //camera state
+
+    this._cameraMatrixState = new Matrix4();
+    this._cameraProjectionState = new Matrix4();
     this._fovState = 1;
-    this._upState = new THREE.Vector3();
+    this._upState = new Vector3();
     this._zoomState = 1;
     this._nearPos = 0;
     this._farPos = 0;
-    this._gizmoMatrixState = new THREE.Matrix4();
-    this._up0 = new THREE.Vector3();
+    this._gizmoMatrixState = new Matrix4(); //initial values
+
+    this._up0 = new Vector3();
     this._zoom0 = 1;
     this._fov0 = 0;
     this._initialNear = 0;
     this._nearPos0 = 0;
     this._initialFar = 0;
     this._farPos0 = 0;
-    this._cameraMatrixState0 = new THREE.Matrix4();
-    this._gizmoMatrixState0 = new THREE.Matrix4();
+    this._cameraMatrixState0 = new Matrix4();
+    this._gizmoMatrixState0 = new Matrix4(); //pointers array
+
     this._button = -1;
     this._touchStart = [];
     this._touchCurrent = [];
-    this._input = INPUT.NONE;
-    this._switchSensibility = 32;
-    this._startFingerDistance = 0;
+    this._input = INPUT.NONE; //two fingers touch interaction
+
+    this._switchSensibility = 32; //minimum movement to be performed to fire single pan start after the second finger has been released
+
+    this._startFingerDistance = 0; //distance between two fingers
+
     this._currentFingerDistance = 0;
-    this._startFingerRotation = 0;
-    this._currentFingerRotation = 0;
+    this._startFingerRotation = 0; //amount of rotation performed with two fingers
+
+    this._currentFingerRotation = 0; //double tap
+
     this._devPxRatio = 0;
     this._downValid = true;
     this._nclicks = 0;
     this._downEvents = [];
-    this._clickStart = 0;
+    this._clickStart = 0; //first click time
+
     this._maxDownTime = 250;
     this._maxInterval = 300;
     this._posThreshold = 24;
-    this._movementThreshold = 24;
-    this._currentCursorPosition = new THREE.Vector3();
-    this._startCursorPosition = new THREE.Vector3();
-    this._grid = null;
-    this._gridPosition = new THREE.Vector3();
-    this._gizmos = new THREE.Group();
-    this._curvePts = 128;
-    this._timeStart = -1;
-    this._animationId = -1;
-    this.focusAnimationTime = 500;
-    this._timePrev = 0;
-    this._timeCurrent = 0;
-    this._anglePrev = 0;
-    this._angleCurrent = 0;
-    this._cursorPosPrev = new THREE.Vector3();
-    this._cursorPosCurr = new THREE.Vector3();
-    this._wPrev = 0;
-    this._wCurr = 0;
+    this._movementThreshold = 24; //cursor positions
+
+    this._currentCursorPosition = new Vector3();
+    this._startCursorPosition = new Vector3(); //grid
+
+    this._grid = null; //grid to be visualized during pan operation
+
+    this._gridPosition = new Vector3(); //gizmos
+
+    this._gizmos = new Group();
+    this._curvePts = 128; //animations
+
+    this._timeStart = -1; //initial time
+
+    this._animationId = -1; //focus animation
+
+    this.focusAnimationTime = 500; //duration of focus animation in ms
+    //rotate animation
+
+    this._timePrev = 0; //time at which previous rotate operation has been detected
+
+    this._timeCurrent = 0; //time at which current rotate operation has been detected
+
+    this._anglePrev = 0; //angle of previous rotation
+
+    this._angleCurrent = 0; //angle of current rotation
+
+    this._cursorPosPrev = new Vector3(); //cursor position when previous rotate operation has been detected
+
+    this._cursorPosCurr = new Vector3(); //cursor position when current rotate operation has been detected
+
+    this._wPrev = 0; //angular velocity of the previous rotate operation
+
+    this._wCurr = 0; //angular velocity of the current rotate operation
+    //parameters
+
     this.adjustNearFar = false;
-    this.scaleFactor = 1.1;
+    this.scaleFactor = 1.1; //zoom/distance multiplier
+
     this.dampingFactor = 25;
-    this.wMax = 20;
-    this.enableAnimations = true;
-    this.enableGrid = false;
-    this.cursorZoom = false;
+    this.wMax = 20; //maximum angular velocity allowed
+
+    this.enableAnimations = true; //if animations should be performed
+
+    this.enableGrid = false; //if grid should be showed during pan operation
+
+    this.cursorZoom = false; //if wheel zoom should be cursor centered
+
     this.minFov = 5;
     this.maxFov = 90;
     this.enabled = true;
@@ -1644,45 +2493,63 @@ class ArcballControls extends THREE.EventDispatcher {
     this.minDistance = 0;
     this.maxDistance = Infinity;
     this.minZoom = 0;
-    this.maxZoom = Infinity;
-    this.target = new THREE.Vector3(0, 0, 0);
-    this._currentTarget = new THREE.Vector3(0, 0, 0);
-    this._tbRadius = 1;
+    this.maxZoom = Infinity; //trackball parameters
+
+    this.target = new Vector3(0, 0, 0);
+    this._currentTarget = new Vector3(0, 0, 0);
+    this._tbRadius = 1; //FSA
+
     this._state = STATE.IDLE;
-    this.setCamera(camera);
+    this.setCamera(_camera);
+
     if (this.scene) {
       this.scene.add(this._gizmos);
     }
+
     this._devPxRatio = window.devicePixelRatio;
     this.initializeMouseActions();
-    if (this.domElement)
-      this.connect(this.domElement);
-    window.addEventListener("resize", this.onWindowResize);
-  }
+    if (this.domElement) this.connect(this.domElement);
+    window.addEventListener('resize', this.onWindowResize);
+  } //listeners
+
+
+  /**
+   * Apply a transformation matrix, to the camera and gizmos
+   * @param {Object} transformation Object containing matrices to apply to camera and gizmos
+   */
   applyTransformMatrix(transformation) {
-    if ((transformation == null ? void 0 : transformation.camera) && this.camera) {
+    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);
-      this.camera.updateMatrix();
+
+      this.camera.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);
       }
     }
-    if (transformation == null ? void 0 : transformation.gizmos) {
+
+    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);
+
       this._gizmos.updateMatrix();
     }
+
     if ((this._state == STATE.SCALE || this._state == STATE.FOCUS || this._state == STATE.ANIMATION_FOCUS) && this.camera) {
       const tbRadius = this.calculateTbRadius(this.camera);
-      if (tbRadius !== void 0) {
+
+      if (tbRadius !== undefined) {
         this._tbRadius = tbRadius;
       }
+
       if (this.adjustNearFar) {
         const cameraDistance = this.camera.position.distanceTo(this._gizmos.position);
-        const bb = new THREE.Box3();
+        const bb = new Box3();
         bb.setFromObject(this._gizmos);
-        const sphere = new THREE.Sphere();
+        const sphere = new Sphere();
         bb.getBoundingSphere(sphere);
         const adjustedNearPosition = Math.max(this._nearPos0, sphere.radius + sphere.center.length());
         const regularNearPosition = cameraDistance - this._initialNear;
@@ -1695,24 +2562,52 @@ class ArcballControls extends THREE.EventDispatcher {
         this.camera.updateProjectionMatrix();
       } else {
         let update = false;
+
         if (this.camera.near != this._initialNear) {
           this.camera.near = this._initialNear;
           update = true;
         }
+
         if (this.camera.far != this._initialFar) {
           this.camera.far = this._initialFar;
           update = true;
         }
+
         if (update) {
           this.camera.updateProjectionMatrix();
         }
       }
     }
   }
+  /**
+   * Calculate the angular speed
+   * @param {Number} p0 Position at t0
+   * @param {Number} p1 Position at t1
+   * @param {Number} t0 Initial time in milliseconds
+   * @param {Number} t1 Ending time in milliseconds
+   */
+
+
+  /**
+   * Set gizmos visibility
+   * @param {Boolean} value Value of gizmos visibility
+   */
   setGizmosVisible(value) {
     this._gizmos.visible = value;
     this.dispatchEvent(_changeEvent);
   }
+  /**
+   * Creates the rotation gizmos matching trackball center and radius
+   * @param {Vector3} tbCenter The trackball center
+   * @param {number} tbRadius The trackball radius
+   */
+
+
+  /**
+   * Set values in transformation object
+   * @param {Matrix4} camera Transformation to be applied to the camera
+   * @param {Matrix4} gizmos Transformation to be applied to gizmos
+   */
   setTransformationMatrices(camera = null, gizmos = null) {
     if (camera) {
       if (_transformation.camera) {
@@ -1723,6 +2618,7 @@ class ArcballControls extends THREE.EventDispatcher {
     } else {
       _transformation.camera = null;
     }
+
     if (gizmos) {
       if (_transformation.gizmos) {
         _transformation.gizmos.copy(gizmos);
@@ -1733,5 +2629,14 @@ class ArcballControls extends THREE.EventDispatcher {
       _transformation.gizmos = null;
     }
   }
+  /**
+   * Rotate camera around its direction axis passing by a given point by a given angle
+   * @param {Vector3} point The point where the rotation axis is passing trough
+   * @param {Number} angle Angle in radians
+   * @returns The computed transormation matix
+   */
+
+
 }
-exports.ArcballControls = ArcballControls;
+
+export { ArcballControls };