@ericchen1990/pano-view 3.2.0 → 3.2.2

package/dist/index.cjs

@@ -13238,21 +13238,23 @@ function Scenes({
 }
 
 // src/hotspot/image-hotspot.tsx
-var import_fiber24 = require("@react-three/fiber");
+var import_fiber25 = require("@react-three/fiber");
 var import_react49 = require("react");
-var import_three26 = require("three");
+var import_three28 = require("three");
 
 // src/hotspot/hotspot-anchor.tsx
-var import_fiber23 = require("@react-three/fiber");
+var import_fiber24 = require("@react-three/fiber");
 var import_react48 = require("react");
-var import_three24 = require("three");
+var import_three26 = require("three");
 
 // src/hotspot/hotspot-tooltip.tsx
 var import_react47 = require("react");
 
 // src/webvr/stereo-html.tsx
-var import_drei = require("@react-three/drei");
+var import_fiber23 = require("@react-three/fiber");
 var import_react46 = require("react");
+var import_client = require("react-dom/client");
+var import_three24 = require("three");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function useFallbackStereoView() {
   const runtime = (0, import_react46.useContext)(WebVRRuntimeContext);
@@ -13262,43 +13264,87 @@ function useFallbackStereoView() {
     () => isFallbackStereoMode(host?.snapshot.mode ?? null),
     () => false
   );
-  if (!fallback || !runtime) {
-    return null;
-  }
-  return runtime.stereoView;
+  return fallback && runtime ? runtime.stereoView : null;
 }
-function stereoCalculatePosition(eye, stereoView) {
-  return (el, _camera, size) => projectStereoHtmlPosition(
-    el,
-    eye === "left" ? stereoView.stereo.cameraL : stereoView.stereo.cameraR,
-    size,
-    eye
-  );
+function ProjectedHtml({
+  children,
+  pointerEvents = "auto",
+  style,
+  zIndexRange = [16777271, 0],
+  stereoView,
+  eye
+}) {
+  const { camera, gl, events, size } = (0, import_fiber23.useThree)();
+  const group = (0, import_react46.useRef)(null);
+  const overlay = (0, import_react46.useRef)(null);
+  const scratch = (0, import_react46.useRef)(new import_three24.Vector3());
+  const target = events.connected || gl.domElement.parentElement;
+  const updatePosition = () => {
+    const anchor = group.current;
+    const element = overlay.current?.element;
+    if (!anchor || !element) return;
+    const viewCamera = stereoView && eye ? eye === "left" ? stereoView.stereo.cameraL : stereoView.stereo.cameraR : camera;
+    anchor.updateWorldMatrix(true, false);
+    const position = scratch.current.setFromMatrixPosition(anchor.matrixWorld);
+    const distance = position.distanceTo(viewCamera.position);
+    position.applyMatrix4(viewCamera.matrixWorldInverse);
+    element.style.display = position.z < 0 ? "block" : "none";
+    let x;
+    let y;
+    if (stereoView && eye) {
+      [x, y] = projectStereoHtmlPosition(anchor, viewCamera, size, eye);
+    } else {
+      position.setFromMatrixPosition(anchor.matrixWorld).project(viewCamera);
+      x = (position.x + 1) * size.width / 2;
+      y = (1 - position.y) * size.height / 2;
+    }
+    element.style.transform = `translate3d(${x}px,${y}px,0)`;
+    element.style.zIndex = String(
+      Math.round(
+        zIndexRange[0] + (zIndexRange[1] - zIndexRange[0]) * (distance - viewCamera.near) / (viewCamera.far - viewCamera.near)
+      )
+    );
+  };
+  (0, import_react46.useLayoutEffect)(() => {
+    if (!target) return;
+    const element = document.createElement("div");
+    Object.assign(element.style, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      transformOrigin: "0 0"
+    });
+    const root = (0, import_client.createRoot)(element);
+    overlay.current = { element, root };
+    target.appendChild(element);
+    return () => {
+      overlay.current = null;
+      element.remove();
+      queueMicrotask(() => root.unmount());
+    };
+  }, [target]);
+  (0, import_react46.useLayoutEffect)(() => {
+    overlay.current?.root.render(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "div",
+        {
+          "aria-hidden": eye === "right" || void 0,
+          style: { position: "absolute", pointerEvents, ...style },
+          children
+        }
+      )
+    );
+    updatePosition();
+  });
+  (0, import_fiber23.useFrame)(updatePosition);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("group", { ref: group });
 }
-function PanoHtml({ children, ...htmlProps }) {
+function PanoHtml(props) {
   const stereoView = useFallbackStereoView();
-  if (!stereoView) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_drei.Html, { ...htmlProps, children });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      import_drei.Html,
-      {
-        ...htmlProps,
-        calculatePosition: stereoCalculatePosition("left", stereoView),
-        children
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      import_drei.Html,
-      {
-        ...htmlProps,
-        "aria-hidden": true,
-        calculatePosition: stereoCalculatePosition("right", stereoView),
-        children
-      }
-    )
-  ] });
+  return stereoView ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ProjectedHtml, { ...props, stereoView, eye: "left" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ProjectedHtml, { ...props, stereoView, eye: "right" })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ProjectedHtml, { ...props });
 }
 
 // src/hotspot/hotspot-tooltip.tsx
@@ -13430,6 +13476,37 @@ function HotspotTooltip({
   ] }) });
 }
 
+// src/hotspot/transform.ts
+var import_three25 = require("three");
+var LOCAL_FORWARD = new import_three25.Vector3(0, 0, 1);
+var CAMERA_POSITION = new import_three25.Vector3();
+function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3, rotation, scaleMode, referenceFov, useAngularScale, worldWidth, worldHeight, distance) {
+  if (orientation2 === "billboard") {
+    group.quaternion.copy(camera.quaternion);
+  } else {
+    group.quaternion.copy(surfaceQuaternion3);
+  }
+  group.rotateOnAxis(LOCAL_FORWARD, import_three25.MathUtils.degToRad(-rotation));
+  let scaleFactor = scaleMode === "fixed" && camera instanceof import_three25.PerspectiveCamera ? fixedScaleFactor(camera.fov, referenceFov) : 1;
+  if (scaleMode === "fixed" && orientation2 === "billboard" && useAngularScale && camera instanceof import_three25.PerspectiveCamera) {
+    group.updateWorldMatrix(true, false);
+    CAMERA_POSITION.setFromMatrixPosition(group.matrixWorld).applyMatrix4(
+      camera.matrixWorldInverse
+    );
+    scaleFactor *= Math.max(0, -CAMERA_POSITION.z) / distance;
+  }
+  group.scale.set(
+    (useAngularScale ? worldWidth : 1) * scaleFactor,
+    (useAngularScale ? worldHeight : 1) * scaleFactor,
+    1
+  );
+  group.updateMatrixWorld();
+}
+function fixedScaleFactor(cameraFov, referenceFov) {
+  const safeReferenceFov = import_three25.MathUtils.clamp(referenceFov, 1, 179);
+  return Math.tan(import_three25.MathUtils.degToRad(cameraFov) / 2) / Math.tan(import_three25.MathUtils.degToRad(safeReferenceFov) / 2);
+}
+
 // src/hotspot/hotspot-anchor.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var DEFAULT_FLOATING_DISTANCE = 10;
@@ -13439,28 +13516,27 @@ var DEFAULT_REFERENCE_FOV = 75;
 var MIN_ANGULAR_SIZE = 0.01;
 var MAX_ANGULAR_SIZE = 179;
 var DRAG_EPSILON_DEGREES = 1e-3;
-var LOCAL_FORWARD = new import_three24.Vector3(0, 0, 1);
-var TOOLTIP_WORLD_BOX = new import_three24.Box3();
-var TOOLTIP_LOCAL_BOX = new import_three24.Box3();
-var TOOLTIP_CORNER = new import_three24.Vector3();
-var TOOLTIP_INVERSE = new import_three24.Matrix4();
-var TOOLTIP_WORLD_CORNER = new import_three24.Vector3();
-var TOOLTIP_PROJECTED = new import_three24.Vector3();
-var TOOLTIP_RAY_ORIGIN = new import_three24.Vector3();
-var TOOLTIP_RAY_FAR = new import_three24.Vector3();
-var TOOLTIP_RAY_DIRECTION = new import_three24.Vector3();
-var TOOLTIP_RAY = new import_three24.Ray();
-var TOOLTIP_PLANE = new import_three24.Plane();
-var TOOLTIP_INTERSECTION = new import_three24.Vector3();
-var TOOLTIP_PLANE_NORMAL = new import_three24.Vector3();
-var TOOLTIP_PLANE_POINT = new import_three24.Vector3();
+var TOOLTIP_WORLD_BOX = new import_three26.Box3();
+var TOOLTIP_LOCAL_BOX = new import_three26.Box3();
+var TOOLTIP_CORNER = new import_three26.Vector3();
+var TOOLTIP_INVERSE = new import_three26.Matrix4();
+var TOOLTIP_WORLD_CORNER = new import_three26.Vector3();
+var TOOLTIP_PROJECTED = new import_three26.Vector3();
+var TOOLTIP_RAY_ORIGIN = new import_three26.Vector3();
+var TOOLTIP_RAY_FAR = new import_three26.Vector3();
+var TOOLTIP_RAY_DIRECTION = new import_three26.Vector3();
+var TOOLTIP_RAY = new import_three26.Ray();
+var TOOLTIP_PLANE = new import_three26.Plane();
+var TOOLTIP_INTERSECTION = new import_three26.Vector3();
+var TOOLTIP_PLANE_NORMAL = new import_three26.Vector3();
+var TOOLTIP_PLANE_POINT = new import_three26.Vector3();
 var HOTSPOT_MODE_RENDERING = {
   surface: { orientation: "surface", placement: "surface" },
   billboard: { orientation: "billboard", placement: "floating" }
 };
 function angularSizeToWorldSize(size, radius) {
-  const safeSize = Number.isFinite(size) ? import_three24.MathUtils.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
-  return 2 * radius * Math.tan(import_three24.MathUtils.degToRad(safeSize) / 2);
+  const safeSize = Number.isFinite(size) ? import_three26.MathUtils.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
+  return 2 * radius * Math.tan(import_three26.MathUtils.degToRad(safeSize) / 2);
 }
 function resolveScale(scale) {
   return Number.isFinite(scale) && scale > 0 ? scale : 1;
@@ -13473,58 +13549,39 @@ function resolveDistance(placement, distance, width, height) {
   if (!Number.isFinite(distance)) {
     return DEFAULT_FLOATING_DISTANCE;
   }
-  return import_three24.MathUtils.clamp(Math.abs(distance), 0.1, maximumDistance);
-}
-function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3, rotation, scaleMode, referenceFov, useAngularScale, worldWidth, worldHeight) {
-  if (orientation2 === "billboard") {
-    group.quaternion.copy(camera.quaternion);
-  } else {
-    group.quaternion.copy(surfaceQuaternion3);
-  }
-  group.rotateOnAxis(LOCAL_FORWARD, import_three24.MathUtils.degToRad(-rotation));
-  const scaleFactor = scaleMode === "fixed" && camera instanceof import_three24.PerspectiveCamera ? fixedScaleFactor(camera.fov, referenceFov) : 1;
-  group.scale.set(
-    (useAngularScale ? worldWidth : 1) * scaleFactor,
-    (useAngularScale ? worldHeight : 1) * scaleFactor,
-    1
-  );
-  group.updateMatrixWorld();
+  return import_three26.MathUtils.clamp(Math.abs(distance), 0.1, maximumDistance);
 }
 function maximumHotspotDistance(width, height) {
-  const safeWidth = import_three24.MathUtils.clamp(
+  const safeWidth = import_three26.MathUtils.clamp(
     Math.abs(Number.isFinite(width) ? width : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
-  const safeHeight = import_three24.MathUtils.clamp(
+  const safeHeight = import_three26.MathUtils.clamp(
     Math.abs(Number.isFinite(height) ? height : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
   const cornerFactor = Math.hypot(
     1,
-    Math.tan(import_three24.MathUtils.degToRad(safeWidth) / 2),
-    Math.tan(import_three24.MathUtils.degToRad(safeHeight) / 2)
+    Math.tan(import_three26.MathUtils.degToRad(safeWidth) / 2),
+    Math.tan(import_three26.MathUtils.degToRad(safeHeight) / 2)
   );
   return (PANORAMA_RADIUS - PANORAMA_SURFACE_INSET) / cornerFactor;
 }
-function fixedScaleFactor(cameraFov, referenceFov) {
-  const safeReferenceFov = import_three24.MathUtils.clamp(referenceFov, 1, 179);
-  return Math.tan(import_three24.MathUtils.degToRad(cameraFov) / 2) / Math.tan(import_three24.MathUtils.degToRad(safeReferenceFov) / 2);
-}
 function createSurfaceQuaternion(position) {
   const outward = panoPositionToVector3(position).normalize();
   const inward = outward.clone().negate();
-  const pitch = import_three24.MathUtils.degToRad(position.pitch);
-  const yaw = import_three24.MathUtils.degToRad(position.yaw);
-  const localUp = new import_three24.Vector3(
+  const pitch = import_three26.MathUtils.degToRad(position.pitch);
+  const yaw = import_three26.MathUtils.degToRad(position.yaw);
+  const localUp = new import_three26.Vector3(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
   const localRight = localUp.clone().cross(inward).normalize();
-  const basis = new import_three24.Matrix4().makeBasis(localRight, localUp, inward);
-  return new import_three24.Quaternion().setFromRotationMatrix(basis);
+  const basis = new import_three26.Matrix4().makeBasis(localRight, localUp, inward);
+  return new import_three26.Quaternion().setFromRotationMatrix(basis);
 }
 function makeInteractionEvent(id, position, event) {
   return {
@@ -13537,7 +13594,7 @@ function makeInteractionEvent(id, position, event) {
 function angularDistance(a, b) {
   const aVector = panoPositionToVector3(a);
   const bVector = panoPositionToVector3(b);
-  return import_three24.MathUtils.radToDeg(aVector.angleTo(bVector));
+  return import_three26.MathUtils.radToDeg(aVector.angleTo(bVector));
 }
 function isTooltipOpen(trigger, hovered, focused, pinned) {
   switch (trigger) {
@@ -13772,7 +13829,7 @@ function HotspotAnchor({
   const hotspotTargetRegistry = (0, import_react48.useContext)(HotspotTargetRegistryContext);
   const eventBus = (0, import_react48.useContext)(PanoEventBusContext);
   const cursorApi = usePanoCursor();
-  const { camera, size } = (0, import_fiber23.useThree)();
+  const { camera, size } = (0, import_fiber24.useThree)();
   const groupRef = (0, import_react48.useRef)(null);
   const tooltipAnchorRef = (0, import_react48.useRef)(null);
   const dragStateRef = (0, import_react48.useRef)(null);
@@ -13813,8 +13870,8 @@ function HotspotAnchor({
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
   const focusGeometry = (0, import_react48.useMemo)(() => {
-    const planeGeometry = new import_three24.PlaneGeometry(1, 1);
-    const geometry = new import_three24.EdgesGeometry(planeGeometry);
+    const planeGeometry = new import_three26.PlaneGeometry(1, 1);
+    const geometry = new import_three26.EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
     return geometry;
   }, []);
@@ -13917,7 +13974,8 @@ function HotspotAnchor({
       referenceFov,
       useAngularScale,
       worldWidth,
-      worldHeight
+      worldHeight,
+      resolvedDistance
     );
     if (tooltipOpen && tooltipAnchorRef.current) {
       updateTooltipAnchor(
@@ -13933,6 +13991,7 @@ function HotspotAnchor({
     camera,
     orientation2,
     referenceFov,
+    resolvedDistance,
     rotation,
     scaleMode,
     size,
@@ -13943,7 +14002,7 @@ function HotspotAnchor({
     worldHeight,
     worldWidth
   ]);
-  (0, import_fiber23.useFrame)((state) => {
+  (0, import_fiber24.useFrame)((state) => {
     const group = groupRef.current;
     if (!group) {
       return;
@@ -13958,7 +14017,8 @@ function HotspotAnchor({
       referenceFov,
       useAngularScale,
       worldWidth,
-      worldHeight
+      worldHeight,
+      resolvedDistance
     );
     if (tooltipOpen && tooltipAnchorRef.current) {
       updateTooltipAnchor(
@@ -14104,10 +14164,10 @@ function HotspotAnchor({
 }
 
 // src/hotspot/hotspot-plane.tsx
-var import_three25 = require("three");
+var import_three27 = require("three");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var HOTSPOT_ALPHA_CUTOFF = 0.05;
-var SAMPLE_UV = new import_three25.Vector2();
+var SAMPLE_UV = new import_three27.Vector2();
 var RAYCAST_HITS = [];
 var IMAGE_DATA_CACHE = /* @__PURE__ */ new WeakMap();
 function clampOpacity(opacity) {
@@ -14181,8 +14241,8 @@ function sampleTextureAlpha(texture, u, v) {
 }
 function hotspotPlaneRaycast(raycaster, intersects2) {
   const material = Array.isArray(this.material) ? this.material[0] : this.material;
-  if (!(material instanceof import_three25.MeshBasicMaterial)) {
-    import_three25.Mesh.prototype.raycast.call(this, raycaster, intersects2);
+  if (!(material instanceof import_three27.MeshBasicMaterial)) {
+    import_three27.Mesh.prototype.raycast.call(this, raycaster, intersects2);
     return;
   }
   const cutoff = Math.max(material.alphaTest, HOTSPOT_ALPHA_CUTOFF);
@@ -14190,7 +14250,7 @@ function hotspotPlaneRaycast(raycaster, intersects2) {
     return;
   }
   RAYCAST_HITS.length = 0;
-  import_three25.Mesh.prototype.raycast.call(this, raycaster, RAYCAST_HITS);
+  import_three27.Mesh.prototype.raycast.call(this, raycaster, RAYCAST_HITS);
   const map = material.map;
   for (const hit of RAYCAST_HITS) {
     if (!map || !hit.uv) {
@@ -14214,10 +14274,9 @@ function HotspotPlane({
       {
         target: "hotspot",
         alphaTest: HOTSPOT_ALPHA_CUTOFF,
-        alphaToCoverage: true,
         map,
         opacity: map ? clampOpacity(opacity) : 0,
-        side: import_three25.DoubleSide,
+        side: import_three27.DoubleSide,
         toneMapped: false,
         transparent: true
       }
@@ -14228,7 +14287,7 @@ function HotspotPlane({
 // src/hotspot/image-hotspot.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function useHotspotImageTexture(src, onLoad, onError) {
-  const gl = (0, import_fiber24.useThree)((state) => state.gl);
+  const gl = (0, import_fiber25.useThree)((state) => state.gl);
   const [texture, setTexture] = (0, import_react49.useState)(null);
   const onLoadRef = (0, import_react49.useRef)(onLoad);
   const onErrorRef = (0, import_react49.useRef)(onError);
@@ -14242,7 +14301,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
         active = false;
       };
     }
-    const loader = new import_three26.TextureLoader();
+    const loader = new import_three28.TextureLoader();
     loader.load(
       src,
       (loadedTexture) => {
@@ -14250,11 +14309,11 @@ function useHotspotImageTexture(src, onLoad, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three26.SRGBColorSpace;
-        loadedTexture.wrapS = import_three26.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three26.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three26.LinearFilter;
-        loadedTexture.minFilter = import_three26.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three28.SRGBColorSpace;
+        loadedTexture.wrapS = import_three28.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three28.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three28.LinearFilter;
+        loadedTexture.minFilter = import_three28.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -14295,15 +14354,15 @@ function ImageHotspot({
 
 // src/hotspot/polygon-hotspot.tsx
 var import_react51 = require("react");
-var import_three28 = require("three");
+var import_three30 = require("three");
 
 // src/hotspot/hotspot-stroke-line.tsx
-var import_drei2 = require("@react-three/drei");
-var import_fiber25 = require("@react-three/fiber");
+var import_drei = require("@react-three/drei");
+var import_fiber26 = require("@react-three/fiber");
 var import_react50 = require("react");
-var import_three27 = require("three");
+var import_three29 = require("three");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var LINE_WORLD_POSITION = new import_three27.Vector3();
+var LINE_WORLD_POSITION = new import_three29.Vector3();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
   if (!object || typeof material?.dashScale !== "number") {
@@ -14311,8 +14370,8 @@ function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   }
   object.getWorldPosition(LINE_WORLD_POSITION);
   const depth = Math.max(camera.position.distanceTo(LINE_WORLD_POSITION), 1);
-  const fov = camera instanceof import_three27.PerspectiveCamera ? camera.fov : 75;
-  material.dashScale = viewportHeight / (2 * Math.tan(import_three27.MathUtils.degToRad(fov) * 0.5) * depth);
+  const fov = camera instanceof import_three29.PerspectiveCamera ? camera.fov : 75;
+  material.dashScale = viewportHeight / (2 * Math.tan(import_three29.MathUtils.degToRad(fov) * 0.5) * depth);
 }
 function resolveDash(dashSize, gapSize) {
   if (dashSize === void 0 || !Number.isFinite(dashSize) || dashSize <= 0) {
@@ -14334,7 +14393,7 @@ function HotspotStrokeLine({
   gapSize
 }) {
   const lineRef = (0, import_react50.useRef)(null);
-  const { camera, size } = (0, import_fiber25.useThree)();
+  const { camera, size } = (0, import_fiber26.useThree)();
   const dash = resolveDash(dashSize, gapSize);
   (0, import_react50.useLayoutEffect)(() => {
     if (!dash.dashed) {
@@ -14342,14 +14401,14 @@ function HotspotStrokeLine({
     }
     applyScreenSpaceDashScale(lineRef.current, camera, size.height);
   }, [camera, dash.dashed, dash.dashSize, dash.gapSize, size.height]);
-  (0, import_fiber25.useFrame)((state) => {
+  (0, import_fiber26.useFrame)((state) => {
     if (!dash.dashed) {
       return;
     }
     applyScreenSpaceDashScale(lineRef.current, state.camera, state.size.height);
   });
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_drei2.Line,
+    import_drei.Line,
     {
       ref: lineRef,
       alphaToCoverage: true,
@@ -14405,7 +14464,7 @@ function intersects(a, b, c, d) {
 }
 function hasSelfIntersection(vertices) {
   const points = vertices.map(
-    (vertex) => new import_three28.Vector2(vertex.unwrappedYaw, vertex.pitch)
+    (vertex) => new import_three30.Vector2(vertex.unwrappedYaw, vertex.pitch)
   );
   for (let index = 0; index < points.length; index += 1) {
     const nextIndex = (index + 1) % points.length;
@@ -14442,7 +14501,7 @@ function polygonContainsDirection(vertices, direction) {
 }
 function fitsHemisphere(vertices) {
   const directions = vertices.map((vertex) => panoPositionToVector3(vertex).normalize());
-  const candidates = [new import_three28.Vector3()];
+  const candidates = [new import_three30.Vector3()];
   for (const direction of directions) {
     candidates[0].add(direction);
     candidates.push(direction.clone());
@@ -14466,7 +14525,7 @@ function validatePolygonVertices(vertices) {
   if (hasSelfIntersection(unwrapped)) {
     issues.push({ code: "self_intersection", message: "Polygon edges cannot cross." });
   }
-  if (polygonContainsDirection(normalized, new import_three28.Vector3(0, 1, 0)) || polygonContainsDirection(normalized, new import_three28.Vector3(0, -1, 0))) {
+  if (polygonContainsDirection(normalized, new import_three30.Vector3(0, 1, 0)) || polygonContainsDirection(normalized, new import_three30.Vector3(0, -1, 0))) {
     issues.push({ code: "contains_pole", message: "Polygons cannot contain a panorama pole." });
   }
   if (!fitsHemisphere(normalized)) {
@@ -14477,7 +14536,7 @@ function validatePolygonVertices(vertices) {
 function polygonCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new import_three28.Vector3()
+    new import_three30.Vector3()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
@@ -14486,20 +14545,20 @@ function surfaceQuaternion(position) {
   const inward = outward.clone().negate();
   const pitch = position.pitch * Math.PI / 180;
   const yaw = position.yaw * Math.PI / 180;
-  const localUp = new import_three28.Vector3(
+  const localUp = new import_three30.Vector3(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new import_three28.Quaternion().setFromRotationMatrix(
-    new import_three28.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
+  return new import_three30.Quaternion().setFromRotationMatrix(
+    new import_three30.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
 function makeWorldToLocal(center) {
-  return new import_three28.Matrix4().compose(
+  return new import_three30.Matrix4().compose(
     panoPositionToVector3(center, POLYGON_RADIUS),
     surfaceQuaternion(center),
-    new import_three28.Vector3(1, 1, 1)
+    new import_three30.Vector3(1, 1, 1)
   ).invert();
 }
 function projectedPoint(a, b, c, weightB, weightC, radius, worldToLocal) {
@@ -14554,8 +14613,8 @@ function addSubdividedTriangle(positions, indices, a, b, c, worldToLocal, steps)
 }
 function makeFillGeometry(vertices, center) {
   const unwrapped = unwrapPolygonVertices(vertices);
-  const contour = unwrapped.map((vertex) => new import_three28.Vector2(vertex.unwrappedYaw, vertex.pitch));
-  const triangles = import_three28.ShapeUtils.triangulateShape(contour, []);
+  const contour = unwrapped.map((vertex) => new import_three30.Vector2(vertex.unwrappedYaw, vertex.pitch));
+  const triangles = import_three30.ShapeUtils.triangulateShape(contour, []);
   const positions = [];
   const indices = [];
   const worldToLocal = makeWorldToLocal(center);
@@ -14571,7 +14630,7 @@ function makeFillGeometry(vertices, center) {
       steps
     );
   }
-  return new import_three28.BufferGeometry().setAttribute("position", new import_three28.Float32BufferAttribute(positions, 3)).setIndex(indices);
+  return new import_three30.BufferGeometry().setAttribute("position", new import_three30.Float32BufferAttribute(positions, 3)).setIndex(indices);
 }
 function makeStrokePositions(vertices, center) {
   const points = [];
@@ -14701,7 +14760,7 @@ function PolygonHotspot({
             color: fill,
             depthWrite: false,
             opacity: Math.max(0, Math.min(fillOpacity, 1)),
-            side: import_three28.DoubleSide,
+            side: import_three30.DoubleSide,
             transparent: true
           }
         ) }),
@@ -14724,7 +14783,7 @@ function PolygonHotspot({
 
 // src/hotspot/polyline-hotspot.tsx
 var import_react52 = require("react");
-var import_three29 = require("three");
+var import_three31 = require("three");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
@@ -14750,29 +14809,29 @@ function unwrapVertices(vertices) {
 function polylineCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new import_three29.Vector3()
+    new import_three31.Vector3()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
 function surfaceQuaternion2(position) {
   const outward = panoPositionToVector3(position).normalize();
   const inward = outward.clone().negate();
-  const pitch = import_three29.MathUtils.degToRad(position.pitch);
-  const yaw = import_three29.MathUtils.degToRad(position.yaw);
-  const localUp = new import_three29.Vector3(
+  const pitch = import_three31.MathUtils.degToRad(position.pitch);
+  const yaw = import_three31.MathUtils.degToRad(position.yaw);
+  const localUp = new import_three31.Vector3(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new import_three29.Quaternion().setFromRotationMatrix(
-    new import_three29.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
+  return new import_three31.Quaternion().setFromRotationMatrix(
+    new import_three31.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
 function makeWorldToLocal2(center) {
-  return new import_three29.Matrix4().compose(
+  return new import_three31.Matrix4().compose(
     panoPositionToVector3(center, POLYLINE_RADIUS),
     surfaceQuaternion2(center),
-    new import_three29.Vector3(1, 1, 1)
+    new import_three31.Vector3(1, 1, 1)
   ).invert();
 }
 function subdivisionSteps(vertices) {
@@ -14787,7 +14846,7 @@ function subdivisionSteps(vertices) {
   }
   return Math.min(
     8,
-    Math.max(1, Math.ceil(import_three29.MathUtils.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
+    Math.max(1, Math.ceil(import_three31.MathUtils.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
   );
 }
 function makeLinePositions(vertices, center) {
@@ -14918,7 +14977,7 @@ function PolylineHotspot({
 
 // src/hotspot/graphic-hotspot.tsx
 var import_react53 = require("react");
-var import_three30 = require("three");
+var import_three32 = require("three");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var GRAPHIC_TEXTURE_SIZE = 512;
 function resolveStrokeWidth(value) {
@@ -15097,12 +15156,12 @@ function createGraphicTexture(graphic, aspectWidth, aspectHeight) {
     throw new Error("Canvas 2D is unavailable for this graphic hotspot.");
   }
   drawGraphic(context, graphic, aspectWidth, aspectHeight);
-  const texture = new import_three30.CanvasTexture(canvas);
-  texture.colorSpace = import_three30.SRGBColorSpace;
-  texture.wrapS = import_three30.ClampToEdgeWrapping;
-  texture.wrapT = import_three30.ClampToEdgeWrapping;
-  texture.magFilter = import_three30.LinearFilter;
-  texture.minFilter = import_three30.LinearMipmapLinearFilter;
+  const texture = new import_three32.CanvasTexture(canvas);
+  texture.colorSpace = import_three32.SRGBColorSpace;
+  texture.wrapS = import_three32.ClampToEdgeWrapping;
+  texture.wrapT = import_three32.ClampToEdgeWrapping;
+  texture.magFilter = import_three32.LinearFilter;
+  texture.minFilter = import_three32.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
@@ -15151,9 +15210,9 @@ function GraphicHotspot(props) {
 }
 
 // src/hotspot/sequence-hotspot.tsx
-var import_fiber26 = require("@react-three/fiber");
+var import_fiber27 = require("@react-three/fiber");
 var import_react54 = require("react");
-var import_three31 = require("three");
+var import_three33 = require("three");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var DEFAULT_SEQUENCE_FPS = 12;
 function resolveFps(value) {
@@ -15168,7 +15227,7 @@ function useSpriteTexture({
   onError,
   onLoadProgress
 }) {
-  const gl = (0, import_fiber26.useThree)((state) => state.gl);
+  const gl = (0, import_fiber27.useThree)((state) => state.gl);
   const [texture, setTexture] = (0, import_react54.useState)(null);
   const onErrorRef = (0, import_react54.useRef)(onError);
   const onLoadProgressRef = (0, import_react54.useRef)(onLoadProgress);
@@ -15183,7 +15242,7 @@ function useSpriteTexture({
         active = false;
       };
     }
-    const loader = new import_three31.TextureLoader();
+    const loader = new import_three33.TextureLoader();
     loader.load(
       src,
       (loadedTexture) => {
@@ -15191,11 +15250,11 @@ function useSpriteTexture({
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three31.SRGBColorSpace;
-        loadedTexture.wrapS = import_three31.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three31.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three31.LinearFilter;
-        loadedTexture.minFilter = import_three31.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three33.SRGBColorSpace;
+        loadedTexture.wrapS = import_three33.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three33.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three33.LinearFilter;
+        loadedTexture.minFilter = import_three33.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -15300,7 +15359,7 @@ function SequenceHotspot({
       onPlaybackStateChangeRef.current?.(nextState);
     }
   }, [playing, texture]);
-  (0, import_fiber26.useFrame)((_, deltaSeconds) => {
+  (0, import_fiber27.useFrame)((_, deltaSeconds) => {
     if (!texture || !playing || endedRef.current) {
       return;
     }
@@ -15334,9 +15393,9 @@ function SequenceHotspot({
 }
 
 // src/hotspot/video-hotspot.tsx
-var import_fiber27 = require("@react-three/fiber");
+var import_fiber28 = require("@react-three/fiber");
 var import_react55 = require("react");
-var import_three32 = require("three");
+var import_three34 = require("three");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function clampVolume2(volume) {
   if (!Number.isFinite(volume)) {
@@ -15345,7 +15404,7 @@ function clampVolume2(volume) {
   return Math.max(0, Math.min(volume, 1));
 }
 function usePosterTexture2(id, poster, onError) {
-  const gl = (0, import_fiber27.useThree)((state) => state.gl);
+  const gl = (0, import_fiber28.useThree)((state) => state.gl);
   const [texture, setTexture] = (0, import_react55.useState)(null);
   const onErrorRef = (0, import_react55.useRef)(onError);
   onErrorRef.current = onError;
@@ -15357,7 +15416,7 @@ function usePosterTexture2(id, poster, onError) {
         active = false;
       };
     }
-    const loader = new import_three32.TextureLoader();
+    const loader = new import_three34.TextureLoader();
     loader.load(
       poster,
       (loadedTexture) => {
@@ -15365,11 +15424,11 @@ function usePosterTexture2(id, poster, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three32.SRGBColorSpace;
-        loadedTexture.wrapS = import_three32.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three32.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three32.LinearFilter;
-        loadedTexture.minFilter = import_three32.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three34.SRGBColorSpace;
+        loadedTexture.wrapS = import_three34.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three34.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three34.LinearFilter;
+        loadedTexture.minFilter = import_three34.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -15428,12 +15487,12 @@ function useVideoResource({
       video.setAttribute("webkit-playsinline", "true");
     }
     video.poster = poster ?? "";
-    const texture = new import_three32.VideoTexture(video);
-    texture.colorSpace = import_three32.SRGBColorSpace;
-    texture.wrapS = import_three32.ClampToEdgeWrapping;
-    texture.wrapT = import_three32.ClampToEdgeWrapping;
-    texture.magFilter = import_three32.LinearFilter;
-    texture.minFilter = import_three32.LinearFilter;
+    const texture = new import_three34.VideoTexture(video);
+    texture.colorSpace = import_three34.SRGBColorSpace;
+    texture.wrapS = import_three34.ClampToEdgeWrapping;
+    texture.wrapT = import_three34.ClampToEdgeWrapping;
+    texture.magFilter = import_three34.LinearFilter;
+    texture.minFilter = import_three34.LinearFilter;
     texture.generateMipmaps = false;
     const notifyState = (state) => {
       if (active) {
@@ -15566,9 +15625,9 @@ function VideoHotspot({
 }
 
 // src/hotspot/audio-hotspot.tsx
-var import_fiber28 = require("@react-three/fiber");
+var import_fiber29 = require("@react-three/fiber");
 var import_react56 = require("react");
-var import_three33 = require("three");
+var import_three35 = require("three");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var SPEAKER_TEXTURE_SIZE = 512;
 function paintSpeakerBody(context, center) {
@@ -15622,12 +15681,12 @@ function createSpeakerTexture(state) {
       return exhaustive;
     }
   }
-  const texture = new import_three33.CanvasTexture(canvas);
-  texture.colorSpace = import_three33.SRGBColorSpace;
-  texture.wrapS = import_three33.ClampToEdgeWrapping;
-  texture.wrapT = import_three33.ClampToEdgeWrapping;
-  texture.magFilter = import_three33.LinearFilter;
-  texture.minFilter = import_three33.LinearMipmapLinearFilter;
+  const texture = new import_three35.CanvasTexture(canvas);
+  texture.colorSpace = import_three35.SRGBColorSpace;
+  texture.wrapS = import_three35.ClampToEdgeWrapping;
+  texture.wrapT = import_three35.ClampToEdgeWrapping;
+  texture.magFilter = import_three35.LinearFilter;
+  texture.minFilter = import_three35.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
@@ -15650,7 +15709,7 @@ function useSpeakerTextures(enabled) {
   return textures;
 }
 function useIconTexture(icon, enabled, onError, id) {
-  const gl = (0, import_fiber28.useThree)((state) => state.gl);
+  const gl = (0, import_fiber29.useThree)((state) => state.gl);
   const [texture, setTexture] = (0, import_react56.useState)(null);
   const onErrorRef = (0, import_react56.useRef)(onError);
   onErrorRef.current = onError;
@@ -15662,7 +15721,7 @@ function useIconTexture(icon, enabled, onError, id) {
         active = false;
       };
     }
-    const loader = new import_three33.TextureLoader();
+    const loader = new import_three35.TextureLoader();
     loader.load(
       icon,
       (loadedTexture) => {
@@ -15670,11 +15729,11 @@ function useIconTexture(icon, enabled, onError, id) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three33.SRGBColorSpace;
-        loadedTexture.wrapS = import_three33.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three33.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three33.LinearFilter;
-        loadedTexture.minFilter = import_three33.LinearMipmapLinearFilter;
+        loadedTexture.colorSpace = import_three35.SRGBColorSpace;
+        loadedTexture.wrapS = import_three35.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three35.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three35.LinearFilter;
+        loadedTexture.minFilter = import_three35.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -15789,7 +15848,7 @@ function AudioHotspot({
   ...anchorProps
 }) {
   usePanoMediaActivationIntent(playing);
-  const camera = (0, import_fiber28.useThree)((state) => state.camera);
+  const camera = (0, import_fiber29.useThree)((state) => state.camera);
   const howl = useAudioHowl({
     crossOrigin,
     id,
@@ -15841,7 +15900,7 @@ function AudioHotspot({
       document.removeEventListener("visibilitychange", handleVisibility);
     };
   }, [howl, pauseWhenHidden]);
-  (0, import_fiber28.useFrame)(() => {
+  (0, import_fiber29.useFrame)(() => {
     if (!howl) {
       return;
     }
@@ -15859,7 +15918,7 @@ function AudioHotspot({
 
 // src/hotspot/text-hotspot.tsx
 var import_react57 = require("react");
-var import_three34 = require("three");
+var import_three36 = require("three");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var TEXT_TEXTURE_LONG_SIDE = 1024;
 var DEFAULT_FONT_FAMILY = "system-ui, sans-serif";
@@ -16069,12 +16128,12 @@ function createTextTexture(text, width, height, style) {
     throw new Error("Canvas 2D is unavailable for this text hotspot.");
   }
   drawTextHotspot(context, canvasWidth, canvasHeight, text, style);
-  const texture = new import_three34.CanvasTexture(canvas);
-  texture.colorSpace = import_three34.SRGBColorSpace;
-  texture.wrapS = import_three34.ClampToEdgeWrapping;
-  texture.wrapT = import_three34.ClampToEdgeWrapping;
-  texture.magFilter = import_three34.LinearFilter;
-  texture.minFilter = import_three34.LinearMipmapLinearFilter;
+  const texture = new import_three36.CanvasTexture(canvas);
+  texture.colorSpace = import_three36.SRGBColorSpace;
+  texture.wrapS = import_three36.ClampToEdgeWrapping;
+  texture.wrapT = import_three36.ClampToEdgeWrapping;
+  texture.magFilter = import_three36.LinearFilter;
+  texture.minFilter = import_three36.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
@@ -16182,8 +16241,8 @@ function TextHotspot({
 }
 
 // src/hotspot/iframe-hotspot.tsx
-var import_drei3 = require("@react-three/drei");
-var import_three35 = require("three");
+var import_drei2 = require("@react-three/drei");
+var import_three37 = require("three");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var IFRAME_LONG_SIDE = 800;
 var CSS3D_DISTANCE_FACTOR = 400;
@@ -16257,14 +16316,14 @@ function IframeHotspot({
             {
               depthWrite: false,
               opacity: 0,
-              side: import_three35.DoubleSide,
+              side: import_three37.DoubleSide,
               toneMapped: false,
               transparent: true
             }
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-          import_drei3.Html,
+          import_drei2.Html,
           {
             distanceFactor: CSS3D_DISTANCE_FACTOR,
             pointerEvents: acceptsPointer && pointerPolicy === "content" ? "auto" : "none",