@tonybfox/threejs-tools 1.0.0

package/dist/compass/index.cjs

@@ -0,0 +1,375 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/compass/src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CompassOverlay: () => CompassOverlay
+});
+module.exports = __toCommonJS(src_exports);
+
+// packages/compass/src/CompassOverlay.ts
+var THREE = __toESM(require("three"));
+var CompassOverlay = class extends THREE.EventDispatcher {
+  constructor(camera, options = {}) {
+    super();
+    this.isActive = false;
+    this.currentRotation = 0;
+    this.camera = camera;
+    this.options = {
+      container: options.container || document.body,
+      size: options.size || 100,
+      position: options.position || "bottom-right",
+      offset: options.offset || { x: 20, y: 20 },
+      colors: {
+        background: options.colors?.background || "#1a1a1a",
+        border: options.colors?.border || "#333333",
+        arrow: options.colors?.arrow || "#ff4444",
+        text: options.colors?.text || "#ffffff",
+        ticks: options.colors?.ticks || "#666666",
+        ...options.colors
+      }
+    };
+    this.container = this.options.container;
+    this.createCompassElement();
+    this.setupStyles();
+  }
+  createCompassElement() {
+    this.compassElement = document.createElement("div");
+    this.compassElement.className = "threejs-compass-overlay";
+    const compassBg = document.createElement("div");
+    compassBg.className = "compass-background";
+    const directions = [
+      { label: "N", angle: 0 },
+      { label: "E", angle: 90 },
+      { label: "S", angle: 180 },
+      { label: "W", angle: 270 }
+    ];
+    for (let i = 0; i < 360; i += 11.25) {
+      const tick = document.createElement("div");
+      tick.className = i % 45 === 0 ? "compass-tick-major" : "compass-tick-minor";
+      const tickLength = i % 30 === 0 ? 8 : 4;
+      tick.style.transform = `rotate(${i}deg) translateY(-${this.options.size / 2 - tickLength - 2}px)`;
+      compassBg.appendChild(tick);
+    }
+    directions.forEach(({ label, angle }) => {
+      const dirLabel = document.createElement("div");
+      dirLabel.className = "compass-label";
+      dirLabel.textContent = label;
+      dirLabel.style.transform = `rotate(${angle}deg) translateY(-${this.options.size / 2 - 15}px) rotate(-${angle}deg)`;
+      compassBg.appendChild(dirLabel);
+    });
+    this.arrowElement = document.createElement("div");
+    this.arrowElement.className = "compass-arrow";
+    this.arrowElement.innerHTML = `
+      <svg width="20" height="20" viewBox="0 0 20 20">
+        <polygon points="10,2 14,12 10,10 6,12" fill="${this.options.colors.arrow}" stroke="#000" stroke-width="0.5"/>
+      </svg>
+    `;
+    this.compassElement.appendChild(compassBg);
+    this.compassElement.appendChild(this.arrowElement);
+    this.container.appendChild(this.compassElement);
+    this.setupDoubleClickHandler();
+  }
+  setupStyles() {
+    if (document.getElementById("threejs-compass-styles")) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "threejs-compass-styles";
+    style.textContent = `
+      .threejs-compass-overlay {
+        position: fixed;
+        width: ${this.options.size}px;
+        height: ${this.options.size}px;
+        background: ${this.options.colors.background};
+        border: 2px solid ${this.options.colors.border};
+        border-radius: 50%;
+        z-index: 1000;
+        pointer-events: none;
+        user-select: none;
+        transition: opacity 0.2s ease;
+        ${this.getPositionStyles()};
+      }
+
+      .compass-background {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+      }
+
+      .compass-label {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform-origin: center;
+        color: ${this.options.colors.text};
+        font-family: Arial, sans-serif;
+        font-size: 12px;
+        font-weight: bold;
+        text-align: center;
+        width: 12px;
+        height: 12px;
+        line-height: 12px;
+        margin-left: -6px;
+        margin-top: -6px;
+      }
+
+      .compass-tick-major {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 2px;
+        height: 8px;
+        background: ${this.options.colors.ticks};
+        transform-origin: center top;
+        margin-left: -1px;
+        margin-top: -4px;
+      }
+
+      .compass-tick-minor {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 1px;
+        height: 4px;
+        background: ${this.options.colors.ticks};
+        transform-origin: center top;
+        margin-left: -0.5px;
+        margin-top: -2px;
+        opacity: 0.6;
+      }
+
+      .compass-arrow {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        transform-origin: center;
+        transition: transform 0.1s ease-out;
+        z-index: 1;
+      }
+
+      .compass-arrow svg {
+        display: block;
+        filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  setupDoubleClickHandler() {
+    this.compassElement.style.pointerEvents = "auto";
+    this.compassElement.style.cursor = "pointer";
+    this.compassElement.addEventListener("dblclick", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.dispatchEvent({ type: "resetToNorth" });
+    });
+    this.compassElement.addEventListener("mouseenter", () => {
+      this.compassElement.style.opacity = "0.8";
+    });
+    this.compassElement.addEventListener("mouseleave", () => {
+      this.compassElement.style.opacity = "1";
+    });
+  }
+  updateTicksAndLabels() {
+    const majorTicks = this.compassElement.querySelectorAll(
+      ".compass-tick-major"
+    );
+    const minorTicks = this.compassElement.querySelectorAll(
+      ".compass-tick-minor"
+    );
+    majorTicks.forEach((tick, index) => {
+      const angle = index * 30 % 360;
+      const tickLength = 8;
+      tick.style.transform = `rotate(${angle}deg) translateY(-${this.options.size / 2 - tickLength - 2}px)`;
+    });
+    minorTicks.forEach((tick, index) => {
+      const allAngles = [];
+      for (let i = 0; i < 360; i += 10) {
+        if (i % 30 !== 0) {
+          allAngles.push(i);
+        }
+      }
+      const angle = allAngles[index] || 0;
+      const tickLength = 4;
+      tick.style.transform = `rotate(${angle}deg) translateY(-${this.options.size / 2 - tickLength - 2}px)`;
+    });
+    const labels = this.compassElement.querySelectorAll(".compass-label");
+    labels.forEach((label, index) => {
+      const directions = [
+        { label: "N", angle: 0 },
+        { label: "E", angle: 90 },
+        { label: "S", angle: 180 },
+        { label: "W", angle: 270 }
+      ];
+      const { angle } = directions[index];
+      label.style.transform = `rotate(${angle}deg) translateY(-${this.options.size / 2 - 15}px) rotate(-${angle}deg)`;
+    });
+  }
+  getPositionStyles() {
+    const { position, offset } = this.options;
+    switch (position) {
+      case "top-left":
+        return `top: ${offset.y}px; left: ${offset.x}px;`;
+      case "top-right":
+        return `top: ${offset.y}px; right: ${offset.x}px;`;
+      case "bottom-left":
+        return `bottom: ${offset.y}px; left: ${offset.x}px;`;
+      case "bottom-right":
+      default:
+        return `bottom: ${offset.y}px; right: ${offset.x}px;`;
+    }
+  }
+  start() {
+    if (this.isActive) return;
+    this.isActive = true;
+    this.update();
+  }
+  stop() {
+    this.isActive = false;
+  }
+  update() {
+    if (!this.isActive) return;
+    const cameraMatrix = new THREE.Matrix4();
+    this.camera.updateMatrixWorld();
+    cameraMatrix.copy(this.camera.matrixWorld);
+    const forward = new THREE.Vector3(0, 0, -1);
+    forward.transformDirection(cameraMatrix);
+    forward.y = 0;
+    forward.normalize();
+    const targetAngle = Math.atan2(-forward.x, -forward.z) * (180 / Math.PI);
+    let angleDiff = targetAngle - this.currentRotation;
+    while (angleDiff > 180) angleDiff -= 360;
+    while (angleDiff < -180) angleDiff += 360;
+    this.currentRotation += angleDiff;
+    this.arrowElement.style.transform = `translate(-50%, -50%) rotate(${-this.currentRotation}deg)`;
+    if (this.isActive) {
+      requestAnimationFrame(() => this.update());
+    }
+  }
+  setCamera(camera) {
+    this.camera = camera;
+  }
+  setSize(size) {
+    this.options.size = size;
+    this.compassElement.style.width = `${size}px`;
+    this.compassElement.style.height = `${size}px`;
+    this.updateTicksAndLabels();
+    this.updateStyles();
+  }
+  setPosition(position, offset) {
+    if (position) {
+      this.options.position = position;
+    }
+    if (offset) {
+      this.options.offset = offset;
+    }
+    const positionStyles = this.getPositionStyles();
+    const styles = positionStyles.split(";").filter((s) => s.trim());
+    this.compassElement.style.top = "";
+    this.compassElement.style.right = "";
+    this.compassElement.style.bottom = "";
+    this.compassElement.style.left = "";
+    styles.forEach((style) => {
+      const [property, value] = style.split(":").map((s) => s.trim());
+      if (property && value) {
+        ;
+        this.compassElement.style[property] = value;
+      }
+    });
+  }
+  setColors(colors) {
+    this.options.colors = { ...this.options.colors, ...colors };
+    this.updateStyles();
+  }
+  /**
+   * Helper method to reset camera to look north (world Z- direction)
+   * This is a convenience method that can be called when handling the 'resetToNorth' event
+   */
+  static resetCameraToNorth(camera, smooth = true) {
+    if (smooth) {
+      const startQuaternion = camera.quaternion.clone();
+      const targetQuaternion = new THREE.Quaternion();
+      const targetMatrix = new THREE.Matrix4();
+      targetMatrix.lookAt(
+        camera.position,
+        camera.position.clone().add(new THREE.Vector3(0, 0, -1)),
+        new THREE.Vector3(0, 1, 0)
+      );
+      targetQuaternion.setFromRotationMatrix(targetMatrix);
+      const duration = 500;
+      const startTime = Date.now();
+      const animate = () => {
+        const elapsed = Date.now() - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const easeProgress = 1 - Math.pow(1 - progress, 3);
+        camera.quaternion.slerpQuaternions(
+          startQuaternion,
+          targetQuaternion,
+          easeProgress
+        );
+        if (progress < 1) {
+          requestAnimationFrame(animate);
+        }
+      };
+      animate();
+    } else {
+      camera.lookAt(camera.position.clone().add(new THREE.Vector3(0, 0, -1)));
+    }
+  }
+  updateStyles() {
+    const existingStyle = document.getElementById("threejs-compass-styles");
+    if (existingStyle) {
+      existingStyle.remove();
+    }
+    this.setupStyles();
+  }
+  dispose() {
+    this.stop();
+    if (this.compassElement && this.compassElement.parentNode) {
+      this.compassElement.parentNode.removeChild(this.compassElement);
+    }
+    const compassElements = document.querySelectorAll(
+      ".threejs-compass-overlay"
+    );
+    if (compassElements.length === 0) {
+      const style = document.getElementById("threejs-compass-styles");
+      if (style) {
+        style.remove();
+      }
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CompassOverlay
+});
+//# sourceMappingURL=index.cjs.map

package/dist/compass/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../packages/compass/src/index.ts","../../packages/compass/src/CompassOverlay.ts"],"sourcesContent":["export * from './CompassOverlay'\n","import * as THREE from 'three'\n\nexport interface CompassOverlayOptions {\n  container?: HTMLElement\n  size?: number\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  offset?: { x: number; y: number }\n  colors?: {\n    background: string\n    border: string\n    arrow: string\n    text: string\n    ticks: string\n  }\n}\n\n// Define event types for the compass\ninterface CompassOverlayEventMap {\n  resetToNorth: {}\n}\n\nexport interface CompassOverlayEvent {\n  type: 'resetToNorth'\n}\n\nexport class CompassOverlay extends THREE.EventDispatcher<CompassOverlayEventMap> {\n  private camera: THREE.Camera\n  private container: HTMLElement\n  private compassElement!: HTMLElement\n  private arrowElement!: HTMLElement\n  private isActive: boolean = false\n  private options: Required<CompassOverlayOptions>\n  private currentRotation: number = 0\n\n  constructor(camera: THREE.Camera, options: CompassOverlayOptions = {}) {\n    super()\n    this.camera = camera\n\n    // Set default options\n    this.options = {\n      container: options.container || document.body,\n      size: options.size || 100,\n      position: options.position || 'bottom-right',\n      offset: options.offset || { x: 20, y: 20 },\n      colors: {\n        background: options.colors?.background || '#1a1a1a',\n        border: options.colors?.border || '#333333',\n        arrow: options.colors?.arrow || '#ff4444',\n        text: options.colors?.text || '#ffffff',\n        ticks: options.colors?.ticks || '#666666',\n        ...options.colors,\n      },\n    }\n\n    this.container = this.options.container\n    this.createCompassElement()\n    this.setupStyles()\n  }\n\n  private createCompassElement(): void {\n    // Create main compass container\n    this.compassElement = document.createElement('div')\n    this.compassElement.className = 'threejs-compass-overlay'\n\n    // Create compass background with ticks\n    const compassBg = document.createElement('div')\n    compassBg.className = 'compass-background'\n\n    // Create cardinal direction labels\n    const directions = [\n      { label: 'N', angle: 0 },\n      { label: 'E', angle: 90 },\n      { label: 'S', angle: 180 },\n      { label: 'W', angle: 270 },\n    ]\n\n    // Create tick marks\n    for (let i = 0; i < 360; i += 11.25) {\n      const tick = document.createElement('div')\n      tick.className =\n        i % 45 === 0 ? 'compass-tick-major' : 'compass-tick-minor'\n      const tickLength = i % 30 === 0 ? 8 : 4\n      tick.style.transform = `rotate(${i}deg) translateY(-${this.options.size / 2 - tickLength - 2}px)`\n      compassBg.appendChild(tick)\n    }\n\n    directions.forEach(({ label, angle }) => {\n      const dirLabel = document.createElement('div')\n      dirLabel.className = 'compass-label'\n      dirLabel.textContent = label\n      dirLabel.style.transform = `rotate(${angle}deg) translateY(-${this.options.size / 2 - 15}px) rotate(-${angle}deg)`\n      compassBg.appendChild(dirLabel)\n    })\n\n    // Create arrow element\n    this.arrowElement = document.createElement('div')\n    this.arrowElement.className = 'compass-arrow'\n\n    // Arrow SVG\n    this.arrowElement.innerHTML = `\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n        <polygon points=\"10,2 14,12 10,10 6,12\" fill=\"${this.options.colors.arrow}\" stroke=\"#000\" stroke-width=\"0.5\"/>\n      </svg>\n    `\n\n    this.compassElement.appendChild(compassBg)\n    this.compassElement.appendChild(this.arrowElement)\n    this.container.appendChild(this.compassElement)\n\n    // Add double-click event to reset camera to north\n    this.setupDoubleClickHandler()\n  }\n\n  private setupStyles(): void {\n    // Check if styles already exist\n    if (document.getElementById('threejs-compass-styles')) {\n      return\n    }\n\n    const style = document.createElement('style')\n    style.id = 'threejs-compass-styles'\n    style.textContent = `\n      .threejs-compass-overlay {\n        position: fixed;\n        width: ${this.options.size}px;\n        height: ${this.options.size}px;\n        background: ${this.options.colors.background};\n        border: 2px solid ${this.options.colors.border};\n        border-radius: 50%;\n        z-index: 1000;\n        pointer-events: none;\n        user-select: none;\n        transition: opacity 0.2s ease;\n        ${this.getPositionStyles()};\n      }\n\n      .compass-background {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        border-radius: 50%;\n      }\n\n      .compass-label {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform-origin: center;\n        color: ${this.options.colors.text};\n        font-family: Arial, sans-serif;\n        font-size: 12px;\n        font-weight: bold;\n        text-align: center;\n        width: 12px;\n        height: 12px;\n        line-height: 12px;\n        margin-left: -6px;\n        margin-top: -6px;\n      }\n\n      .compass-tick-major {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 2px;\n        height: 8px;\n        background: ${this.options.colors.ticks};\n        transform-origin: center top;\n        margin-left: -1px;\n        margin-top: -4px;\n      }\n\n      .compass-tick-minor {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 1px;\n        height: 4px;\n        background: ${this.options.colors.ticks};\n        transform-origin: center top;\n        margin-left: -0.5px;\n        margin-top: -2px;\n        opacity: 0.6;\n      }\n\n      .compass-arrow {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        transform-origin: center;\n        transition: transform 0.1s ease-out;\n        z-index: 1;\n      }\n\n      .compass-arrow svg {\n        display: block;\n        filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));\n      }\n    `\n\n    document.head.appendChild(style)\n  }\n\n  private setupDoubleClickHandler(): void {\n    // Enable pointer events for interaction\n    this.compassElement.style.pointerEvents = 'auto'\n    this.compassElement.style.cursor = 'pointer'\n\n    // Add double-click event listener\n    this.compassElement.addEventListener('dblclick', (event) => {\n      event.preventDefault()\n      event.stopPropagation()\n\n      // Dispatch custom event\n      this.dispatchEvent({ type: 'resetToNorth' })\n    })\n\n    // Add visual feedback on hover\n    this.compassElement.addEventListener('mouseenter', () => {\n      this.compassElement.style.opacity = '0.8'\n    })\n\n    this.compassElement.addEventListener('mouseleave', () => {\n      this.compassElement.style.opacity = '1'\n    })\n  }\n\n  private updateTicksAndLabels(): void {\n    // Update compass labels\n\n    // Update tick marks\n    const majorTicks = this.compassElement.querySelectorAll(\n      '.compass-tick-major'\n    )\n    const minorTicks = this.compassElement.querySelectorAll(\n      '.compass-tick-minor'\n    )\n\n    majorTicks.forEach((tick, index) => {\n      const angle = (index * 30) % 360 // Major ticks every 30 degrees\n      const tickLength = 8\n      ;(tick as HTMLElement).style.transform =\n        `rotate(${angle}deg) translateY(-${this.options.size / 2 - tickLength - 2}px)`\n    })\n\n    minorTicks.forEach((tick, index) => {\n      // Minor ticks are at angles that aren't multiples of 30\n      const allAngles = []\n      for (let i = 0; i < 360; i += 10) {\n        if (i % 30 !== 0) {\n          // Skip major tick positions\n          allAngles.push(i)\n        }\n      }\n      const angle = allAngles[index] || 0\n      const tickLength = 4\n      ;(tick as HTMLElement).style.transform =\n        `rotate(${angle}deg) translateY(-${this.options.size / 2 - tickLength - 2}px)`\n    })\n\n    const labels = this.compassElement.querySelectorAll('.compass-label')\n    labels.forEach((label, index) => {\n      const directions = [\n        { label: 'N', angle: 0 },\n        { label: 'E', angle: 90 },\n        { label: 'S', angle: 180 },\n        { label: 'W', angle: 270 },\n      ]\n      const { angle } = directions[index]\n      ;(label as HTMLElement).style.transform =\n        `rotate(${angle}deg) translateY(-${this.options.size / 2 - 15}px) rotate(-${angle}deg)`\n    })\n  }\n\n  private getPositionStyles(): string {\n    const { position, offset } = this.options\n\n    switch (position) {\n      case 'top-left':\n        return `top: ${offset.y}px; left: ${offset.x}px;`\n      case 'top-right':\n        return `top: ${offset.y}px; right: ${offset.x}px;`\n      case 'bottom-left':\n        return `bottom: ${offset.y}px; left: ${offset.x}px;`\n      case 'bottom-right':\n      default:\n        return `bottom: ${offset.y}px; right: ${offset.x}px;`\n    }\n  }\n\n  public start(): void {\n    if (this.isActive) return\n    this.isActive = true\n    this.update()\n  }\n\n  public stop(): void {\n    this.isActive = false\n  }\n\n  public update(): void {\n    if (!this.isActive) return\n\n    // Get the camera's world matrix\n    const cameraMatrix = new THREE.Matrix4()\n    this.camera.updateMatrixWorld()\n    cameraMatrix.copy(this.camera.matrixWorld)\n\n    // Extract the camera's forward direction (negative Z in camera space)\n    const forward = new THREE.Vector3(0, 0, -1)\n    forward.transformDirection(cameraMatrix)\n\n    // Project to XZ plane (ignore Y component for top-down compass view)\n    forward.y = 0\n    forward.normalize()\n\n    // Calculate angle from world -Z axis (north)\n    // World Z- is \"north\", X- is \"east\" (flipped X axis)\n    const targetAngle = Math.atan2(-forward.x, -forward.z) * (180 / Math.PI)\n\n    // Calculate the shortest rotation path to avoid spinning around\n    let angleDiff = targetAngle - this.currentRotation\n\n    // Normalize the angle difference to be between -180 and 180\n    while (angleDiff > 180) angleDiff -= 360\n    while (angleDiff < -180) angleDiff += 360\n\n    // Update current rotation with smooth transition\n    this.currentRotation += angleDiff\n\n    // Update arrow rotation (negative because we want the arrow to point to north, not where camera is facing)\n    this.arrowElement.style.transform = `translate(-50%, -50%) rotate(${-this.currentRotation}deg)`\n\n    // Continue updating if active\n    if (this.isActive) {\n      requestAnimationFrame(() => this.update())\n    }\n  }\n\n  public setCamera(camera: THREE.Camera): void {\n    this.camera = camera\n  }\n\n  public setSize(size: number): void {\n    this.options.size = size\n    this.compassElement.style.width = `${size}px`\n    this.compassElement.style.height = `${size}px`\n    this.updateTicksAndLabels()\n    this.updateStyles()\n  }\n\n  public setPosition(\n    position: CompassOverlayOptions['position'],\n    offset?: { x: number; y: number }\n  ): void {\n    if (position) {\n      this.options.position = position\n    }\n    if (offset) {\n      this.options.offset = offset\n    }\n\n    // Update position styles\n    const positionStyles = this.getPositionStyles()\n    const styles = positionStyles.split(';').filter((s) => s.trim())\n\n    // Clear existing position styles\n    this.compassElement.style.top = ''\n    this.compassElement.style.right = ''\n    this.compassElement.style.bottom = ''\n    this.compassElement.style.left = ''\n\n    // Apply new position styles\n    styles.forEach((style) => {\n      const [property, value] = style.split(':').map((s) => s.trim())\n      if (property && value) {\n        ;(this.compassElement.style as any)[property] = value\n      }\n    })\n  }\n\n  public setColors(colors: Partial<CompassOverlayOptions['colors']>): void {\n    this.options.colors = { ...this.options.colors, ...colors }\n    this.updateStyles()\n  }\n\n  /**\n   * Helper method to reset camera to look north (world Z- direction)\n   * This is a convenience method that can be called when handling the 'resetToNorth' event\n   */\n  public static resetCameraToNorth(\n    camera: THREE.Camera,\n    smooth: boolean = true\n  ): void {\n    if (smooth) {\n      // Create a smooth rotation animation to north\n      const startQuaternion = camera.quaternion.clone()\n      const targetQuaternion = new THREE.Quaternion()\n\n      // Set target rotation to look at north (Z-)\n      const targetMatrix = new THREE.Matrix4()\n      targetMatrix.lookAt(\n        camera.position,\n        camera.position.clone().add(new THREE.Vector3(0, 0, -1)),\n        new THREE.Vector3(0, 1, 0)\n      )\n      targetQuaternion.setFromRotationMatrix(targetMatrix)\n\n      // Animate rotation\n      const duration = 500 // milliseconds\n      const startTime = Date.now()\n\n      const animate = () => {\n        const elapsed = Date.now() - startTime\n        const progress = Math.min(elapsed / duration, 1)\n\n        // Use smooth easing\n        const easeProgress = 1 - Math.pow(1 - progress, 3)\n\n        camera.quaternion.slerpQuaternions(\n          startQuaternion,\n          targetQuaternion,\n          easeProgress\n        )\n\n        if (progress < 1) {\n          requestAnimationFrame(animate)\n        }\n      }\n      animate()\n    } else {\n      // Instant rotation to north\n      camera.lookAt(camera.position.clone().add(new THREE.Vector3(0, 0, -1)))\n    }\n  }\n\n  private updateStyles(): void {\n    // Remove existing styles\n    const existingStyle = document.getElementById('threejs-compass-styles')\n    if (existingStyle) {\n      existingStyle.remove()\n    }\n\n    // Recreate styles with new values\n    this.setupStyles()\n  }\n\n  public dispose(): void {\n    this.stop()\n\n    if (this.compassElement && this.compassElement.parentNode) {\n      this.compassElement.parentNode.removeChild(this.compassElement)\n    }\n\n    // Remove styles if no other compass instances exist\n    const compassElements = document.querySelectorAll(\n      '.threejs-compass-overlay'\n    )\n    if (compassElements.length === 0) {\n      const style = document.getElementById('threejs-compass-styles')\n      if (style) {\n        style.remove()\n      }\n    }\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/compass/index.d.mts

@@ -0,0 +1,58 @@
+import * as THREE from 'three';
+
+interface CompassOverlayOptions {
+    container?: HTMLElement;
+    size?: number;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    offset?: {
+        x: number;
+        y: number;
+    };
+    colors?: {
+        background: string;
+        border: string;
+        arrow: string;
+        text: string;
+        ticks: string;
+    };
+}
+interface CompassOverlayEventMap {
+    resetToNorth: {};
+}
+interface CompassOverlayEvent {
+    type: 'resetToNorth';
+}
+declare class CompassOverlay extends THREE.EventDispatcher<CompassOverlayEventMap> {
+    private camera;
+    private container;
+    private compassElement;
+    private arrowElement;
+    private isActive;
+    private options;
+    private currentRotation;
+    constructor(camera: THREE.Camera, options?: CompassOverlayOptions);
+    private createCompassElement;
+    private setupStyles;
+    private setupDoubleClickHandler;
+    private updateTicksAndLabels;
+    private getPositionStyles;
+    start(): void;
+    stop(): void;
+    update(): void;
+    setCamera(camera: THREE.Camera): void;
+    setSize(size: number): void;
+    setPosition(position: CompassOverlayOptions['position'], offset?: {
+        x: number;
+        y: number;
+    }): void;
+    setColors(colors: Partial<CompassOverlayOptions['colors']>): void;
+    /**
+     * Helper method to reset camera to look north (world Z- direction)
+     * This is a convenience method that can be called when handling the 'resetToNorth' event
+     */
+    static resetCameraToNorth(camera: THREE.Camera, smooth?: boolean): void;
+    private updateStyles;
+    dispose(): void;
+}
+
+export { CompassOverlay, type CompassOverlayEvent, type CompassOverlayOptions };

package/dist/compass/index.d.ts

@@ -0,0 +1,58 @@
+import * as THREE from 'three';
+
+interface CompassOverlayOptions {
+    container?: HTMLElement;
+    size?: number;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    offset?: {
+        x: number;
+        y: number;
+    };
+    colors?: {
+        background: string;
+        border: string;
+        arrow: string;
+        text: string;
+        ticks: string;
+    };
+}
+interface CompassOverlayEventMap {
+    resetToNorth: {};
+}
+interface CompassOverlayEvent {
+    type: 'resetToNorth';
+}
+declare class CompassOverlay extends THREE.EventDispatcher<CompassOverlayEventMap> {
+    private camera;
+    private container;
+    private compassElement;
+    private arrowElement;
+    private isActive;
+    private options;
+    private currentRotation;
+    constructor(camera: THREE.Camera, options?: CompassOverlayOptions);
+    private createCompassElement;
+    private setupStyles;
+    private setupDoubleClickHandler;
+    private updateTicksAndLabels;
+    private getPositionStyles;
+    start(): void;
+    stop(): void;
+    update(): void;
+    setCamera(camera: THREE.Camera): void;
+    setSize(size: number): void;
+    setPosition(position: CompassOverlayOptions['position'], offset?: {
+        x: number;
+        y: number;
+    }): void;
+    setColors(colors: Partial<CompassOverlayOptions['colors']>): void;
+    /**
+     * Helper method to reset camera to look north (world Z- direction)
+     * This is a convenience method that can be called when handling the 'resetToNorth' event
+     */
+    static resetCameraToNorth(camera: THREE.Camera, smooth?: boolean): void;
+    private updateStyles;
+    dispose(): void;
+}
+
+export { CompassOverlay, type CompassOverlayEvent, type CompassOverlayOptions };

package/dist/compass/index.mjs

@@ -0,0 +1,7 @@
+import {
+  CompassOverlay
+} from "../chunk-P35QJCOG.mjs";
+export {
+  CompassOverlay
+};
+//# sourceMappingURL=index.mjs.map

package/dist/compass/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}