@tonybfox/threejs-tools 1.0.0

package/dist/transform-controls/index.cjs

@@ -0,0 +1,1587 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/transform-controls/src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  TransformControls: () => TransformControls,
+  TransformControlsGizmo: () => TransformControlsGizmo,
+  TransformControlsPlane: () => TransformControlsPlane,
+  calculateBoundingBoxCenter: () => calculateBoundingBoxCenter
+});
+module.exports = __toCommonJS(src_exports);
+
+// packages/transform-controls/src/TransformControls.ts
+var import_three = require("three");
+var import_CSS2DRenderer = require("three/examples/jsm/renderers/CSS2DRenderer.js");
+var _raycaster = new import_three.Raycaster();
+var _tempVector = new import_three.Vector3();
+var _tempVector2 = new import_three.Vector3();
+var _tempQuaternion = new import_three.Quaternion();
+var _unit = {
+  X: new import_three.Vector3(1, 0, 0),
+  Y: new import_three.Vector3(0, 1, 0),
+  Z: new import_three.Vector3(0, 0, 1)
+};
+var _changeEvent = { type: "change" };
+var _mouseDownEvent = { type: "mouseDown", mode: null };
+var _mouseUpEvent = { type: "mouseUp", mode: null };
+var _objectChangeEvent = { type: "objectChange" };
+var TransformControls = class extends import_three.Controls {
+  /**
+   * Constructs a new controls instance.
+   *
+   * @param {Camera} camera - The camera of the rendered scene.
+   * @param {?HTMLDOMElement} domElement - The HTML element used for event listeners.
+   */
+  constructor(camera, domElement = null) {
+    super(void 0, domElement);
+    const root = new TransformControlsRoot(this);
+    this._root = root;
+    const gizmo = new TransformControlsGizmo();
+    this._gizmo = gizmo;
+    root.add(gizmo);
+    const plane = new TransformControlsPlane();
+    this._plane = plane;
+    root.add(plane);
+    const scope = this;
+    this._overlay = document.createElement("div");
+    this._overlay.classList.add("absolute");
+    this._overlay.classList.add("bottom-2");
+    this._overlay.classList.add("left-80");
+    this._overlay.classList.add("z-50");
+    this._overlay.classList.add("bg-gray-700");
+    this._overlay.classList.add("bg-opacity-70");
+    this._overlay.classList.add("text-white");
+    this._overlay.classList.add("p-2");
+    this._overlay.classList.add("rounded-md");
+    this._overlay.classList.add("border");
+    this._overlay.classList.add("border-gray-500");
+    this._overlay.classList.add("hidden");
+    if (domElement) {
+      domElement.appendChild(this._overlay);
+    }
+    const labelDiv = document.createElement("div");
+    labelDiv.className = "distance-label";
+    labelDiv.style.padding = "4px 8px";
+    labelDiv.style.background = "rgba(0, 0, 0, 0.8)";
+    labelDiv.style.border = "1px solid rgba(255, 255, 255, 0.3)";
+    labelDiv.style.borderRadius = "4px";
+    labelDiv.style.color = "#fff";
+    labelDiv.style.fontSize = "12px";
+    labelDiv.style.fontFamily = "monospace";
+    labelDiv.style.whiteSpace = "nowrap";
+    labelDiv.style.pointerEvents = "none";
+    labelDiv.style.userSelect = "none";
+    labelDiv.textContent = "0.00";
+    this._distanceLabel = new import_CSS2DRenderer.CSS2DObject(labelDiv);
+    this._distanceLabel.visible = false;
+    root.add(this._distanceLabel);
+    const angleLabelDiv = document.createElement("div");
+    angleLabelDiv.className = "rotation-angle-label";
+    angleLabelDiv.style.padding = "4px 8px";
+    angleLabelDiv.style.background = "rgba(0, 0, 0, 0.8)";
+    angleLabelDiv.style.border = "1px solid rgba(255, 255, 255, 0.3)";
+    angleLabelDiv.style.borderRadius = "4px";
+    angleLabelDiv.style.color = "#fff";
+    angleLabelDiv.style.fontSize = "12px";
+    angleLabelDiv.style.fontFamily = "monospace";
+    angleLabelDiv.style.whiteSpace = "nowrap";
+    angleLabelDiv.style.pointerEvents = "none";
+    angleLabelDiv.style.userSelect = "none";
+    angleLabelDiv.textContent = "0\xB0";
+    this._rotationAngleLabel = new import_CSS2DRenderer.CSS2DObject(angleLabelDiv);
+    this._rotationAngleLabel.visible = false;
+    root.add(this._rotationAngleLabel);
+    this._rotationArc = null;
+    function defineProperty(propName, defaultValue) {
+      let propValue = defaultValue;
+      Object.defineProperty(scope, propName, {
+        get: function() {
+          return propValue !== void 0 ? propValue : defaultValue;
+        },
+        set: function(value) {
+          if (propValue !== value) {
+            propValue = value;
+            plane[propName] = value;
+            gizmo[propName] = value;
+            scope.dispatchEvent({
+              type: propName + "-changed",
+              value
+            });
+            scope.dispatchEvent(_changeEvent);
+          }
+        }
+      });
+      scope[propName] = defaultValue;
+      plane[propName] = defaultValue;
+      gizmo[propName] = defaultValue;
+    }
+    defineProperty("camera", camera);
+    defineProperty("object", void 0);
+    defineProperty("enabled", true);
+    defineProperty("axis", null);
+    defineProperty("mode", "all");
+    defineProperty("translationSnap", null);
+    defineProperty("rotationSnap", null);
+    defineProperty("scaleSnap", null);
+    defineProperty("space", "world");
+    defineProperty("size", 0.75);
+    defineProperty("dragging", false);
+    defineProperty("activeMode", "translate");
+    defineProperty("showX", true);
+    defineProperty("showY", true);
+    defineProperty("showZ", true);
+    defineProperty("minX", -Infinity);
+    defineProperty("maxX", Infinity);
+    defineProperty("minY", -Infinity);
+    defineProperty("maxY", Infinity);
+    defineProperty("minZ", -Infinity);
+    defineProperty("maxZ", Infinity);
+    defineProperty("minRotation", -2 * Math.PI);
+    defineProperty("maxRotation", 2 * Math.PI);
+    const worldPosition = new import_three.Vector3();
+    const worldPositionStart = new import_three.Vector3();
+    const worldQuaternion = new import_three.Quaternion();
+    const worldQuaternionStart = new import_three.Quaternion();
+    const cameraPosition = new import_three.Vector3();
+    const cameraQuaternion = new import_three.Quaternion();
+    const pointStart = new import_three.Vector3();
+    const pointEnd = new import_three.Vector3();
+    const rotationAxis = new import_three.Vector3();
+    const rotationAngle = 0;
+    const eye = new import_three.Vector3();
+    defineProperty("worldPosition", worldPosition);
+    defineProperty("worldPositionStart", worldPositionStart);
+    defineProperty("worldQuaternion", worldQuaternion);
+    defineProperty("worldQuaternionStart", worldQuaternionStart);
+    defineProperty("cameraPosition", cameraPosition);
+    defineProperty("cameraQuaternion", cameraQuaternion);
+    defineProperty("pointStart", pointStart);
+    defineProperty("pointEnd", pointEnd);
+    defineProperty("rotationAxis", rotationAxis);
+    defineProperty("rotationAngle", rotationAngle);
+    defineProperty("eye", eye);
+    this._offset = new import_three.Vector3();
+    this._startNorm = new import_three.Vector3();
+    this._endNorm = new import_three.Vector3();
+    this._cameraScale = new import_three.Vector3();
+    this._parentPosition = new import_three.Vector3();
+    this._parentQuaternion = new import_three.Quaternion();
+    this._parentQuaternionInv = new import_three.Quaternion();
+    this._parentScale = new import_three.Vector3();
+    this._worldScaleStart = new import_three.Vector3();
+    this._worldQuaternionInv = new import_three.Quaternion();
+    this._worldScale = new import_three.Vector3();
+    this._tempPosition = new import_three.Vector3();
+    this._positionStart = new import_three.Vector3();
+    this._quaternionStart = new import_three.Quaternion();
+    this._scaleStart = new import_three.Vector3();
+    this._getPointer = getPointer.bind(this);
+    this._onPointerDown = onPointerDown.bind(this);
+    this._onPointerHover = onPointerHover.bind(this);
+    this._onPointerMove = onPointerMove.bind(this);
+    this._onPointerUp = onPointerUp.bind(this);
+    if (domElement !== null) {
+      this.connect(domElement);
+    }
+  }
+  connect(element) {
+    super.connect(element);
+    if (this.domElement?.parentNode) {
+      this.domElement.parentNode.appendChild(this._overlay);
+    }
+    this.domElement?.addEventListener("pointerdown", this._onPointerDown);
+    this.domElement?.addEventListener("pointermove", this._onPointerHover);
+    this.domElement?.addEventListener("pointerup", this._onPointerUp);
+    if (this.domElement) {
+      this.domElement.style.touchAction = "none";
+    }
+  }
+  disconnect() {
+    if (this._overlay.parentNode) {
+      this._overlay.parentNode.removeChild(this._overlay);
+    }
+    this.domElement?.removeEventListener("pointerdown", this._onPointerDown);
+    this.domElement?.removeEventListener("pointermove", this._onPointerHover);
+    this.domElement?.removeEventListener("pointermove", this._onPointerMove);
+    this.domElement?.removeEventListener("pointerup", this._onPointerUp);
+    if (this.domElement) {
+      this.domElement.style.touchAction = "auto";
+    }
+  }
+  /**
+   * Returns the visual representation of the controls. Add the helper to your scene to
+   * visually transform the attached  3D object.
+   *
+   * @return {TransformControlsRoot} The helper.
+   */
+  getHelper() {
+    return this._root;
+  }
+  pointerHover(pointer) {
+    if (this.object === void 0 || this.dragging === true) return;
+    if (pointer !== null) _raycaster.setFromCamera(pointer, this.camera);
+    let intersect = null;
+    if (this.mode === "all") {
+      intersect = intersectObjectWithRay(
+        this._gizmo.picker["scale"],
+        _raycaster
+      );
+      if (!intersect) {
+        intersect = intersectObjectWithRay(
+          this._gizmo.picker["rotate"],
+          _raycaster
+        );
+      }
+      if (!intersect) {
+        intersect = intersectObjectWithRay(
+          this._gizmo.picker["translate"],
+          _raycaster
+        );
+      }
+    } else {
+      intersect = intersectObjectWithRay(
+        this._gizmo.picker[this.mode],
+        _raycaster
+      );
+    }
+    if (intersect) {
+      this.axis = intersect.object.name;
+    } else {
+      this.axis = null;
+    }
+  }
+  pointerDown(pointer) {
+    if (this.object === void 0 || this.dragging === true || pointer != null && pointer.button !== 0)
+      return;
+    if (this.axis !== null) {
+      if (pointer !== null) _raycaster.setFromCamera(pointer, this.camera);
+      if (this.mode === "all") {
+        let intersect = intersectObjectWithRay(
+          this._gizmo.picker["scale"],
+          _raycaster
+        );
+        if (intersect && intersect.object.name === this.axis) {
+          this.activeMode = "scale";
+        } else {
+          intersect = intersectObjectWithRay(
+            this._gizmo.picker["rotate"],
+            _raycaster
+          );
+          if (intersect && intersect.object.name === this.axis) {
+            this.activeMode = "rotate";
+          } else {
+            this.activeMode = "translate";
+          }
+        }
+      } else {
+        this.activeMode = this.mode;
+      }
+      const planeIntersect = intersectObjectWithRay(
+        this._plane,
+        _raycaster,
+        true
+      );
+      if (planeIntersect) {
+        this.object.updateMatrixWorld();
+        this.object.parent.updateMatrixWorld();
+        this._positionStart.copy(this.object.position);
+        this._quaternionStart.copy(this.object.quaternion);
+        this._scaleStart.copy(this.object.scale);
+        const boundingBoxCenter = calculateBoundingBoxCenter(this.object);
+        this.worldPositionStart.copy(boundingBoxCenter);
+        this.object.matrixWorld.decompose(
+          this._tempPosition,
+          // Use temporary variable for position
+          this.worldQuaternionStart,
+          this._worldScaleStart
+        );
+        this.pointStart.copy(planeIntersect.point).sub(this.worldPositionStart);
+      }
+      this.dragging = true;
+      _mouseDownEvent.mode = this.mode === "all" ? this.activeMode : this.mode;
+      this.dispatchEvent(_mouseDownEvent);
+    }
+  }
+  pointerMove(pointer) {
+    const axis = this.axis;
+    const mode = this.mode === "all" ? this.activeMode : this.mode;
+    const object = this.object;
+    let space = this.space;
+    if (mode === "scale") {
+      space = "local";
+    } else if (axis === "E" || axis === "XYZE" || axis === "XYZ") {
+      space = "world";
+    }
+    if (object === void 0 || axis === null || this.dragging === false || pointer !== null && pointer.button !== -1) {
+      this._updateDistanceOverlay();
+      return;
+    }
+    if (pointer !== null) _raycaster.setFromCamera(pointer, this.camera);
+    const planeIntersect = intersectObjectWithRay(this._plane, _raycaster, true);
+    if (!planeIntersect) return;
+    this.pointEnd.copy(planeIntersect.point).sub(this.worldPositionStart);
+    if (mode === "translate") {
+      this._offset.copy(this.pointEnd).sub(this.pointStart);
+      if (space === "local" && axis !== "XYZ") {
+        this._offset.applyQuaternion(this._worldQuaternionInv);
+      }
+      if (axis.indexOf("X") === -1) this._offset.x = 0;
+      if (axis.indexOf("Y") === -1) this._offset.y = 0;
+      if (axis.indexOf("Z") === -1) this._offset.z = 0;
+      if (space === "local" && axis !== "XYZ") {
+        this._offset.applyQuaternion(this._quaternionStart).divide(this._parentScale);
+      } else {
+        this._offset.applyQuaternion(this._parentQuaternionInv).divide(this._parentScale);
+      }
+      object.position.copy(this._offset).add(this._positionStart);
+      if (this.translationSnap) {
+        if (space === "local") {
+          object.position.applyQuaternion(
+            _tempQuaternion.copy(this._quaternionStart).invert()
+          );
+          if (axis.search("X") !== -1) {
+            object.position.x = Math.round(object.position.x / this.translationSnap) * this.translationSnap;
+          }
+          if (axis.search("Y") !== -1) {
+            object.position.y = Math.round(object.position.y / this.translationSnap) * this.translationSnap;
+          }
+          if (axis.search("Z") !== -1) {
+            object.position.z = Math.round(object.position.z / this.translationSnap) * this.translationSnap;
+          }
+          object.position.applyQuaternion(this._quaternionStart);
+        }
+        if (space === "world") {
+          if (object.parent) {
+            object.position.add(
+              _tempVector.setFromMatrixPosition(object.parent.matrixWorld)
+            );
+          }
+          if (axis.search("X") !== -1) {
+            object.position.x = Math.round(object.position.x / this.translationSnap) * this.translationSnap;
+          }
+          if (axis.search("Y") !== -1) {
+            object.position.y = Math.round(object.position.y / this.translationSnap) * this.translationSnap;
+          }
+          if (axis.search("Z") !== -1) {
+            object.position.z = Math.round(object.position.z / this.translationSnap) * this.translationSnap;
+          }
+          if (object.parent) {
+            object.position.sub(
+              _tempVector.setFromMatrixPosition(object.parent.matrixWorld)
+            );
+          }
+        }
+      }
+      object.position.x = Math.max(
+        this.minX,
+        Math.min(this.maxX, object.position.x)
+      );
+      object.position.y = Math.max(
+        this.minY,
+        Math.min(this.maxY, object.position.y)
+      );
+      object.position.z = Math.max(
+        this.minZ,
+        Math.min(this.maxZ, object.position.z)
+      );
+    } else if (mode === "scale") {
+      if (axis.search("XYZ") !== -1) {
+        let d = this.pointEnd.length() / this.pointStart.length();
+        if (this.pointEnd.dot(this.pointStart) < 0) d *= -1;
+        _tempVector2.set(d, d, d);
+      } else {
+        _tempVector.copy(this.pointStart);
+        _tempVector2.copy(this.pointEnd);
+        _tempVector.applyQuaternion(this._worldQuaternionInv);
+        _tempVector2.applyQuaternion(this._worldQuaternionInv);
+        _tempVector2.divide(_tempVector);
+        if (axis.search("X") === -1) {
+          _tempVector2.x = 1;
+        }
+        if (axis.search("Y") === -1) {
+          _tempVector2.y = 1;
+        }
+        if (axis.search("Z") === -1) {
+          _tempVector2.z = 1;
+        }
+      }
+      object.scale.copy(this._scaleStart).multiply(_tempVector2);
+      if (this.scaleSnap) {
+        if (axis.search("X") !== -1) {
+          object.scale.x = Math.round(object.scale.x / this.scaleSnap) * this.scaleSnap || this.scaleSnap;
+        }
+        if (axis.search("Y") !== -1) {
+          object.scale.y = Math.round(object.scale.y / this.scaleSnap) * this.scaleSnap || this.scaleSnap;
+        }
+        if (axis.search("Z") !== -1) {
+          object.scale.z = Math.round(object.scale.z / this.scaleSnap) * this.scaleSnap || this.scaleSnap;
+        }
+      }
+    } else if (mode === "rotate") {
+      this._offset.copy(this.pointEnd).sub(this.pointStart);
+      const ROTATION_SPEED = 20 / this.worldPosition.distanceTo(
+        _tempVector.setFromMatrixPosition(this.camera.matrixWorld)
+      );
+      let _inPlaneRotation = false;
+      if (axis === "XYZE") {
+        this.rotationAxis.copy(this._offset).cross(this.eye).normalize();
+        this.rotationAngle = this._offset.dot(
+          _tempVector.copy(this.rotationAxis).cross(this.eye)
+        ) * ROTATION_SPEED;
+      } else if (axis === "X" || axis === "Y" || axis === "Z") {
+        this.rotationAxis.copy(_unit[axis]);
+        _tempVector.copy(_unit[axis]);
+        if (space === "local") {
+          _tempVector.applyQuaternion(this.worldQuaternion);
+        }
+        _tempVector.cross(this.eye);
+        if (_tempVector.length() === 0) {
+          _inPlaneRotation = true;
+        } else {
+          this.rotationAngle = this._offset.dot(_tempVector.normalize()) * ROTATION_SPEED;
+        }
+      }
+      if (axis === "E" || _inPlaneRotation) {
+        this.rotationAxis.copy(this.eye);
+        this.rotationAngle = this.pointEnd.angleTo(this.pointStart);
+        this._startNorm.copy(this.pointStart).normalize();
+        this._endNorm.copy(this.pointEnd).normalize();
+        this.rotationAngle *= this._endNorm.cross(this._startNorm).dot(this.eye) < 0 ? 1 : -1;
+      }
+      if (this.rotationSnap)
+        this.rotationAngle = Math.round(this.rotationAngle / this.rotationSnap) * this.rotationSnap;
+      this.rotationAngle = Math.max(
+        this.minRotation,
+        Math.min(this.maxRotation, this.rotationAngle)
+      );
+      if (space === "local" && axis !== "E" && axis !== "XYZE") {
+        object.quaternion.copy(this._quaternionStart);
+        object.quaternion.multiply(
+          _tempQuaternion.setFromAxisAngle(
+            this.rotationAxis,
+            this.rotationAngle
+          )
+        ).normalize();
+      } else {
+        this.rotationAxis.applyQuaternion(this._parentQuaternionInv);
+        object.quaternion.copy(
+          _tempQuaternion.setFromAxisAngle(
+            this.rotationAxis,
+            this.rotationAngle
+          )
+        );
+        object.quaternion.multiply(this._quaternionStart).normalize();
+      }
+    }
+    this.dispatchEvent(_changeEvent);
+    this.dispatchEvent(_objectChangeEvent);
+    this._updateDistanceOverlay();
+  }
+  pointerUp(pointer) {
+    if (pointer !== null && pointer.button !== 0) return;
+    if (this.dragging && this.axis !== null) {
+      _mouseUpEvent.mode = this.mode;
+      this.dispatchEvent(_mouseUpEvent);
+    }
+    this.dragging = false;
+    this.axis = null;
+    this._updateDistanceOverlay();
+  }
+  dispose() {
+    this.disconnect();
+    this._root.dispose();
+  }
+  /**
+   * Sets the 3D object that should be transformed and ensures the controls UI is visible.
+   *
+   * @param {Object3D} object -  The 3D object that should be transformed.
+   * @return {TransformControls} A reference to this controls.
+   */
+  attach(object) {
+    this.object = object;
+    this._root.visible = true;
+    return this;
+  }
+  /**
+   * Removes the current 3D object from the controls and makes the helper UI invisible.
+   *
+   * @return {TransformControls} A reference to this controls.
+   */
+  detach() {
+    this.object = void 0;
+    this.axis = null;
+    this._root.visible = false;
+    return this;
+  }
+  /**
+   * Resets the object's position, rotation and scale to when the current transform began.
+   */
+  reset() {
+    if (!this.enabled) return;
+    if (this.dragging) {
+      this.object.position.copy(this._positionStart);
+      this.object.quaternion.copy(this._quaternionStart);
+      this.object.scale.copy(this._scaleStart);
+      this.dispatchEvent(_changeEvent);
+      this.dispatchEvent(_objectChangeEvent);
+      this.pointStart.copy(this.pointEnd);
+    }
+  }
+  /**
+   * Returns the raycaster that is used for user interaction. This object is shared between all
+   * instances of `TransformControls`.
+   *
+   * @returns {Raycaster} The internal raycaster.
+   */
+  getRaycaster() {
+    return _raycaster;
+  }
+  /**
+   * Returns the transformation mode.
+   *
+   * @returns {'translate'|'rotate'|'scale'} The transformation mode.
+   */
+  getMode() {
+    return this.mode;
+  }
+  /**
+   * Sets the given transformation mode.
+   *
+   * @param {'translate'|'rotate'|'scale'|'all'} mode - The transformation mode to set.
+   */
+  setMode(mode) {
+  }
+  /**
+   * Sets the translation snap.
+   *
+   * @param {?number} translationSnap - The translation snap to set.
+   */
+  setTranslationSnap(translationSnap) {
+    this.translationSnap = translationSnap;
+  }
+  /**
+   * Sets the rotation snap.
+   *
+   * @param {?number} rotationSnap - The rotation snap to set.
+   */
+  setRotationSnap(rotationSnap) {
+    this.rotationSnap = rotationSnap;
+  }
+  /**
+   * Sets the minimum rotation angle limit (in radians).
+   *
+   * @param {number} minRotation - The minimum rotation angle to set (in radians).
+   */
+  setMinRotation(minRotation) {
+    this.minRotation = minRotation;
+  }
+  /**
+   * Sets the maximum rotation angle limit (in radians).
+   *
+   * @param {number} maxRotation - The maximum rotation angle to set (in radians).
+   */
+  setMaxRotation(maxRotation) {
+    this.maxRotation = maxRotation;
+  }
+  /**
+   * Sets the scale snap.
+   *
+   * @param {?number} scaleSnap - The scale snap to set.
+   */
+  setScaleSnap(scaleSnap) {
+    this.scaleSnap = scaleSnap;
+  }
+  /**
+   * Sets the size of the helper UI.
+   *
+   * @param {number} size - The size to set.
+   */
+  setSize(size) {
+    this.size = size;
+  }
+  /**
+   * Sets the coordinate space in which transformations are applied.
+   *
+   * @param {'world'|'local'} space - The space to set.
+   */
+  setSpace(space) {
+    this.space = space;
+  }
+  _updateDistanceOverlay() {
+    if (!this.object || !this.dragging) {
+      this._overlay.classList.add("hidden");
+      this._distanceLabel.visible = false;
+      this._rotationAngleLabel.visible = false;
+      return;
+    }
+    if (this.mode === "translate" || this.mode === "all" && this.activeMode === "translate") {
+      const xDistance = this.object.position.x - this._positionStart.x;
+      const yDistance = this.object.position.y - this._positionStart.y;
+      const zDistance = this.object.position.z - this._positionStart.z;
+      const totalDistance = Math.sqrt(
+        xDistance * xDistance + yDistance * yDistance + zDistance * zDistance
+      );
+      const midPoint = new import_three.Vector3(
+        (this._positionStart.x + this.object.position.x) / 2,
+        (this._positionStart.y + this.object.position.y) / 2,
+        (this._positionStart.z + this.object.position.z) / 2
+      );
+      this._distanceLabel.position.copy(midPoint);
+      this._distanceLabel.visible = true;
+      this._rotationAngleLabel.visible = false;
+      this._distanceLabel.element.textContent = `${totalDistance.toFixed(3)}`;
+      this._overlay.textContent = `X: ${xDistance.toFixed(2)} Y: ${yDistance.toFixed(2)} Z: ${zDistance.toFixed(2)}`;
+    } else if (this.mode === "rotate" || this.mode === "all" && this.activeMode === "rotate") {
+      this._distanceLabel.visible = false;
+      const angleDegrees = this.rotationAngle * 180 / Math.PI;
+      const labelRadius = 0.55;
+      const labelAngle = this.rotationAngle / 2;
+      const labelPos = new import_three.Vector3();
+      if (this.axis === "X" || this.axis === "Y" || this.axis === "Z") {
+        const axisvec = _unit[this.axis];
+        const perpVector = new import_three.Vector3();
+        if (Math.abs(axisvec.dot(this.pointStart.clone().normalize())) > 0.99) {
+          perpVector.copy(this.eye).cross(axisvec).normalize();
+        } else {
+          perpVector.copy(this.pointStart).normalize();
+        }
+        const rotQuat = new import_three.Quaternion().setFromAxisAngle(axisvec, labelAngle);
+        perpVector.applyQuaternion(rotQuat);
+        if (this.space === "local") {
+          perpVector.applyQuaternion(this.worldQuaternion);
+        }
+        perpVector.multiplyScalar(labelRadius);
+        labelPos.copy(this.worldPosition).add(perpVector);
+      } else {
+        labelPos.copy(this.worldPosition);
+        const offsetDir = this.pointStart.clone().normalize();
+        if (this.space === "local") {
+          offsetDir.applyQuaternion(this.worldQuaternion);
+        }
+        offsetDir.multiplyScalar(labelRadius);
+        labelPos.add(offsetDir);
+      }
+      this._rotationAngleLabel.position.copy(labelPos);
+      this._rotationAngleLabel.visible = true;
+      this._rotationAngleLabel.element.textContent = `${Math.abs(angleDegrees).toFixed(1)}\xB0`;
+      this._overlay.textContent = `X: ${(this.object.rotation.x * (180 / Math.PI)).toFixed(2)}\xB0 Y: ${(this.object.rotation.y * (180 / Math.PI)).toFixed(2)}\xB0 Z: ${(this.object.rotation.z * (180 / Math.PI)).toFixed(2)}\xB0`;
+    } else if (this.mode === "scale") {
+      this._distanceLabel.visible = false;
+      this._rotationAngleLabel.visible = false;
+      this._overlay.textContent = `X: ${this.object.scale.x.toFixed(2)} Y: ${this.object.scale.y.toFixed(2)} Z: ${this.object.scale.z.toFixed(2)}`;
+    }
+    this._overlay.classList.remove("hidden");
+  }
+};
+function getPointer(event) {
+  if (this.domElement.ownerDocument.pointerLockElement) {
+    return {
+      x: 0,
+      y: 0,
+      button: event.button
+    };
+  } else {
+    const rect = this.domElement.getBoundingClientRect();
+    return {
+      x: (event.clientX - rect.left) / rect.width * 2 - 1,
+      y: -(event.clientY - rect.top) / rect.height * 2 + 1,
+      button: event.button
+    };
+  }
+}
+function onPointerHover(event) {
+  if (!this.enabled) return;
+  switch (event.pointerType) {
+    case "mouse":
+    case "pen":
+      this.pointerHover(this._getPointer(event));
+      break;
+  }
+}
+function onPointerDown(event) {
+  if (!this.enabled) return;
+  if (!document.pointerLockElement) {
+    this.domElement.setPointerCapture(event.pointerId);
+  }
+  this.domElement.addEventListener("pointermove", this._onPointerMove);
+  this.pointerHover(this._getPointer(event));
+  this.pointerDown(this._getPointer(event));
+}
+function onPointerMove(event) {
+  if (!this.enabled) return;
+  this.pointerMove(this._getPointer(event));
+}
+function onPointerUp(event) {
+  if (!this.enabled) return;
+  this.domElement.releasePointerCapture(event.pointerId);
+  this.domElement.removeEventListener("pointermove", this._onPointerMove);
+  this.pointerUp(this._getPointer(event));
+}
+function intersectObjectWithRay(object, raycaster, includeInvisible) {
+  const allIntersections = raycaster.intersectObject(object, true);
+  for (let i = 0; i < allIntersections.length; i++) {
+    if (allIntersections[i].object.visible || includeInvisible) {
+      return allIntersections[i];
+    }
+  }
+  return false;
+}
+var _tempEuler = new import_three.Euler();
+var _alignVector = new import_three.Vector3(0, 1, 0);
+var _zeroVector = new import_three.Vector3(0, 0, 0);
+var _lookAtMatrix = new import_three.Matrix4();
+var _tempQuaternion2 = new import_three.Quaternion();
+var _identityQuaternion = new import_three.Quaternion();
+var _dirVector = new import_three.Vector3();
+var _tempMatrix = new import_three.Matrix4();
+var _unitX = new import_three.Vector3(1, 0, 0);
+var _unitY = new import_three.Vector3(0, 1, 0);
+var _unitZ = new import_three.Vector3(0, 0, 1);
+var _v1 = new import_three.Vector3();
+var _v2 = new import_three.Vector3();
+var _v3 = new import_three.Vector3();
+function calculateBoundingBoxCenter(object) {
+  const box = new import_three.Box3();
+  object.traverse((child) => {
+    if (child.isMesh && child.geometry) {
+      child.geometry.computeBoundingBox();
+      box.expandByObject(child);
+    }
+  });
+  if (box.isEmpty()) {
+    return object.getWorldPosition(new import_three.Vector3());
+  }
+  const center = new import_three.Vector3();
+  box.getCenter(center);
+  return center;
+}
+var TransformControlsRoot = class extends import_three.Object3D {
+  constructor(controls) {
+    super();
+    this.isTransformControlsRoot = true;
+    this.controls = controls;
+    this.visible = false;
+  }
+  // updateMatrixWorld updates key transformation variables
+  updateMatrixWorld(force) {
+    const controls = this.controls;
+    if (controls.object !== void 0) {
+      controls.object.updateMatrixWorld();
+      if (controls.object.parent === null) {
+        console.error(
+          "TransformControls: The attached 3D object must be a part of the scene graph."
+        );
+      } else {
+        controls.object.parent.matrixWorld.decompose(
+          controls._parentPosition,
+          controls._parentQuaternion,
+          controls._parentScale
+        );
+      }
+      const boundingBoxCenter = calculateBoundingBoxCenter(controls.object);
+      controls.worldPosition.copy(boundingBoxCenter);
+      controls.object.matrixWorld.decompose(
+        controls._tempPosition,
+        // Use temporary variable for position
+        controls.worldQuaternion,
+        controls._worldScale
+      );
+      controls._parentQuaternionInv.copy(controls._parentQuaternion).invert();
+      controls._worldQuaternionInv.copy(controls.worldQuaternion).invert();
+    }
+    controls.camera.updateMatrixWorld();
+    controls.camera.matrixWorld.decompose(
+      controls.cameraPosition,
+      controls.cameraQuaternion,
+      controls._cameraScale
+    );
+    if (controls.camera.isOrthographicCamera) {
+      controls.eye.copy(controls.cameraPosition).sub(controls.worldPosition).normalize();
+    } else {
+      controls.eye.copy(controls.cameraPosition).sub(controls.worldPosition).normalize();
+    }
+    super.updateMatrixWorld(force);
+  }
+  dispose() {
+    this.traverse(function(child) {
+      if (child.geometry) child.geometry.dispose();
+      if (child.material) child.material.dispose();
+    });
+  }
+};
+var TransformControlsGizmo = class extends import_three.Object3D {
+  constructor() {
+    super();
+    this.isTransformControlsGizmo = true;
+    this.type = "TransformControlsGizmo";
+    const gizmoMaterial = new import_three.MeshBasicMaterial({
+      depthTest: false,
+      depthWrite: false,
+      fog: false,
+      toneMapped: false,
+      transparent: true
+    });
+    const gizmoLineMaterial = new import_three.LineBasicMaterial({
+      depthTest: false,
+      depthWrite: false,
+      fog: false,
+      toneMapped: false,
+      transparent: true
+    });
+    const matInvisible = gizmoMaterial.clone();
+    matInvisible.opacity = 0.15;
+    const matHelper = gizmoLineMaterial.clone();
+    matHelper.opacity = 0.5;
+    const matRed = gizmoMaterial.clone();
+    matRed.color.setHex(15549272);
+    const matGreen = gizmoMaterial.clone();
+    matGreen.color.setHex(8571929);
+    const matBlue = gizmoMaterial.clone();
+    matBlue.color.setHex(3245547);
+    const matRedTransparent = gizmoMaterial.clone();
+    matRedTransparent.color.setHex(15549272);
+    matRedTransparent.opacity = 0.5;
+    const matGreenTransparent = gizmoMaterial.clone();
+    matGreenTransparent.color.setHex(8571929);
+    matGreenTransparent.opacity = 0.5;
+    const matBlueTransparent = gizmoMaterial.clone();
+    matBlueTransparent.color.setHex(3245547);
+    matBlueTransparent.opacity = 0.5;
+    const matWhiteTransparent = gizmoMaterial.clone();
+    matWhiteTransparent.opacity = 0.25;
+    const matYellowTransparent = gizmoMaterial.clone();
+    matYellowTransparent.color.setHex(16776960);
+    matYellowTransparent.opacity = 0.25;
+    const matYellow = gizmoMaterial.clone();
+    matYellow.color.setHex(16776960);
+    const matGray = gizmoMaterial.clone();
+    matGray.color.setHex(7895160);
+    const arrowGeometry = new import_three.CylinderGeometry(0, 0.04, 0.1, 12);
+    arrowGeometry.translate(0, 0.05, 0);
+    const scaleHandleGeometry = new import_three.BoxGeometry(0.08, 0.08, 0.08);
+    scaleHandleGeometry.translate(0, 0.04, 0);
+    const lineGeometry = new import_three.BufferGeometry();
+    lineGeometry.setAttribute(
+      "position",
+      new import_three.Float32BufferAttribute([0, 0, 0, 1, 0, 0], 3)
+    );
+    const lineGeometry2 = new import_three.CylinderGeometry(0.02, 0.02, 0.5, 3);
+    lineGeometry2.translate(0, 0.25, 0);
+    function CircleGeometry(radius, arc) {
+      const geometry = new import_three.TorusGeometry(radius, 0.02, 3, 64, arc * Math.PI * 2);
+      geometry.rotateY(Math.PI / 2);
+      geometry.rotateX(Math.PI / 2);
+      return geometry;
+    }
+    function TranslateHelperGeometry() {
+      const geometry = new import_three.BufferGeometry();
+      geometry.setAttribute(
+        "position",
+        new import_three.Float32BufferAttribute([0, 0, 0, 1, 1, 1], 3)
+      );
+      return geometry;
+    }
+    const gizmoTranslate = {
+      X: [
+        [new import_three.Mesh(arrowGeometry, matRed), [0.5, 0, 0], [0, 0, -Math.PI / 2]],
+        [new import_three.Mesh(lineGeometry2, matRed), [0, 0, 0], [0, 0, -Math.PI / 2]]
+      ],
+      Y: [
+        [new import_three.Mesh(arrowGeometry, matGreen), [0, 0.5, 0]],
+        [new import_three.Mesh(lineGeometry2, matGreen)]
+      ],
+      Z: [
+        [new import_three.Mesh(arrowGeometry, matBlue), [0, 0, 0.5], [Math.PI / 2, 0, 0]],
+        [new import_three.Mesh(lineGeometry2, matBlue), null, [Math.PI / 2, 0, 0]]
+      ]
+    };
+    const pickerTranslate = {
+      X: [
+        [
+          new import_three.Mesh(new import_three.CylinderGeometry(0.2, 0, 0.6, 4), matInvisible),
+          [0.3, 0, 0],
+          [0, 0, -Math.PI / 2]
+        ],
+        [
+          new import_three.Mesh(new import_three.CylinderGeometry(0.2, 0, 0.6, 4), matInvisible),
+          [-0.3, 0, 0],
+          [0, 0, Math.PI / 2]
+        ]
+      ],
+      Y: [
+        [
+          new import_three.Mesh(new import_three.CylinderGeometry(0.2, 0, 0.6, 4), matInvisible),
+          [0, 0.3, 0]
+        ],
+        [
+          new import_three.Mesh(new import_three.CylinderGeometry(0.2, 0, 0.6, 4), matInvisible),
+          [0, -0.3, 0],
+          [0, 0, Math.PI]
+        ]
+      ],
+      Z: [
+        [
+          new import_three.Mesh(new import_three.CylinderGeometry(0.2, 0, 0.6, 4), matInvisible),
+          [0, 0, 0.3],
+          [Math.PI / 2, 0, 0]
+        ],
+        [
+          new import_three.Mesh(new import_three.CylinderGeometry(0.2, 0, 0.6, 4), matInvisible),
+          [0, 0, -0.3],
+          [-Math.PI / 2, 0, 0]
+        ]
+      ]
+    };
+    const helperTranslate = {
+      START: [
+        [
+          new import_three.Mesh(new import_three.OctahedronGeometry(0.01, 2), matHelper),
+          null,
+          null,
+          null,
+          "helper"
+        ]
+      ],
+      END: [
+        [
+          new import_three.Mesh(new import_three.OctahedronGeometry(0.01, 2), matHelper),
+          null,
+          null,
+          null,
+          "helper"
+        ]
+      ],
+      DELTA: [
+        [
+          new import_three.Line(TranslateHelperGeometry(), matHelper),
+          null,
+          null,
+          null,
+          "helper"
+        ]
+      ]
+    };
+    const gizmoRotate = {
+      X: [[new import_three.Mesh(CircleGeometry(0.45, 0.25), matRed)]],
+      Y: [
+        [
+          new import_three.Mesh(CircleGeometry(0.45, 0.25), matGreen),
+          null,
+          [0, 0, -Math.PI / 2]
+        ]
+      ],
+      Z: [
+        [
+          new import_three.Mesh(CircleGeometry(0.45, 0.25), matBlue),
+          null,
+          [0, Math.PI / 2, 0]
+        ]
+      ]
+    };
+    const helperRotate = {
+      AXIS: [],
+      START: [
+        [new import_three.Line(lineGeometry.clone(), matHelper), null, null, null, "helper"]
+      ],
+      END: [
+        [new import_three.Line(lineGeometry.clone(), matHelper), null, null, null, "helper"]
+      ],
+      ARC: [
+        [new import_three.Line(new import_three.BufferGeometry(), matHelper), null, null, null, "helper"]
+      ]
+    };
+    const pickerRotate = {
+      X: [[new import_three.Mesh(CircleGeometry(0.45, 0.25), matRed)]],
+      Y: [
+        [
+          new import_three.Mesh(CircleGeometry(0.45, 0.25), matGreen),
+          null,
+          [0, 0, -Math.PI / 2]
+        ]
+      ],
+      Z: [
+        [
+          new import_three.Mesh(CircleGeometry(0.45, 0.25), matBlue),
+          null,
+          [0, Math.PI / 2, 0]
+        ]
+      ]
+    };
+    const gizmoScale = {
+      X: [
+        [
+          new import_three.Mesh(scaleHandleGeometry, matRed),
+          [0.7, 0, 0],
+          [0, 0, -Math.PI / 2]
+        ]
+      ],
+      Y: [[new import_three.Mesh(scaleHandleGeometry, matGreen), [0, 0.7, 0]]],
+      Z: [
+        [
+          new import_three.Mesh(scaleHandleGeometry, matBlue),
+          [0, 0, 0.7],
+          [Math.PI / 2, 0, 0]
+        ]
+      ]
+    };
+    const pickerScale = {
+      X: [
+        [
+          new import_three.Mesh(new import_three.BoxGeometry(0.2, 0.2, 0.2), matInvisible),
+          [0.7, 0, 0],
+          [0, 0, -Math.PI / 2]
+        ]
+      ],
+      Y: [
+        [new import_three.Mesh(new import_three.BoxGeometry(0.2, 0.2, 0.2), matInvisible), [0, 0.7, 0]]
+      ],
+      Z: [
+        [
+          new import_three.Mesh(new import_three.BoxGeometry(0.2, 0.2, 0.2), matInvisible),
+          [0, 0, 0.7],
+          [Math.PI / 2, 0, 0]
+        ]
+      ]
+    };
+    const helperScale = {
+      X: [],
+      Y: [],
+      Z: []
+    };
+    function setupGizmo(gizmoMap) {
+      const gizmo = new import_three.Object3D();
+      for (const name in gizmoMap) {
+        for (let i = gizmoMap[name].length; i--; ) {
+          const object = gizmoMap[name][i][0].clone();
+          object.userData.type = "gizmo";
+          const position = gizmoMap[name][i][1];
+          const rotation = gizmoMap[name][i][2];
+          const scale = gizmoMap[name][i][3];
+          const tag = gizmoMap[name][i][4];
+          object.name = name;
+          object.tag = tag;
+          if (position) {
+            object.position.set(position[0], position[1], position[2]);
+          }
+          if (rotation) {
+            object.rotation.set(rotation[0], rotation[1], rotation[2]);
+          }
+          if (scale) {
+            object.scale.set(scale[0], scale[1], scale[2]);
+          }
+          object.updateMatrix();
+          const tempGeometry = object.geometry.clone();
+          tempGeometry.applyMatrix4(object.matrix);
+          object.geometry = tempGeometry;
+          object.renderOrder = Infinity;
+          object.position.set(0, 0, 0);
+          object.rotation.set(0, 0, 0);
+          object.scale.set(1, 1, 1);
+          gizmo.add(object);
+        }
+      }
+      return gizmo;
+    }
+    this.gizmo = {};
+    this.picker = {};
+    this.helper = {};
+    this.add(this.gizmo["translate"] = setupGizmo(gizmoTranslate));
+    this.add(this.gizmo["rotate"] = setupGizmo(gizmoRotate));
+    this.add(this.gizmo["scale"] = setupGizmo(gizmoScale));
+    this.add(this.picker["translate"] = setupGizmo(pickerTranslate));
+    this.add(this.picker["rotate"] = setupGizmo(pickerRotate));
+    this.add(this.picker["scale"] = setupGizmo(pickerScale));
+    this.add(this.helper["translate"] = setupGizmo(helperTranslate));
+    this.add(this.helper["rotate"] = setupGizmo(helperRotate));
+    this.add(this.helper["scale"] = setupGizmo(helperScale));
+    this.picker["translate"].visible = false;
+    this.picker["rotate"].visible = false;
+    this.picker["scale"].visible = false;
+  }
+  // updateMatrixWorld will update transformations and appearance of individual handles
+  updateMatrixWorld(force) {
+    const space = this.mode === "scale" ? "local" : this.space;
+    const quaternion = space === "local" ? this.worldQuaternion : _identityQuaternion;
+    if (this.mode === "all") {
+      this.gizmo["translate"].visible = true;
+      this.gizmo["rotate"].visible = true;
+      this.gizmo["scale"].visible = true;
+      this.helper["translate"].visible = true;
+      this.helper["rotate"].visible = true;
+      this.helper["scale"].visible = false;
+    } else {
+      this.gizmo["translate"].visible = this.mode === "translate";
+      this.gizmo["rotate"].visible = this.mode === "rotate";
+      this.gizmo["scale"].visible = this.mode === "scale";
+      this.helper["translate"].visible = this.mode === "translate";
+      this.helper["rotate"].visible = this.mode === "rotate";
+      this.helper["scale"].visible = this.mode === "scale";
+    }
+    let handles = [];
+    if (this.mode === "all") {
+      handles = handles.concat(this.picker["translate"].children);
+      handles = handles.concat(this.picker["rotate"].children);
+      handles = handles.concat(this.picker["scale"].children);
+      handles = handles.concat(this.gizmo["translate"].children);
+      handles = handles.concat(this.gizmo["rotate"].children);
+      handles = handles.concat(this.gizmo["scale"].children);
+      handles = handles.concat(this.helper["translate"].children);
+      handles = handles.concat(this.helper["rotate"].children);
+    } else {
+      handles = handles.concat(this.picker[this.mode].children);
+      handles = handles.concat(this.gizmo[this.mode].children);
+      handles = handles.concat(this.helper[this.mode].children);
+    }
+    for (let i = 0; i < handles.length; i++) {
+      const handle = handles[i];
+      handle.visible = true;
+      handle.rotation.set(0, 0, 0);
+      handle.position.copy(this.worldPosition);
+      let factor;
+      if (this.camera.isOrthographicCamera) {
+        factor = (this.camera.top - this.camera.bottom) / this.camera.zoom;
+      } else {
+        factor = this.worldPosition.distanceTo(this.cameraPosition) * Math.min(
+          1.9 * Math.tan(Math.PI * this.camera.fov / 360) / this.camera.zoom,
+          7
+        );
+      }
+      handle.scale.set(1, 1, 1).multiplyScalar(factor * this.size / 4);
+      if (handle.tag === "helper") {
+        handle.visible = false;
+        if (handle.name === "AXIS") {
+          handle.visible = !!this.axis;
+          if (this.axis === "X") {
+            _tempQuaternion.setFromEuler(_tempEuler.set(0, 0, 0));
+            handle.quaternion.copy(quaternion).multiply(_tempQuaternion);
+            if (Math.abs(
+              _alignVector.copy(_unitX).applyQuaternion(quaternion).dot(this.eye)
+            ) > 0.9) {
+              handle.visible = false;
+            }
+          }
+          if (this.axis === "Y") {
+            _tempQuaternion.setFromEuler(_tempEuler.set(0, 0, Math.PI / 2));
+            handle.quaternion.copy(quaternion).multiply(_tempQuaternion);
+            if (Math.abs(
+              _alignVector.copy(_unitY).applyQuaternion(quaternion).dot(this.eye)
+            ) > 0.9) {
+              handle.visible = false;
+            }
+          }
+          if (this.axis === "Z") {
+            _tempQuaternion.setFromEuler(_tempEuler.set(0, Math.PI / 2, 0));
+            handle.quaternion.copy(quaternion).multiply(_tempQuaternion);
+            if (Math.abs(
+              _alignVector.copy(_unitZ).applyQuaternion(quaternion).dot(this.eye)
+            ) > 0.9) {
+              handle.visible = false;
+            }
+          }
+          if (this.axis === "XYZE") {
+            _tempQuaternion.setFromEuler(_tempEuler.set(0, Math.PI / 2, 0));
+            _alignVector.copy(this.rotationAxis);
+            handle.quaternion.setFromRotationMatrix(
+              _lookAtMatrix.lookAt(_zeroVector, _alignVector, _unitY)
+            );
+            handle.quaternion.multiply(_tempQuaternion);
+            handle.visible = this.dragging;
+          }
+          if (this.axis === "E") {
+            handle.visible = false;
+          }
+        } else if (handle.name === "START") {
+          if (this.mode === "rotate" || this.mode === "all") {
+            handle.position.copy(this.worldPosition);
+            const isRotating = this.mode === "rotate" || this.mode === "all" && this.activeMode === "rotate";
+            handle.visible = this.dragging && isRotating;
+            if (handle.visible) {
+              const rotSpace = this.space;
+              if (rotSpace === "local") {
+                handle.quaternion.copy(this.worldQuaternionStart);
+              } else {
+                handle.quaternion.copy(_identityQuaternion);
+              }
+              let rotAxis = new import_three.Vector3();
+              if (this.axis === "X" || this.axis === "Y" || this.axis === "Z") {
+                rotAxis.copy(_unit[this.axis]);
+              } else if (this.axis === "E" || this.axis === "XYZE") {
+                rotAxis.copy(this.rotationAxis);
+                if (rotSpace === "local") {
+                  rotAxis.applyQuaternion(
+                    this.worldQuaternionStart.clone().invert()
+                  );
+                }
+              }
+              let startPoint = this.pointStart.clone();
+              if (rotSpace === "local") {
+                startPoint.applyQuaternion(
+                  this.worldQuaternionStart.clone().invert()
+                );
+              }
+              const dotProduct = startPoint.dot(rotAxis);
+              startPoint.sub(rotAxis.clone().multiplyScalar(dotProduct));
+              startPoint.normalize();
+              startPoint.multiplyScalar(0.45);
+              const startLineGeometry = new import_three.BufferGeometry();
+              startLineGeometry.setAttribute(
+                "position",
+                new import_three.Float32BufferAttribute(
+                  [0, 0, 0, startPoint.x, startPoint.y, startPoint.z],
+                  3
+                )
+              );
+              handle.geometry.dispose();
+              handle.geometry = startLineGeometry;
+            }
+          } else {
+            handle.position.copy(this.worldPositionStart);
+            handle.visible = this.dragging && this.mode === "translate";
+          }
+        } else if (handle.name === "ARC") {
+          const isRotating = this.mode === "rotate" || this.mode === "all" && this.activeMode === "rotate";
+          handle.visible = this.dragging && isRotating;
+          if (handle.visible && this.rotationAngle !== 0) {
+            handle.position.copy(this.worldPosition);
+            const rotSpace = this.space;
+            if (rotSpace === "local") {
+              handle.quaternion.copy(this.worldQuaternionStart);
+            } else {
+              handle.quaternion.copy(_identityQuaternion);
+            }
+            const arcRadius = 0.45;
+            const segments = Math.max(
+              8,
+              Math.floor(Math.abs(this.rotationAngle) * 50)
+            );
+            const arcPoints = [];
+            let rotAxis = new import_three.Vector3();
+            if (this.axis === "X" || this.axis === "Y" || this.axis === "Z") {
+              rotAxis.copy(_unit[this.axis]);
+              if (rotSpace !== "local") {
+              }
+            } else if (this.axis === "E" || this.axis === "XYZE") {
+              rotAxis.copy(this.rotationAxis);
+              if (rotSpace === "local") {
+                rotAxis.applyQuaternion(
+                  this.worldQuaternionStart.clone().invert()
+                );
+              }
+            }
+            let startDir = this.pointStart.clone();
+            if (rotSpace === "local") {
+              startDir.applyQuaternion(
+                this.worldQuaternionStart.clone().invert()
+              );
+            }
+            const dotProduct = startDir.dot(rotAxis);
+            startDir.sub(rotAxis.clone().multiplyScalar(dotProduct));
+            startDir.normalize();
+            for (let j = 0; j <= segments; j++) {
+              const angle = this.rotationAngle * j / segments;
+              const point = startDir.clone();
+              const arcQuat = new import_three.Quaternion().setFromAxisAngle(rotAxis, angle);
+              point.applyQuaternion(arcQuat);
+              point.multiplyScalar(arcRadius);
+              arcPoints.push(point.x, point.y, point.z);
+            }
+            const arcGeometry = new import_three.BufferGeometry();
+            arcGeometry.setAttribute(
+              "position",
+              new import_three.Float32BufferAttribute(arcPoints, 3)
+            );
+            handle.geometry.dispose();
+            handle.geometry = arcGeometry;
+          }
+        } else if (handle.name === "END") {
+          if (this.mode === "rotate" || this.mode === "all") {
+            handle.position.copy(this.worldPosition);
+            const isRotating = this.mode === "rotate" || this.mode === "all" && this.activeMode === "rotate";
+            handle.visible = this.dragging && isRotating;
+            if (handle.visible) {
+              const rotSpace = this.space;
+              if (rotSpace === "local") {
+                handle.quaternion.copy(this.worldQuaternionStart);
+              } else {
+                handle.quaternion.copy(_identityQuaternion);
+              }
+              const endLineGeometry = new import_three.BufferGeometry();
+              let rotAxis = new import_three.Vector3();
+              if (this.axis === "X" || this.axis === "Y" || this.axis === "Z") {
+                rotAxis.copy(_unit[this.axis]);
+              } else if (this.axis === "E" || this.axis === "XYZE") {
+                rotAxis.copy(this.rotationAxis);
+                if (rotSpace === "local") {
+                  rotAxis.applyQuaternion(
+                    this.worldQuaternionStart.clone().invert()
+                  );
+                }
+              }
+              let startDir = this.pointStart.clone();
+              if (rotSpace === "local") {
+                startDir.applyQuaternion(
+                  this.worldQuaternionStart.clone().invert()
+                );
+              }
+              const dotProduct = startDir.dot(rotAxis);
+              startDir.sub(rotAxis.clone().multiplyScalar(dotProduct));
+              startDir.normalize();
+              const endPoint = startDir.clone();
+              const arcQuat = new import_three.Quaternion().setFromAxisAngle(
+                rotAxis,
+                this.rotationAngle
+              );
+              endPoint.applyQuaternion(arcQuat);
+              endPoint.multiplyScalar(0.45);
+              endLineGeometry.setAttribute(
+                "position",
+                new import_three.Float32BufferAttribute(
+                  [0, 0, 0, endPoint.x, endPoint.y, endPoint.z],
+                  3
+                )
+              );
+              handle.geometry.dispose();
+              handle.geometry = endLineGeometry;
+            }
+          } else {
+            handle.position.copy(this.worldPosition);
+            handle.visible = false;
+          }
+        } else if (handle.name === "DELTA") {
+          handle.position.copy(this.worldPositionStart);
+          handle.quaternion.copy(this.worldQuaternionStart);
+          _tempVector.set(1e-10, 1e-10, 1e-10).add(this.worldPositionStart).sub(this.worldPosition).multiplyScalar(-1);
+          _tempVector.applyQuaternion(
+            this.worldQuaternionStart.clone().invert()
+          );
+          handle.scale.copy(_tempVector);
+          handle.visible = this.dragging;
+        } else {
+          handle.quaternion.copy(quaternion);
+          if (this.dragging) {
+            handle.position.copy(this.worldPositionStart);
+          } else {
+            handle.position.copy(this.worldPosition);
+          }
+          if (this.axis) {
+            handle.visible = this.axis.search(handle.name) !== -1;
+          }
+        }
+        continue;
+      }
+      handle.quaternion.copy(quaternion);
+      if (this.mode === "translate" || this.mode === "scale") {
+        const AXIS_HIDE_THRESHOLD = 0.99;
+        const PLANE_HIDE_THRESHOLD = 0.2;
+        if (handle.name === "X") {
+          if (Math.abs(
+            _alignVector.copy(_unitX).applyQuaternion(quaternion).dot(this.eye)
+          ) > AXIS_HIDE_THRESHOLD) {
+            handle.scale.set(1e-10, 1e-10, 1e-10);
+            handle.visible = false;
+          }
+        }
+        if (handle.name === "Y") {
+          if (Math.abs(
+            _alignVector.copy(_unitY).applyQuaternion(quaternion).dot(this.eye)
+          ) > AXIS_HIDE_THRESHOLD) {
+            handle.scale.set(1e-10, 1e-10, 1e-10);
+            handle.visible = false;
+          }
+        }
+        if (handle.name === "Z") {
+          if (Math.abs(
+            _alignVector.copy(_unitZ).applyQuaternion(quaternion).dot(this.eye)
+          ) > AXIS_HIDE_THRESHOLD) {
+            handle.scale.set(1e-10, 1e-10, 1e-10);
+            handle.visible = false;
+          }
+        }
+        if (handle.name === "XY") {
+          if (Math.abs(
+            _alignVector.copy(_unitZ).applyQuaternion(quaternion).dot(this.eye)
+          ) < PLANE_HIDE_THRESHOLD) {
+            handle.scale.set(1e-10, 1e-10, 1e-10);
+            handle.visible = false;
+          }
+        }
+        if (handle.name === "YZ") {
+          if (Math.abs(
+            _alignVector.copy(_unitX).applyQuaternion(quaternion).dot(this.eye)
+          ) < PLANE_HIDE_THRESHOLD) {
+            handle.scale.set(1e-10, 1e-10, 1e-10);
+            handle.visible = false;
+          }
+        }
+        if (handle.name === "XZ") {
+          if (Math.abs(
+            _alignVector.copy(_unitY).applyQuaternion(quaternion).dot(this.eye)
+          ) < PLANE_HIDE_THRESHOLD) {
+            handle.scale.set(1e-10, 1e-10, 1e-10);
+            handle.visible = false;
+          }
+        }
+      } else if (this.mode === "rotate") {
+        _tempQuaternion2.copy(quaternion);
+        _alignVector.copy(this.eye).applyQuaternion(_tempQuaternion.copy(quaternion).invert());
+        if (handle.name.search("E") !== -1) {
+          handle.quaternion.setFromRotationMatrix(
+            _lookAtMatrix.lookAt(this.eye, _zeroVector, _unitY)
+          );
+        }
+        if (handle.name === "X") {
+          _tempQuaternion.setFromAxisAngle(
+            _unitX,
+            Math.atan2(-_alignVector.y, _alignVector.z)
+          );
+          _tempQuaternion.multiplyQuaternions(_tempQuaternion2, _tempQuaternion);
+          handle.quaternion.copy(_tempQuaternion);
+        }
+        if (handle.name === "Y") {
+          _tempQuaternion.setFromAxisAngle(
+            _unitY,
+            Math.atan2(_alignVector.x, _alignVector.z)
+          );
+          _tempQuaternion.multiplyQuaternions(_tempQuaternion2, _tempQuaternion);
+          handle.quaternion.copy(_tempQuaternion);
+        }
+        if (handle.name === "Z") {
+          _tempQuaternion.setFromAxisAngle(
+            _unitZ,
+            Math.atan2(_alignVector.y, _alignVector.x)
+          );
+          _tempQuaternion.multiplyQuaternions(_tempQuaternion2, _tempQuaternion);
+          handle.quaternion.copy(_tempQuaternion);
+        }
+      }
+      handle.visible = handle.visible && (handle.name.indexOf("X") === -1 || this.showX);
+      handle.visible = handle.visible && (handle.name.indexOf("Y") === -1 || this.showY);
+      handle.visible = handle.visible && (handle.name.indexOf("Z") === -1 || this.showZ);
+      handle.visible = handle.visible && (handle.name.indexOf("E") === -1 || this.showX && this.showY && this.showZ);
+      handle.material._color = handle.material._color || handle.material.color.clone();
+      handle.material._opacity = handle.material._opacity || handle.material.opacity;
+      handle.material.color.copy(handle.material._color);
+      handle.material.opacity = handle.material._opacity;
+      if (this.dragging) {
+        handle.material.opacity = 0.2;
+      }
+      if (this.enabled && this.axis) {
+        if (handle.name === this.axis) {
+          handle.material.color.setHex(16776960);
+          if (!this.dragging) {
+            handle.material.opacity = 1;
+          }
+        } else if (this.axis.split("").some(function(a) {
+          return handle.name === a;
+        })) {
+          handle.material.color.setHex(16776960);
+          if (!this.dragging) {
+            handle.material.opacity = 1;
+          }
+        }
+      }
+    }
+    super.updateMatrixWorld(force);
+  }
+};
+var TransformControlsPlane = class extends import_three.Mesh {
+  constructor() {
+    super(
+      new import_three.PlaneGeometry(1e5, 1e5, 2, 2),
+      new import_three.MeshBasicMaterial({
+        visible: false,
+        wireframe: true,
+        side: import_three.DoubleSide,
+        transparent: true,
+        opacity: 0.1,
+        toneMapped: false
+      })
+    );
+    this.isTransformControlsPlane = true;
+    this.type = "TransformControlsPlane";
+  }
+  updateMatrixWorld(force) {
+    let space = this.space;
+    this.position.copy(this.worldPosition);
+    if (this.mode === "scale") space = "local";
+    _v1.copy(_unitX).applyQuaternion(
+      space === "local" ? this.worldQuaternion : _identityQuaternion
+    );
+    _v2.copy(_unitY).applyQuaternion(
+      space === "local" ? this.worldQuaternion : _identityQuaternion
+    );
+    _v3.copy(_unitZ).applyQuaternion(
+      space === "local" ? this.worldQuaternion : _identityQuaternion
+    );
+    _alignVector.copy(_v2);
+    switch (this.mode) {
+      case "translate":
+      case "scale":
+        switch (this.axis) {
+          case "X":
+            _alignVector.copy(this.eye).cross(_v1);
+            _dirVector.copy(_v1).cross(_alignVector);
+            break;
+          case "Y":
+            _alignVector.copy(this.eye).cross(_v2);
+            _dirVector.copy(_v2).cross(_alignVector);
+            break;
+          case "Z":
+            _alignVector.copy(this.eye).cross(_v3);
+            _dirVector.copy(_v3).cross(_alignVector);
+            break;
+          case "XY":
+            _dirVector.copy(_v3);
+            break;
+          case "YZ":
+            _dirVector.copy(_v1);
+            break;
+          case "XZ":
+            _alignVector.copy(_v3);
+            _dirVector.copy(_v2);
+            break;
+          case "XYZ":
+          case "E":
+            _dirVector.set(0, 0, 0);
+            break;
+        }
+        break;
+      case "rotate":
+      default:
+        _dirVector.set(0, 0, 0);
+    }
+    if (_dirVector.length() === 0) {
+      this.quaternion.copy(this.cameraQuaternion);
+    } else {
+      _tempMatrix.lookAt(_tempVector.set(0, 0, 0), _dirVector, _alignVector);
+      this.quaternion.setFromRotationMatrix(_tempMatrix);
+    }
+    super.updateMatrixWorld(force);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TransformControls,
+  TransformControlsGizmo,
+  TransformControlsPlane,
+  calculateBoundingBoxCenter
+});
+//# sourceMappingURL=index.cjs.map