@ericchen1990/pano-view 3.6.0 → 3.6.2

package/dist/index.cjs

@@ -2641,6 +2641,7 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
   const { camera, gl } = (0, import_fiber.useThree)();
   const xrSession = (0, import_xr.useXR)((state) => state.session);
   const xrSessionRef = (0, import_react3.useRef)(xrSession);
+  const pointerRevisionRef = (0, import_react3.useRef)(0);
   const viewRef = (0, import_react3.useRef)({ ...initialView });
   const targetViewRef = (0, import_react3.useRef)({ ...initialView });
   const initialViewRef = (0, import_react3.useRef)({ ...initialView });
@@ -2735,6 +2736,7 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
   };
   const acquireInteractionLock = () => {
     cancelNavigation();
+    pointerRevisionRef.current += 1;
     interactionLockCountRef.current += 1;
     stopVelocity();
     if (mouseActiveRef.current) {
@@ -2766,6 +2768,7 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
       legacyFovRef.current.maxFov
     );
     if (JSON.stringify(next) === JSON.stringify(limitsRef.current)) return;
+    pointerRevisionRef.current += 1;
     limitsRef.current = next;
     cancelNavigation();
     stopVelocity();
@@ -2781,6 +2784,7 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
   };
   const setView = (view, setOptions) => {
     cancelNavigation();
+    pointerRevisionRef.current += 1;
     const nextView = hardConstrainView(view);
     if (gyroActiveRef.current) {
       gyroOffsetRef.current = {
@@ -2800,6 +2804,7 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
     if (xrSessionRef.current != null || gyroActiveRef.current || interactionLockCountRef.current > 0) {
       return Promise.resolve({ status: "cancelled" });
     }
+    pointerRevisionRef.current += 1;
     const from = { ...viewRef.current };
     const safeTargetInput = {
       yaw: targetInput.yaw !== void 0 && Number.isFinite(targetInput.yaw) ? targetInput.yaw : from.yaw,
@@ -2864,19 +2869,24 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
       return false;
     }
     const current = targetViewRef.current;
+    const origin = !gyroActiveRef.current ? applyOptions?.pointerOrigin : void 0;
+    const reference = origin ?? current;
     const gyroMode = gyroTouchModeRef.current;
     const gyroControlsView = gyroActiveRef.current;
     const appliesTouchMode = gyroControlsView && applyOptions?.source === "touch";
     const acceptsYaw = !appliesTouchMode || gyroMode === "horizontaloffset" || gyroMode === "full";
     const acceptsPitch = !appliesTouchMode || gyroMode === "full";
-    const nextYaw = acceptsYaw && delta.yaw !== void 0 && Number.isFinite(delta.yaw) ? applyLimitedYawDelta(current.yaw, delta.yaw, limitsRef.current.yaw) : current.yaw;
-    const nextPitch = acceptsPitch && delta.pitch !== void 0 && Number.isFinite(delta.pitch) ? current.pitch + delta.pitch : current.pitch;
+    const nextYaw = acceptsYaw && delta.yaw !== void 0 && Number.isFinite(delta.yaw) ? applyLimitedYawDelta(reference.yaw, delta.yaw, limitsRef.current.yaw) : current.yaw;
+    const nextPitch = acceptsPitch && delta.pitch !== void 0 && Number.isFinite(delta.pitch) ? reference.pitch + delta.pitch : current.pitch;
     const nextFov = delta.fov !== void 0 && Number.isFinite(delta.fov) ? current.fov + delta.fov : current.fov;
     targetViewRef.current = softConstrainView({
       yaw: nextYaw,
       pitch: nextPitch,
       fov: nextFov
     });
+    if (origin) {
+      viewRef.current = { ...viewRef.current, yaw: targetViewRef.current.yaw, pitch: targetViewRef.current.pitch };
+    }
     if (gyroControlsView) {
       if (acceptsYaw && delta.yaw !== void 0 && Number.isFinite(delta.yaw)) {
         gyroOffsetRef.current.yaw = shortestYawDelta(gyroPoseRef.current.yaw, targetViewRef.current.yaw);
@@ -2886,16 +2896,21 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
       }
     }
     markDirty();
-    if (applyOptions?.recordVelocity && !gyroControlsView) {
+    const releaseVelocity = applyOptions?.velocity;
+    if (!gyroControlsView && releaseVelocity && Number.isFinite(releaseVelocity.yaw) && Number.isFinite(releaseVelocity.pitch)) {
+      yawVelocityRef.current = releaseVelocity.yaw;
+      pitchVelocityRef.current = releaseVelocity.pitch;
+      lastVelocitySampleAtRef.current = performance.now();
+    } else if (applyOptions?.recordVelocity && !gyroControlsView) {
       const now = performance.now();
       const previousAt = lastVelocitySampleAtRef.current;
       const elapsed = previousAt === null ? 1 / 60 : Math.max((now - previousAt) / 1e3, 1 / 120);
       lastVelocitySampleAtRef.current = now;
       if (delta.yaw !== void 0 && Number.isFinite(delta.yaw)) {
-        yawVelocityRef.current = delta.yaw / elapsed;
+        yawVelocityRef.current = limitedYawDelta(current.yaw, targetViewRef.current.yaw, limitsRef.current.yaw) / elapsed;
       }
       if (delta.pitch !== void 0 && Number.isFinite(delta.pitch)) {
-        pitchVelocityRef.current = delta.pitch / elapsed;
+        pitchVelocityRef.current = (targetViewRef.current.pitch - current.pitch) / elapsed;
       }
       if (delta.fov !== void 0 && Number.isFinite(delta.fov)) {
         zoomVelocityRef.current = clamp(delta.fov / elapsed, -180, 180);
@@ -2909,6 +2924,7 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
     ref,
     () => ({
       getView: () => ({ ...viewRef.current }),
+      getPointerDragState: () => ({ revision: pointerRevisionRef.current, anchored: !gyroActiveRef.current && xrSessionRef.current == null }),
       setSceneViewLimits: (limits) => {
         sceneLimitsRef.current = parseViewLimits(limits);
         refreshLimits();
@@ -2948,6 +2964,9 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
         }
         syncInteracting();
         if (active && !wasActive) {
+          if (!gyroActiveRef.current) {
+            targetViewRef.current = { ...targetViewRef.current, yaw: viewRef.current.yaw, pitch: viewRef.current.pitch };
+          }
           eventBusRef.current.emit("viewinteractionstart", { source });
         } else if (!active && wasActive) {
           eventBusRef.current.emit("viewinteractionend", { source });
@@ -2967,6 +2986,7 @@ var PanoramaViewRuntime = (0, import_react3.forwardRef)(function PanoramaViewRun
       isInteractionLocked: () => interactionLockCountRef.current > 0,
       isUserInteracting,
       setGyroActive: (active) => {
+        if (gyroActiveRef.current !== active) pointerRevisionRef.current += 1;
         if (active) {
           cancelNavigation();
         }
@@ -3716,6 +3736,216 @@ function KeyboardControls({
 // src/mouse-controls.tsx
 var import_fiber4 = require("@react-three/fiber");
 var import_react9 = require("react");
+
+// src/pointer-drag.ts
+var import_three2 = require("three");
+var DEFAULT_POINTER_DRAG_SPEED = 0.35;
+var POINTER_FOLLOW_TIME_SECONDS = 0.01;
+var MIN_VELOCITY_SAMPLE_SECONDS = 1 / 120;
+function pointerReleaseVelocity(samples, releasedAt, solve, maxAgeMs = POINTER_VELOCITY_MAX_AGE_MS) {
+  if (samples.length < 2) return { yaw: 0, pitch: 0 };
+  const newest = samples[samples.length - 1];
+  if (releasedAt < newest.at || releasedAt - newest.at > maxAgeMs) return { yaw: 0, pitch: 0 };
+  let oldest = newest;
+  for (let index = samples.length - 1; index >= 0; index -= 1) {
+    const sample = samples[index];
+    if (releasedAt - sample.at <= maxAgeMs) oldest = sample;
+    else break;
+  }
+  if (oldest === newest) return { yaw: 0, pitch: 0 };
+  const elapsed = Math.max((newest.at - oldest.at) / 1e3, MIN_VELOCITY_SAMPLE_SECONDS);
+  const from = solve(oldest);
+  const to = solve(newest);
+  return {
+    yaw: normalizeViewYaw(to.yaw - from.yaw) / elapsed,
+    pitch: (to.pitch - from.pitch) / elapsed
+  };
+}
+var PointerDragAnchor = class {
+  constructor(start, origin, rect, projection) {
+    this.start = start;
+    this.origin = origin;
+    this.rect = rect;
+    this.projection = projection;
+    this.local = new import_three2.Vector3();
+    this.rotation = new import_three2.Euler(0, 0, 0, "YXZ");
+    this.anchor = this.ray(start).clone().applyEuler(this.rotation.set(
+      import_three2.MathUtils.degToRad(origin.pitch),
+      import_three2.MathUtils.degToRad(-origin.yaw),
+      0,
+      "YXZ"
+    ));
+  }
+  ray(point) {
+    return this.local.set(
+      (point.x - this.rect.left) / Math.max(this.rect.width, 1) * 2 - 1,
+      1 - (point.y - this.rect.top) / Math.max(this.rect.height, 1) * 2,
+      0.5
+    ).applyMatrix4(this.projection.projectionMatrixInverse).normalize();
+  }
+  solve(point, speed = DEFAULT_POINTER_DRAG_SPEED, invert = false) {
+    const multiplier = (Number.isFinite(speed) && speed >= 0 ? speed : DEFAULT_POINTER_DRAG_SPEED) / DEFAULT_POINTER_DRAG_SPEED * (invert ? -1 : 1);
+    if (multiplier === 0) return { yaw: 0, pitch: 0 };
+    const ray = this.ray({
+      x: this.start.x + (point.x - this.start.x) * multiplier,
+      y: this.start.y + (point.y - this.start.y) * multiplier
+    });
+    const latitude = Math.asin(import_three2.MathUtils.clamp(this.anchor.y / Math.max(Math.hypot(ray.y, ray.z), 1e-12), -1, 1));
+    const offset = Math.atan2(ray.y, -ray.z);
+    const originPitch = import_three2.MathUtils.degToRad(this.origin.pitch);
+    const candidates = [latitude - offset, Math.PI - latitude - offset, -Math.PI - latitude - offset];
+    let pitch = candidates[0];
+    let distance = Infinity;
+    for (const candidate of candidates) {
+      const bounded = import_three2.MathUtils.clamp(candidate, -Math.PI / 2, Math.PI / 2);
+      const nextDistance = Math.abs(candidate - bounded) * 10 + Math.abs(bounded - originPitch);
+      if (nextDistance < distance) {
+        pitch = bounded;
+        distance = nextDistance;
+      }
+    }
+    const z = Math.sin(pitch) * ray.y + Math.cos(pitch) * ray.z;
+    const yaw = import_three2.MathUtils.radToDeg(Math.atan2(this.anchor.x, -this.anchor.z) - Math.atan2(ray.x, -z));
+    return { yaw: normalizeViewYaw(yaw - this.origin.yaw), pitch: import_three2.MathUtils.radToDeg(pitch) - this.origin.pitch };
+  }
+};
+function createPointerDrag(camera, element, runtime, source) {
+  let anchor;
+  let revision = -1;
+  let projectionKey = "";
+  let pending;
+  let displayed;
+  let lastPoint;
+  let fresh = false;
+  let lastFrameDelta = 1 / 60;
+  let samples = [];
+  let gestureSpeed = DEFAULT_POINTER_DRAG_SPEED;
+  let gestureInvert = false;
+  const key = (rect) => `${rect.left},${rect.top},${rect.width},${rect.height},${camera.projectionMatrix.elements.join(",")}`;
+  const place = (point) => {
+    const handle = runtime();
+    displayed = { ...point };
+    lastPoint = { ...point };
+    pending = void 0;
+    revision = handle?.getPointerDragState().revision ?? -1;
+    anchor = void 0;
+    if (!(camera instanceof import_three2.PerspectiveCamera) || !handle?.getPointerDragState().anchored) return;
+    const rect = element.getBoundingClientRect();
+    projectionKey = key(rect);
+    anchor = new PointerDragAnchor(point, handle.getView(), rect, camera.clone());
+  };
+  const remember = (point, at) => {
+    samples.push({ x: point.x, y: point.y, at });
+    const cutoff = at - POINTER_VELOCITY_MAX_AGE_MS;
+    while (samples.length > 2 && samples[0].at < cutoff) samples.shift();
+  };
+  const apply = (point, previous, speed, invert, recordVelocity, releaseVelocity) => {
+    const handle = runtime();
+    if (!handle) return;
+    const rect = element.getBoundingClientRect();
+    if (anchor && key(rect) !== projectionKey) {
+      const queued = pending;
+      place(displayed ?? previous);
+      pending = queued;
+    }
+    const options = {
+      recordVelocity: releaseVelocity ? false : recordVelocity,
+      source,
+      ...releaseVelocity ? { velocity: releaseVelocity } : {}
+    };
+    if (anchor) {
+      handle.applyViewDelta(anchor.solve(point, speed, invert), {
+        ...options,
+        pointerOrigin: anchor.origin
+      });
+    } else {
+      handle.applyViewDelta({
+        yaw: -(point.x - previous.x) * 360 * speed / Math.max(rect.width, 1) * (invert ? -1 : 1),
+        pitch: (point.y - previous.y) * 180 * speed / Math.max(rect.height, 1) * (invert ? -1 : 1)
+      }, options);
+    }
+  };
+  const valid = () => revision === (runtime()?.getPointerDragState().revision ?? -1) && !runtime()?.isInteractionLocked();
+  const clear = () => {
+    anchor = void 0;
+    revision = -1;
+    pending = void 0;
+    displayed = void 0;
+    samples = [];
+  };
+  return {
+    start(point, at = performance.now()) {
+      gestureSpeed = DEFAULT_POINTER_DRAG_SPEED;
+      gestureInvert = false;
+      samples = [];
+      remember(point, at);
+      place(point);
+    },
+    valid,
+    clear,
+    suspend: () => {
+      anchor = void 0;
+      pending = void 0;
+      displayed = void 0;
+      samples = [];
+    },
+    move(point, previous, speed, invert, at = performance.now()) {
+      fresh = true;
+      gestureSpeed = speed;
+      gestureInvert = invert;
+      remember(point, at);
+      pending = { point, previous: lastPoint ?? previous, speed, invert };
+    },
+    flush(deltaSeconds = lastFrameDelta, immediate = false, releaseVelocity) {
+      if (deltaSeconds > 0) lastFrameDelta = deltaSeconds;
+      if (!pending) return;
+      const sample = pending;
+      if (!anchor || immediate) {
+        pending = void 0;
+        apply(sample.point, sample.previous, sample.speed, sample.invert, fresh, releaseVelocity);
+        fresh = false;
+        lastPoint = sample.point;
+        displayed = sample.point;
+        return;
+      }
+      const dt = deltaSeconds > 0 ? deltaSeconds : lastFrameDelta;
+      const previousDisplay = displayed ?? sample.previous;
+      const dx = sample.point.x - previousDisplay.x;
+      const dy = sample.point.y - previousDisplay.y;
+      const distance = Math.hypot(dx, dy);
+      const ratio = distance > 0.01 ? POINTER_FOLLOW_TIME_SECONDS / (POINTER_FOLLOW_TIME_SECONDS + dt) : 0;
+      const point = { x: sample.point.x - dx * ratio, y: sample.point.y - dy * ratio };
+      apply(point, sample.previous, sample.speed, sample.invert, fresh);
+      fresh = false;
+      lastPoint = sample.point;
+      displayed = point;
+      if (ratio === 0) pending = void 0;
+    },
+    release() {
+      const handle = runtime();
+      if (!handle || !valid()) {
+        clear();
+        return;
+      }
+      const newestAt = samples[samples.length - 1]?.at ?? 0;
+      const velocity = pointerReleaseVelocity(samples, Math.max(performance.now(), newestAt), (point) => {
+        if (anchor) return anchor.solve(point, gestureSpeed, gestureInvert);
+        const origin = samples[0] ?? point;
+        const rect = element.getBoundingClientRect();
+        const sign = gestureInvert ? -1 : 1;
+        return {
+          yaw: -(point.x - origin.x) * 360 * gestureSpeed / Math.max(rect.width, 1) * sign,
+          pitch: (point.y - origin.y) * 180 * gestureSpeed / Math.max(rect.height, 1) * sign
+        };
+      });
+      if (pending) this.flush(lastFrameDelta, true, velocity);
+      else handle.applyViewDelta({}, { velocity, source });
+      clear();
+    }
+  };
+}
+
+// src/mouse-controls.tsx
 var DEFAULT_ROTATE_SPEED2 = 0.35;
 var DEFAULT_ZOOM_SPEED2 = 0.08;
 var BUTTON_FLAG = {
@@ -3726,6 +3956,9 @@ var BUTTON_FLAG = {
 function resolveSpeed2(value, fallback) {
   return Number.isFinite(value) && value >= 0 ? value : fallback;
 }
+function pointerAt(event) {
+  return event.timeStamp > 0 ? event.timeStamp : performance.now();
+}
 function resolveButtons(buttons) {
   const list = buttons && buttons.length > 0 ? buttons : ["left"];
   return new Set(list.map((button) => BUTTON_FLAG[button]));
@@ -3741,7 +3974,9 @@ function MouseControls({
 }) {
   useClaimControlChannel("mouse");
   const controlsRef = (0, import_react9.useContext)(PanoramaViewContext);
-  const { gl } = (0, import_fiber4.useThree)();
+  const { gl, camera } = (0, import_fiber4.useThree)();
+  const validateDragRef = (0, import_react9.useRef)(void 0);
+  (0, import_fiber4.useFrame)((_, delta) => validateDragRef.current?.(delta), -1);
   const pointersRef = (0, import_react9.useRef)(
     /* @__PURE__ */ new Map()
   );
@@ -3764,6 +3999,7 @@ function MouseControls({
   };
   (0, import_react9.useEffect)(() => {
     const element = gl.domElement;
+    const drag = createPointerDrag(camera, element, () => controlsRef.current, "mouse");
     const allowedButtons = resolveButtons(buttons);
     const clearPointers = () => {
       for (const pointerId of pointersRef.current.keys()) {
@@ -3772,8 +4008,13 @@ function MouseControls({
         }
       }
       pointersRef.current.clear();
+      drag.clear();
       controlsRef.current?.setPointerActive("mouse", false, { cancelled: true });
     };
+    validateDragRef.current = (delta) => {
+      if (pointersRef.current.size && !drag.valid()) clearPointers();
+      else drag.flush(delta);
+    };
     if (!enabled) {
       clearPointers();
       return;
@@ -3804,6 +4045,7 @@ function MouseControls({
       });
       element.setPointerCapture?.(event.pointerId);
       syncActive();
+      drag.start({ x: event.clientX, y: event.clientY }, pointerAt(event));
     };
     const onPointerMove = (event) => {
       if (!isMouseLike(event)) {
@@ -3823,23 +4065,15 @@ function MouseControls({
         at: performance.now()
       };
       pointersRef.current.set(event.pointerId, next);
-      const rect = element.getBoundingClientRect();
-      const speed = resolveSpeed2(
-        optionsRef.current.rotateSpeed,
-        DEFAULT_ROTATE_SPEED2
-      );
-      const sign = optionsRef.current.invert ? -1 : 1;
-      const deltaYaw = sign * -(next.x - previous.x) * 360 * speed / Math.max(rect.width, 1);
-      const deltaPitch = sign * (next.y - previous.y) * 180 * speed / Math.max(rect.height, 1);
-      controlsRef.current?.applyViewDelta(
-        { yaw: deltaYaw, pitch: deltaPitch },
-        { recordVelocity: true, source: "mouse" }
-      );
+      const speed = resolveSpeed2(optionsRef.current.rotateSpeed, DEFAULT_ROTATE_SPEED2);
+      drag.move(next, previous, speed, optionsRef.current.invert, pointerAt(event));
     };
     const releasePointer = (event) => {
       if (!pointersRef.current.has(event.pointerId)) {
         return;
       }
+      if (event.type === "pointerup") drag.release();
+      else drag.clear();
       pointersRef.current.delete(event.pointerId);
       if (element.hasPointerCapture?.(event.pointerId)) {
         element.releasePointerCapture?.(event.pointerId);
@@ -3876,6 +4110,7 @@ function MouseControls({
     element.addEventListener("lostpointercapture", releasePointer);
     element.addEventListener("wheel", onWheel, { passive: false });
     return () => {
+      validateDragRef.current = void 0;
       element.removeEventListener("pointerdown", onPointerDown);
       element.removeEventListener("pointermove", onPointerMove);
       element.removeEventListener("pointerup", releasePointer);
@@ -3884,7 +4119,7 @@ function MouseControls({
       element.removeEventListener("wheel", onWheel);
       clearPointers();
     };
-  }, [buttons, controlsRef, enabled, gl]);
+  }, [buttons, controlsRef, enabled, gl, camera]);
   return null;
 }
 
@@ -5299,10 +5534,10 @@ function usePanoOverlayHost(isFullscreen) {
 // src/panorama-event-surface.tsx
 var import_fiber7 = require("@react-three/fiber");
 var import_react16 = require("react");
-var import_three3 = require("three");
+var import_three4 = require("three");
 
 // src/hotspot/coordinates.ts
-var import_three2 = require("three");
+var import_three3 = require("three");
 
 // src/hotspot/types.ts
 var MAX_HOTSPOT_PITCH = 90;
@@ -5325,13 +5560,13 @@ function normalizePanoYaw(yaw) {
   if (!Number.isFinite(yaw)) {
     return 0;
   }
-  return import_three2.MathUtils.euclideanModulo(yaw + 180, 360) - 180;
+  return import_three3.MathUtils.euclideanModulo(yaw + 180, 360) - 180;
 }
 function clampPanoPitch(pitch) {
   if (!Number.isFinite(pitch)) {
     return 0;
   }
-  const clamped = import_three2.MathUtils.clamp(
+  const clamped = import_three3.MathUtils.clamp(
     pitch,
     -MAX_HOTSPOT_PITCH,
     MAX_HOTSPOT_PITCH
@@ -5348,10 +5583,10 @@ function normalizePanoPosition(position) {
 function panoPositionToVector3(position, radius = 1) {
   const normalized = normalizePanoPosition(position);
   const safeRadius = Number.isFinite(radius) ? Math.max(0, radius) : 1;
-  const yaw = import_three2.MathUtils.degToRad(normalized.yaw);
-  const pitch = import_three2.MathUtils.degToRad(normalized.pitch);
+  const yaw = import_three3.MathUtils.degToRad(normalized.yaw);
+  const pitch = import_three3.MathUtils.degToRad(normalized.pitch);
   const cosPitch = Math.cos(pitch);
-  return new import_three2.Vector3(
+  return new import_three3.Vector3(
     cosPitch * Math.sin(yaw) * safeRadius,
     Math.sin(pitch) * safeRadius,
     -cosPitch * Math.cos(yaw) * safeRadius
@@ -5363,9 +5598,9 @@ function vector3ToPanoPosition(vector) {
     return { yaw: 0, pitch: 0 };
   }
   return normalizePanoPosition({
-    yaw: import_three2.MathUtils.radToDeg(Math.atan2(vector.x, -vector.z)),
-    pitch: import_three2.MathUtils.radToDeg(
-      Math.asin(import_three2.MathUtils.clamp(vector.y / length, -1, 1))
+    yaw: import_three3.MathUtils.radToDeg(Math.atan2(vector.x, -vector.z)),
+    pitch: import_three3.MathUtils.radToDeg(
+      Math.asin(import_three3.MathUtils.clamp(vector.y / length, -1, 1))
     )
   });
 }
@@ -5398,9 +5633,9 @@ function PanoramaEventSurface() {
       return;
     }
     const element = gl.domElement;
-    const ndc = new import_three3.Vector2();
-    const raycaster = new import_three3.Raycaster();
-    const direction = new import_three3.Vector3();
+    const ndc = new import_three4.Vector2();
+    const raycaster = new import_three4.Raycaster();
+    const direction = new import_three4.Vector3();
     const handleContextMenu = (nativeEvent) => {
       const rect = element.getBoundingClientRect();
       if (rect.width <= 0 || rect.height <= 0) {
@@ -5452,7 +5687,7 @@ function PanoramaEventSurface() {
             depthTest: false,
             depthWrite: false,
             opacity: 0,
-            side: import_three3.BackSide,
+            side: import_three4.BackSide,
             transparent: true
           }
         )
@@ -5482,6 +5717,9 @@ function notifyScenesHost(host) {
 var import_fiber8 = require("@react-three/fiber");
 var import_react18 = require("react");
 var DEFAULT_ROTATE_SPEED3 = 0.35;
+function pointerAt2(event) {
+  return event.timeStamp > 0 ? event.timeStamp : performance.now();
+}
 function resolveSpeed3(value, fallback) {
   return Number.isFinite(value) && value >= 0 ? value : fallback;
 }
@@ -5496,7 +5734,9 @@ function TouchControls({
 }) {
   useClaimControlChannel("touch");
   const controlsRef = (0, import_react18.useContext)(PanoramaViewContext);
-  const { gl } = (0, import_fiber8.useThree)();
+  const { gl, camera } = (0, import_fiber8.useThree)();
+  const validateDragRef = (0, import_react18.useRef)(void 0);
+  (0, import_fiber8.useFrame)((_, delta) => validateDragRef.current?.(delta), -1);
   const pointersRef = (0, import_react18.useRef)(/* @__PURE__ */ new Map());
   const pinchDistanceRef = (0, import_react18.useRef)(null);
   const optionsRef = (0, import_react18.useRef)({ rotateSpeed, invert, pinchZoom });
@@ -5506,6 +5746,7 @@ function TouchControls({
   optionsRef.current = { rotateSpeed, invert, pinchZoom };
   (0, import_react18.useEffect)(() => {
     const element = gl.domElement;
+    const drag = createPointerDrag(camera, element, () => controlsRef.current, "touch");
     const clearPointers = () => {
       for (const pointerId of pointersRef.current.keys()) {
         if (element.hasPointerCapture?.(pointerId)) {
@@ -5513,9 +5754,14 @@ function TouchControls({
         }
       }
       pointersRef.current.clear();
+      drag.clear();
       pinchDistanceRef.current = null;
       controlsRef.current?.setPointerActive("touch", false, { cancelled: true });
     };
+    validateDragRef.current = (delta) => {
+      if (pointersRef.current.size && !drag.valid()) clearPointers();
+      else drag.flush(delta);
+    };
     if (!enabled) {
       clearPointers();
       return;
@@ -5542,7 +5788,9 @@ function TouchControls({
       });
       element.setPointerCapture?.(event.pointerId);
       syncActive();
-      if (pointersRef.current.size === 2) {
+      drag.start({ x: event.clientX, y: event.clientY }, pointerAt2(event));
+      if (pointersRef.current.size >= 2) {
+        drag.suspend();
         const [first, second] = Array.from(pointersRef.current.values());
         pinchDistanceRef.current = pointerDistance(first, second);
       }
@@ -5567,6 +5815,7 @@ function TouchControls({
       pointersRef.current.set(event.pointerId, next);
       const pointers = Array.from(pointersRef.current.values());
       if (pointers.length >= 2) {
+        drag.suspend();
         if (!optionsRef.current.pinchZoom) {
           return;
         }
@@ -5585,23 +5834,16 @@ function TouchControls({
         }
         return;
       }
-      const rect = element.getBoundingClientRect();
-      const speed = resolveSpeed3(
-        optionsRef.current.rotateSpeed,
-        DEFAULT_ROTATE_SPEED3
-      );
-      const sign = optionsRef.current.invert ? -1 : 1;
-      const deltaYaw = sign * -(next.x - previous.x) * 360 * speed / Math.max(rect.width, 1);
-      const deltaPitch = sign * (next.y - previous.y) * 180 * speed / Math.max(rect.height, 1);
-      controlsRef.current?.applyViewDelta(
-        { yaw: deltaYaw, pitch: deltaPitch },
-        { recordVelocity: true, source: "touch" }
-      );
+      const speed = resolveSpeed3(optionsRef.current.rotateSpeed, DEFAULT_ROTATE_SPEED3);
+      drag.move(next, previous, speed, optionsRef.current.invert, pointerAt2(event));
     };
     const releasePointer = (event) => {
       if (!pointersRef.current.has(event.pointerId)) {
         return;
       }
+      const pinch = pointersRef.current.size >= 2;
+      if (event.type === "pointerup" && !pinch) drag.release();
+      else drag.clear();
       pointersRef.current.delete(event.pointerId);
       if (element.hasPointerCapture?.(event.pointerId)) {
         element.releasePointerCapture?.(event.pointerId);
@@ -5610,6 +5852,8 @@ function TouchControls({
         pinchDistanceRef.current = null;
       }
       syncActive(event.type !== "pointerup");
+      const remaining = pointersRef.current.values().next().value;
+      if (remaining) drag.start(remaining, pointerAt2(event));
     };
     element.addEventListener("pointerdown", onPointerDown);
     element.addEventListener("pointermove", onPointerMove);
@@ -5617,6 +5861,7 @@ function TouchControls({
     element.addEventListener("pointercancel", releasePointer);
     element.addEventListener("lostpointercapture", releasePointer);
     return () => {
+      validateDragRef.current = void 0;
       element.removeEventListener("pointerdown", onPointerDown);
       element.removeEventListener("pointermove", onPointerMove);
       element.removeEventListener("pointerup", releasePointer);
@@ -5624,7 +5869,7 @@ function TouchControls({
       element.removeEventListener("lostpointercapture", releasePointer);
       clearPointers();
     };
-  }, [controlsRef, enabled, gl]);
+  }, [controlsRef, enabled, gl, camera]);
   return null;
 }
 
@@ -7247,12 +7492,12 @@ function WebVRChromeBridge({ host }) {
 }
 
 // src/webvr/stereo-view.ts
-var import_three4 = require("three");
-var PROJECT = new import_three4.Vector3();
+var import_three5 = require("three");
+var PROJECT = new import_three5.Vector3();
 function createWebVRStereoView() {
   return {
     active: false,
-    stereo: new import_three4.StereoCamera()
+    stereo: new import_three5.StereoCamera()
   };
 }
 function isFallbackStereoMode(mode) {
@@ -7276,11 +7521,11 @@ function projectStereoHtmlPosition(el, camera, size, eye) {
 var import_fiber9 = require("@react-three/fiber");
 var import_xr2 = require("@react-three/xr");
 var import_react26 = require("react");
-var import_three5 = require("three");
+var import_three6 = require("three");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function PanoramaXROrigin() {
   const originRef = (0, import_react26.useRef)(null);
-  const localHeadPositionRef = (0, import_react26.useRef)(new import_three5.Vector3());
+  const localHeadPositionRef = (0, import_react26.useRef)(new import_three6.Vector3());
   const session2 = (0, import_xr2.useXR)((state) => state.session);
   const gl = (0, import_fiber9.useThree)((state) => state.gl);
   (0, import_fiber9.useFrame)(() => {
@@ -8030,7 +8275,7 @@ var import_react51 = require("react");
 // src/scenes.tsx
 var import_fiber18 = require("@react-three/fiber");
 var import_react38 = require("react");
-var import_three19 = require("three");
+var import_three20 = require("three");
 
 // src/scene-detail.tsx
 var import_react28 = require("react");
@@ -8102,12 +8347,12 @@ function isSnapshotTransition(preset) {
 // src/scene-transitions/snapshot-hold.tsx
 var import_fiber11 = require("@react-three/fiber");
 var import_react29 = require("react");
-var import_three8 = require("three");
+var import_three9 = require("three");
 
 // src/scene-transitions/overlay-utils.ts
-var import_three6 = require("three");
+var import_three7 = require("three");
 var OVERLAY_RENDER_ORDER = 1e4;
-var FULLSCREEN_PLANE = new import_three6.PlaneGeometry(1, 1);
+var FULLSCREEN_PLANE = new import_three7.PlaneGeometry(1, 1);
 function isPerspectiveCamera(camera) {
   return camera.isPerspectiveCamera === true;
 }
@@ -8126,7 +8371,7 @@ function overlayProgress(elapsedTime, duration, startTime) {
 }
 
 // src/scene-transitions/snapshot-shaders.ts
-var import_three7 = require("three");
+var import_three8 = require("three");
 
 // src/scene-transitions/glsl.ts
 var GLSL_COMMON = `
@@ -8418,15 +8663,15 @@ var SNAPSHOT_FRAGMENT_SHADERS = {
   `)
 };
 function createSnapshotMaterial(preset, texture) {
-  return new import_three7.ShaderMaterial({
+  return new import_three8.ShaderMaterial({
     transparent: true,
     depthTest: false,
     depthWrite: false,
-    side: import_three7.DoubleSide,
+    side: import_three8.DoubleSide,
     uniforms: {
       map: { value: texture },
       progress: { value: 0 },
-      resolution: { value: new import_three7.Vector2(1, 1) }
+      resolution: { value: new import_three8.Vector2(1, 1) }
     },
     vertexShader: SNAPSHOT_VERTEX_SHADER,
     fragmentShader: SNAPSHOT_FRAGMENT_SHADERS[preset]
@@ -8438,7 +8683,7 @@ var import_jsx_runtime13 = require("react/jsx-runtime");
 function SnapshotHold({ snapshot }) {
   const { camera, gl } = (0, import_fiber11.useThree)();
   const meshRef = (0, import_react29.useRef)(null);
-  const directionRef = (0, import_react29.useRef)(new import_three8.Vector3());
+  const directionRef = (0, import_react29.useRef)(new import_three9.Vector3());
   const material = (0, import_react29.useMemo)(
     () => createSnapshotMaterial("crossfade", snapshot.texture),
     [snapshot.texture]
@@ -8522,7 +8767,7 @@ function phaseAfterSnapshot(preset, hold) {
 // src/scene-transitions/particle-overlay.tsx
 var import_fiber12 = require("@react-three/fiber");
 var import_react30 = require("react");
-var import_three9 = require("three");
+var import_three10 = require("three");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var PARTICLE_GRID = 48;
 var PARTICLE_COUNT = PARTICLE_GRID * PARTICLE_GRID;
@@ -8576,8 +8821,8 @@ var PARTICLE_FRAGMENT_SHADER = `
   }
 `;
 function createParticleGeometry() {
-  const quad = new import_three9.PlaneGeometry(1, 1);
-  const geometry = new import_three9.InstancedBufferGeometry();
+  const quad = new import_three10.PlaneGeometry(1, 1);
+  const geometry = new import_three10.InstancedBufferGeometry();
   if (quad.index) {
     geometry.setIndex(quad.index.clone());
   }
@@ -8587,7 +8832,7 @@ function createParticleGeometry() {
   for (let i = 0; i < PARTICLE_COUNT; i += 1) {
     indexes[i] = i;
   }
-  geometry.setAttribute("instanceIndex", new import_three9.InstancedBufferAttribute(indexes, 1));
+  geometry.setAttribute("instanceIndex", new import_three10.InstancedBufferAttribute(indexes, 1));
   geometry.instanceCount = PARTICLE_COUNT;
   quad.dispose();
   return geometry;
@@ -8603,18 +8848,18 @@ function ParticleOverlay({
   const meshRef = (0, import_react30.useRef)(null);
   const startRef = (0, import_react30.useRef)(null);
   const finishedRef = (0, import_react30.useRef)(false);
-  const directionRef = (0, import_react30.useRef)(new import_three9.Vector3());
+  const directionRef = (0, import_react30.useRef)(new import_three10.Vector3());
   const geometry = (0, import_react30.useMemo)(() => createParticleGeometry(), []);
   const material = (0, import_react30.useMemo)(
-    () => new import_three9.ShaderMaterial({
+    () => new import_three10.ShaderMaterial({
       transparent: true,
       depthTest: false,
       depthWrite: false,
-      side: import_three9.DoubleSide,
+      side: import_three10.DoubleSide,
       uniforms: {
         map: { value: snapshot.texture },
         progress: { value: 0 },
-        grid: { value: new import_three9.Vector2(PARTICLE_GRID, PARTICLE_GRID) }
+        grid: { value: new import_three10.Vector2(PARTICLE_GRID, PARTICLE_GRID) }
       },
       vertexShader: PARTICLE_VERTEX_SHADER,
       fragmentShader: PARTICLE_FRAGMENT_SHADER
@@ -8660,7 +8905,7 @@ function ParticleOverlay({
 // src/scene-transitions/snapshot-overlay.tsx
 var import_fiber13 = require("@react-three/fiber");
 var import_react31 = require("react");
-var import_three10 = require("three");
+var import_three11 = require("three");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function SnapshotOverlay({
   snapshot,
@@ -8673,7 +8918,7 @@ function SnapshotOverlay({
   const meshRef = (0, import_react31.useRef)(null);
   const startRef = (0, import_react31.useRef)(null);
   const finishedRef = (0, import_react31.useRef)(false);
-  const directionRef = (0, import_react31.useRef)(new import_three10.Vector3());
+  const directionRef = (0, import_react31.useRef)(new import_three11.Vector3());
   const material = (0, import_react31.useMemo)(() => {
     if (!isSnapshotTransition(transition.preset)) {
       return null;
@@ -8764,11 +9009,11 @@ function TransitionOverlay(props) {
 // src/sphere.tsx
 var import_fiber14 = require("@react-three/fiber");
 var import_react33 = require("react");
-var import_three12 = require("three");
+var import_three13 = require("three");
 
 // src/pano-filter/pano-basic-material.tsx
 var import_react32 = require("react");
-var import_three11 = require("three");
+var import_three12 = require("three");
 
 // src/pano-filter/shaders.ts
 var GLSL_FILTER_COMMON = `
@@ -8935,7 +9180,7 @@ function injectPanoColorMatrixShader(shader) {
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function matrixUniforms(matrix) {
   return {
-    matrix: new import_three11.Matrix4().set(
+    matrix: new import_three12.Matrix4().set(
       matrix[0],
       matrix[1],
       matrix[2],
@@ -8953,7 +9198,7 @@ function matrixUniforms(matrix) {
       matrix[17],
       matrix[18]
     ),
-    offset: new import_three11.Vector4(matrix[4], matrix[9], matrix[14], matrix[19])
+    offset: new import_three12.Vector4(matrix[4], matrix[9], matrix[14], matrix[19])
   };
 }
 function PanoBasicMaterial({
@@ -9024,7 +9269,7 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
       return;
     }
     let active = true;
-    const loader = new import_three12.TextureLoader();
+    const loader = new import_three13.TextureLoader();
     setTexture(null);
     loader.load(
       url,
@@ -9033,13 +9278,13 @@ function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three12.SRGBColorSpace;
-        loadedTexture.wrapS = import_three12.RepeatWrapping;
+        loadedTexture.colorSpace = import_three13.SRGBColorSpace;
+        loadedTexture.wrapS = import_three13.RepeatWrapping;
         loadedTexture.repeat.x = -1;
         loadedTexture.offset.x = 1;
         loadedTexture.anisotropy = anisotropy;
-        loadedTexture.magFilter = import_three12.LinearFilter;
-        loadedTexture.minFilter = generateMipmaps ? import_three12.LinearMipmapLinearFilter : import_three12.LinearFilter;
+        loadedTexture.magFilter = import_three13.LinearFilter;
+        loadedTexture.minFilter = generateMipmaps ? import_three13.LinearMipmapLinearFilter : import_three13.LinearFilter;
         loadedTexture.generateMipmaps = generateMipmaps;
         loadedTexture.needsUpdate = true;
         setTexture(loadedTexture);
@@ -9123,7 +9368,7 @@ function Sphere({
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "mesh",
     {
-      rotation: [0, import_three12.MathUtils.degToRad(90 + yawOffset2), 0],
+      rotation: [0, import_three13.MathUtils.degToRad(90 + yawOffset2), 0],
       visible,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
@@ -9131,7 +9376,7 @@ function Sphere({
           PanoBasicMaterial,
           {
             map: displayTexture,
-            side: import_three12.BackSide,
+            side: import_three13.BackSide,
             toneMapped: false
           }
         )
@@ -9143,10 +9388,10 @@ function Sphere({
 // src/sphere-tile/sphere-tile.tsx
 var import_fiber16 = require("@react-three/fiber");
 var import_react36 = require("react");
-var import_three16 = require("three");
+var import_three17 = require("three");
 
 // src/tile/texture-manager.ts
-var import_three13 = require("three");
+var import_three14 = require("three");
 var EMPTY_TEXTURE_SNAPSHOT = {
   status: "idle",
   texture: null,
@@ -9154,7 +9399,7 @@ var EMPTY_TEXTURE_SNAPSHOT = {
 };
 var TileTextureManager = class {
   constructor(options) {
-    this.loader = new import_three13.TextureLoader();
+    this.loader = new import_three14.TextureLoader();
     this.entries = /* @__PURE__ */ new Map();
     this.queue = [];
     this.activeLoads = 0;
@@ -9326,11 +9571,11 @@ var TileTextureManager = class {
     }
   }
   configureTexture(texture) {
-    texture.colorSpace = import_three13.SRGBColorSpace;
-    texture.wrapS = import_three13.ClampToEdgeWrapping;
-    texture.wrapT = import_three13.ClampToEdgeWrapping;
-    texture.magFilter = import_three13.LinearFilter;
-    texture.minFilter = import_three13.LinearFilter;
+    texture.colorSpace = import_three14.SRGBColorSpace;
+    texture.wrapS = import_three14.ClampToEdgeWrapping;
+    texture.wrapT = import_three14.ClampToEdgeWrapping;
+    texture.magFilter = import_three14.LinearFilter;
+    texture.minFilter = import_three14.LinearFilter;
     texture.generateMipmaps = false;
     texture.anisotropy = Math.min(4, this.options.anisotropy);
     texture.needsUpdate = true;
@@ -9403,7 +9648,7 @@ function useSharedTileTextureManager() {
 
 // src/tile/texture-hooks.ts
 var import_react35 = require("react");
-var import_three14 = require("three");
+var import_three15 = require("three");
 function usePreviewTexture(url, anisotropy, onError) {
   const [texture, setTexture] = (0, import_react35.useState)(null);
   const onErrorRef = (0, import_react35.useRef)(onError);
@@ -9414,7 +9659,7 @@ function usePreviewTexture(url, anisotropy, onError) {
       return;
     }
     let active = true;
-    const loader = new import_three14.TextureLoader();
+    const loader = new import_three15.TextureLoader();
     setTexture(null);
     loader.load(
       url,
@@ -9423,11 +9668,11 @@ function usePreviewTexture(url, anisotropy, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three14.SRGBColorSpace;
-        loadedTexture.wrapS = import_three14.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three14.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three14.LinearFilter;
-        loadedTexture.minFilter = import_three14.LinearFilter;
+        loadedTexture.colorSpace = import_three15.SRGBColorSpace;
+        loadedTexture.wrapS = import_three15.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three15.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three15.LinearFilter;
+        loadedTexture.minFilter = import_three15.LinearFilter;
         loadedTexture.generateMipmaps = false;
         loadedTexture.anisotropy = Math.min(4, anisotropy);
         loadedTexture.needsUpdate = true;
@@ -9476,7 +9721,7 @@ function useManagedTexture(manager, key, url, address) {
 }
 
 // src/sphere-tile/layout.ts
-var import_three15 = require("three");
+var import_three16 = require("three");
 function positiveInteger2(value, name) {
   if (!Number.isSafeInteger(value) || value <= 0) {
     throw new Error(`${name} must be a positive safe integer`);
@@ -9547,9 +9792,9 @@ function sphereTileRange(address) {
   };
 }
 function spherePoint(u, v, yawOffset2 = 0, radius = DEFAULT_PANORAMA_RADIUS) {
-  const yaw = (u - 0.5) * Math.PI * 2 + import_three15.MathUtils.degToRad(yawOffset2);
+  const yaw = (u - 0.5) * Math.PI * 2 + import_three16.MathUtils.degToRad(yawOffset2);
   const pitch = (0.5 - v) * Math.PI;
-  return new import_three15.Vector3(
+  return new import_three16.Vector3(
     Math.sin(yaw) * Math.cos(pitch) * radius,
     Math.sin(pitch) * radius,
     -Math.cos(yaw) * Math.cos(pitch) * radius
@@ -9563,7 +9808,7 @@ function sphereTileBounds(address, yawOffset2) {
     if (u > left && u < right) us.push(u);
   }
   const vs = top < 0.5 && bottom > 0.5 ? [top, 0.5, bottom] : [top, bottom];
-  return new import_three15.Box3().setFromPoints(
+  return new import_three16.Box3().setFromPoints(
     us.flatMap((u) => vs.map((v) => spherePoint(u, v, yawOffset2)))
   );
 }
@@ -9589,9 +9834,9 @@ function sphereTileGeometry(address, yawOffset2, radius = DEFAULT_PANORAMA_RADIU
       }
     }
   }
-  const geometry = new import_three15.BufferGeometry();
-  geometry.setAttribute("position", new import_three15.Float32BufferAttribute(positions, 3));
-  geometry.setAttribute("uv", new import_three15.Float32BufferAttribute(uvs, 2));
+  const geometry = new import_three16.BufferGeometry();
+  geometry.setAttribute("position", new import_three16.Float32BufferAttribute(positions, 3));
+  geometry.setAttribute("uv", new import_three16.Float32BufferAttribute(uvs, 2));
   geometry.setIndex(indices);
   geometry.computeBoundingSphere();
   return geometry;
@@ -9637,7 +9882,7 @@ function SpherePatch({
         PanoBasicMaterial,
         {
           map: texture,
-          side: import_three16.BackSide,
+          side: import_three17.BackSide,
           depthTest: false,
           depthWrite: false,
           toneMapped: false
@@ -9779,9 +10024,9 @@ function SphereTileSource({
   const targetKeysRef = (0, import_react36.useRef)([]);
   const scratch = (0, import_react36.useMemo)(
     () => ({
-      camera: new import_three16.PerspectiveCamera(),
-      frustum: new import_three16.Frustum(),
-      matrix: new import_three16.Matrix4(),
+      camera: new import_three17.PerspectiveCamera(),
+      frustum: new import_three17.Frustum(),
+      matrix: new import_three17.Matrix4(),
       quaternion: camera.quaternion.clone(),
       fov: NaN,
       width: 0,
@@ -9796,7 +10041,7 @@ function SphereTileSource({
     [camera, candidates]
   );
   (0, import_fiber16.useFrame)(() => {
-    if (!(camera instanceof import_three16.PerspectiveCamera)) return;
+    if (!(camera instanceof import_three17.PerspectiveCamera)) return;
     const now = performance.now(), dpr = gl.getPixelRatio();
     const managerChanged = scratch.manager !== manager;
     const loadModeChanged = scratch.loadMode !== loadMode;
@@ -9900,10 +10145,10 @@ function SphereTile({ multires, ...props }) {
 // src/tile/tile.tsx
 var import_fiber17 = require("@react-three/fiber");
 var import_react37 = require("react");
-var import_three18 = require("three");
+var import_three19 = require("three");
 
 // src/tile/face-layout.ts
-var import_three17 = require("three");
+var import_three18 = require("three");
 var CUBE_FACES = ["f", "r", "b", "l", "u", "d"];
 var PREVIEW_FACE_ORDER = ["l", "f", "r", "b", "u", "d"];
 var CUBE_RADIUS = DEFAULT_PANORAMA_RADIUS;
@@ -9954,8 +10199,8 @@ function getFaceQuaternion(face) {
     return cached;
   }
   const transform = getFaceTransform(face);
-  const quaternion = new import_three17.Quaternion().setFromEuler(
-    new import_three17.Euler(...transform.rotation, "XYZ")
+  const quaternion = new import_three18.Quaternion().setFromEuler(
+    new import_three18.Euler(...transform.rotation, "XYZ")
   );
   faceQuaternionCache.set(face, quaternion);
   return quaternion;
@@ -9966,17 +10211,17 @@ function getTileBoundingBox(address, radius = CUBE_RADIUS) {
   const halfWidth = local.width / 2;
   const halfHeight = local.height / 2;
   const quaternion = getFaceQuaternion(address.face);
-  const position = new import_three17.Vector3(...transform.position);
+  const position = new import_three18.Vector3(...transform.position);
   const corners = [
-    new import_three17.Vector3(local.x - halfWidth, local.y - halfHeight, 0),
-    new import_three17.Vector3(local.x + halfWidth, local.y - halfHeight, 0),
-    new import_three17.Vector3(local.x - halfWidth, local.y + halfHeight, 0),
-    new import_three17.Vector3(local.x + halfWidth, local.y + halfHeight, 0)
+    new import_three18.Vector3(local.x - halfWidth, local.y - halfHeight, 0),
+    new import_three18.Vector3(local.x + halfWidth, local.y - halfHeight, 0),
+    new import_three18.Vector3(local.x - halfWidth, local.y + halfHeight, 0),
+    new import_three18.Vector3(local.x + halfWidth, local.y + halfHeight, 0)
   ];
   for (const corner of corners) {
     corner.applyQuaternion(quaternion).add(position);
   }
-  return new import_three17.Box3().setFromPoints(corners);
+  return new import_three18.Box3().setFromPoints(corners);
 }
 function makeTileAddress(face, level, faceSize, tileSize, col, row) {
   const left = (col - 1) * tileSize;
@@ -10046,14 +10291,14 @@ function decideTileLodUpdate(input) {
 }
 var VISIBILITY_FOV_PADDING_DEGREES = 8;
 var PREVIEW_RADIUS = CUBE_RADIUS + 0.05;
-var SHARED_TILE_GEOMETRY = new import_three18.PlaneGeometry(1, 1);
+var SHARED_TILE_GEOMETRY = new import_three19.PlaneGeometry(1, 1);
 function PreviewFace({
   face,
   texture,
   faceOrder
 }) {
   const geometry = (0, import_react37.useMemo)(() => {
-    const nextGeometry = new import_three18.PlaneGeometry(
+    const nextGeometry = new import_three19.PlaneGeometry(
       PREVIEW_RADIUS * 2,
       PREVIEW_RADIUS * 2
     );
@@ -10245,8 +10490,8 @@ function parentAddresses(child, parentLevel, parentFaceSize, tileSize) {
   return addresses;
 }
 function centerFacingAddress(candidates, camera) {
-  const direction = camera.getWorldDirection(new import_three18.Vector3());
-  const center = new import_three18.Vector3();
+  const direction = camera.getWorldDirection(new import_three19.Vector3());
+  const center = new import_three19.Vector3();
   let bestCandidate = candidates[0];
   let bestAlignment = -Infinity;
   for (const candidate of candidates) {
@@ -10391,9 +10636,9 @@ function Tile({
   const lastVisibilityQuaternionRef = (0, import_react37.useRef)(camera.quaternion.clone());
   const lastVisibilityFovRef = (0, import_react37.useRef)(Number.NaN);
   const lastViewportRef = (0, import_react37.useRef)({ width: 0, height: 0, dpr: 0 });
-  const frustumRef = (0, import_react37.useRef)(new import_three18.Frustum());
-  const projectionMatrixRef = (0, import_react37.useRef)(new import_three18.Matrix4());
-  const visibilityCameraRef = (0, import_react37.useRef)(new import_three18.PerspectiveCamera());
+  const frustumRef = (0, import_react37.useRef)(new import_three19.Frustum());
+  const projectionMatrixRef = (0, import_react37.useRef)(new import_three19.Matrix4());
+  const visibilityCameraRef = (0, import_react37.useRef)(new import_three19.PerspectiveCamera());
   const trackedLoadModeRef = (0, import_react37.useRef)(loadMode);
   const targetKeysRef = (0, import_react37.useRef)([]);
   const detailTokenRef = (0, import_react37.useRef)("");
@@ -10421,7 +10666,7 @@ function Tile({
     }
   };
   (0, import_fiber17.useFrame)(() => {
-    if (!(camera instanceof import_three18.PerspectiveCamera)) {
+    if (!(camera instanceof import_three19.PerspectiveCamera)) {
       return;
     }
     if (loadMode === "preview") {
@@ -10601,14 +10846,14 @@ function SnapshotCapture({
     const scale = Math.min(1, Math.sqrt(maxPixels / (sourceWidth * sourceHeight)));
     const width = Math.max(1, Math.floor(sourceWidth * scale));
     const height = Math.max(1, Math.floor(sourceHeight * scale));
-    const nextTarget = new import_three19.WebGLRenderTarget(width, height, {
+    const nextTarget = new import_three20.WebGLRenderTarget(width, height, {
       depthBuffer: false,
       stencilBuffer: false
     });
-    nextTarget.texture.colorSpace = import_three19.LinearSRGBColorSpace;
+    nextTarget.texture.colorSpace = import_three20.LinearSRGBColorSpace;
     nextTarget.texture.generateMipmaps = false;
-    nextTarget.texture.minFilter = import_three19.LinearFilter;
-    nextTarget.texture.magFilter = import_three19.LinearFilter;
+    nextTarget.texture.minFilter = import_three20.LinearFilter;
+    nextTarget.texture.magFilter = import_three20.LinearFilter;
     const previousTarget = gl.getRenderTarget();
     gl.setRenderTarget(nextTarget);
     gl.clear();
@@ -11158,12 +11403,12 @@ function Scenes({
 // src/hotspot/image-hotspot.tsx
 var import_fiber22 = require("@react-three/fiber");
 var import_react43 = require("react");
-var import_three25 = require("three");
+var import_three26 = require("three");
 
 // src/hotspot/hotspot-anchor.tsx
 var import_fiber21 = require("@react-three/fiber");
 var import_react42 = require("react");
-var import_three23 = require("three");
+var import_three24 = require("three");
 
 // src/hotspot/hotspot-tooltip.tsx
 var import_react40 = require("react");
@@ -11172,7 +11417,7 @@ var import_react40 = require("react");
 var import_fiber19 = require("@react-three/fiber");
 var import_react39 = require("react");
 var import_client = require("react-dom/client");
-var import_three20 = require("three");
+var import_three21 = require("three");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function useFallbackStereoView() {
   const runtime = (0, import_react39.useContext)(WebVRRuntimeContext);
@@ -11195,7 +11440,7 @@ function ProjectedHtml({
   const { camera, gl, events, size } = (0, import_fiber19.useThree)();
   const group = (0, import_react39.useRef)(null);
   const overlay = (0, import_react39.useRef)(null);
-  const scratch = (0, import_react39.useRef)(new import_three20.Vector3());
+  const scratch = (0, import_react39.useRef)(new import_three21.Vector3());
   const target = events.connected || gl.domElement.parentElement;
   const updatePosition = () => {
     const anchor = group.current;
@@ -11395,18 +11640,18 @@ function HotspotTooltip({
 }
 
 // src/hotspot/transform.ts
-var import_three21 = require("three");
-var LOCAL_FORWARD = new import_three21.Vector3(0, 0, 1);
-var CAMERA_POSITION = new import_three21.Vector3();
+var import_three22 = require("three");
+var LOCAL_FORWARD = new import_three22.Vector3(0, 0, 1);
+var CAMERA_POSITION = new import_three22.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_three21.MathUtils.degToRad(-rotation));
-  let scaleFactor = scaleMode === "fixed" && camera instanceof import_three21.PerspectiveCamera ? fixedScaleFactor(camera.fov, referenceFov) : 1;
-  if (scaleMode === "fixed" && orientation2 === "billboard" && useAngularScale && camera instanceof import_three21.PerspectiveCamera) {
+  group.rotateOnAxis(LOCAL_FORWARD, import_three22.MathUtils.degToRad(-rotation));
+  let scaleFactor = scaleMode === "fixed" && camera instanceof import_three22.PerspectiveCamera ? fixedScaleFactor(camera.fov, referenceFov) : 1;
+  if (scaleMode === "fixed" && orientation2 === "billboard" && useAngularScale && camera instanceof import_three22.PerspectiveCamera) {
     group.updateWorldMatrix(true, false);
     CAMERA_POSITION.setFromMatrixPosition(group.matrixWorld).applyMatrix4(
       camera.matrixWorldInverse
@@ -11421,17 +11666,17 @@ function applyHotspotTransform(group, camera, orientation2, surfaceQuaternion3,
   group.updateMatrixWorld();
 }
 function fixedScaleFactor(cameraFov, referenceFov) {
-  const safeReferenceFov = import_three21.MathUtils.clamp(referenceFov, 1, 179);
-  return Math.tan(import_three21.MathUtils.degToRad(cameraFov) / 2) / Math.tan(import_three21.MathUtils.degToRad(safeReferenceFov) / 2);
+  const safeReferenceFov = import_three22.MathUtils.clamp(referenceFov, 1, 179);
+  return Math.tan(import_three22.MathUtils.degToRad(cameraFov) / 2) / Math.tan(import_three22.MathUtils.degToRad(safeReferenceFov) / 2);
 }
 
 // src/hotspot/hotspot-stroke-line.tsx
 var import_drei = require("@react-three/drei");
 var import_fiber20 = require("@react-three/fiber");
 var import_react41 = require("react");
-var import_three22 = require("three");
+var import_three23 = require("three");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var LINE_WORLD_POSITION = new import_three22.Vector3();
+var LINE_WORLD_POSITION = new import_three23.Vector3();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
   if (!object || typeof material?.dashScale !== "number") {
@@ -11439,8 +11684,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_three22.PerspectiveCamera ? camera.fov : 75;
-  material.dashScale = viewportHeight / (2 * Math.tan(import_three22.MathUtils.degToRad(fov) * 0.5) * depth);
+  const fov = camera instanceof import_three23.PerspectiveCamera ? camera.fov : 75;
+  material.dashScale = viewportHeight / (2 * Math.tan(import_three23.MathUtils.degToRad(fov) * 0.5) * depth);
 }
 function resolveDash(dashSize, gapSize) {
   if (dashSize === void 0 || !Number.isFinite(dashSize) || dashSize <= 0) {
@@ -11513,27 +11758,27 @@ var SELECTION_BORDER_POINTS = [
   [-0.5, 0.5, 1e-3],
   [-0.5, -0.5, 1e-3]
 ];
-var TOOLTIP_WORLD_BOX = new import_three23.Box3();
-var TOOLTIP_LOCAL_BOX = new import_three23.Box3();
-var TOOLTIP_CORNER = new import_three23.Vector3();
-var TOOLTIP_INVERSE = new import_three23.Matrix4();
-var TOOLTIP_WORLD_CORNER = new import_three23.Vector3();
-var TOOLTIP_PROJECTED = new import_three23.Vector3();
-var TOOLTIP_RAY_ORIGIN = new import_three23.Vector3();
-var TOOLTIP_RAY_FAR = new import_three23.Vector3();
-var TOOLTIP_RAY_DIRECTION = new import_three23.Vector3();
-var TOOLTIP_RAY = new import_three23.Ray();
-var TOOLTIP_PLANE = new import_three23.Plane();
-var TOOLTIP_INTERSECTION = new import_three23.Vector3();
-var TOOLTIP_PLANE_NORMAL = new import_three23.Vector3();
-var TOOLTIP_PLANE_POINT = new import_three23.Vector3();
+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 HOTSPOT_MODE_RENDERING = {
   surface: { orientation: "surface", placement: "surface" },
   billboard: { orientation: "billboard", placement: "floating" }
 };
 function angularSizeToWorldSize(size, radius) {
-  const safeSize = Number.isFinite(size) ? import_three23.MathUtils.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
-  return 2 * radius * Math.tan(import_three23.MathUtils.degToRad(safeSize) / 2);
+  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);
 }
 function resolveScale(scale) {
   return Number.isFinite(scale) && scale > 0 ? scale : 1;
@@ -11546,39 +11791,39 @@ function resolveDistance(placement, distance, width, height) {
   if (!Number.isFinite(distance)) {
     return DEFAULT_FLOATING_DISTANCE;
   }
-  return import_three23.MathUtils.clamp(Math.abs(distance), 0.1, maximumDistance);
+  return import_three24.MathUtils.clamp(Math.abs(distance), 0.1, maximumDistance);
 }
 function maximumHotspotDistance(width, height) {
-  const safeWidth = import_three23.MathUtils.clamp(
+  const safeWidth = import_three24.MathUtils.clamp(
     Math.abs(Number.isFinite(width) ? width : MIN_ANGULAR_SIZE),
     MIN_ANGULAR_SIZE,
     MAX_ANGULAR_SIZE
   );
-  const safeHeight = import_three23.MathUtils.clamp(
+  const safeHeight = import_three24.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_three23.MathUtils.degToRad(safeWidth) / 2),
-    Math.tan(import_three23.MathUtils.degToRad(safeHeight) / 2)
+    Math.tan(import_three24.MathUtils.degToRad(safeWidth) / 2),
+    Math.tan(import_three24.MathUtils.degToRad(safeHeight) / 2)
   );
   return (PANORAMA_RADIUS - PANORAMA_SURFACE_INSET) / cornerFactor;
 }
 function createSurfaceQuaternion(position) {
   const outward = panoPositionToVector3(position).normalize();
   const inward = outward.clone().negate();
-  const pitch = import_three23.MathUtils.degToRad(position.pitch);
-  const yaw = import_three23.MathUtils.degToRad(position.yaw);
-  const localUp = new import_three23.Vector3(
+  const pitch = import_three24.MathUtils.degToRad(position.pitch);
+  const yaw = import_three24.MathUtils.degToRad(position.yaw);
+  const localUp = new import_three24.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_three23.Matrix4().makeBasis(localRight, localUp, inward);
-  return new import_three23.Quaternion().setFromRotationMatrix(basis);
+  const basis = new import_three24.Matrix4().makeBasis(localRight, localUp, inward);
+  return new import_three24.Quaternion().setFromRotationMatrix(basis);
 }
 function makeInteractionEvent(id, position, event) {
   return {
@@ -11591,7 +11836,7 @@ function makeInteractionEvent(id, position, event) {
 function angularDistance(a, b) {
   const aVector = panoPositionToVector3(a);
   const bVector = panoPositionToVector3(b);
-  return import_three23.MathUtils.radToDeg(aVector.angleTo(bVector));
+  return import_three24.MathUtils.radToDeg(aVector.angleTo(bVector));
 }
 function isTooltipOpen(trigger, hovered, focused, pinned) {
   switch (trigger) {
@@ -11868,8 +12113,8 @@ function HotspotAnchor({
   const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
   const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
   const focusGeometry = (0, import_react42.useMemo)(() => {
-    const planeGeometry = new import_three23.PlaneGeometry(1, 1);
-    const geometry = new import_three23.EdgesGeometry(planeGeometry);
+    const planeGeometry = new import_three24.PlaneGeometry(1, 1);
+    const geometry = new import_three24.EdgesGeometry(planeGeometry);
     planeGeometry.dispose();
     return geometry;
   }, []);
@@ -12185,10 +12430,10 @@ function HotspotAnchor({
 }
 
 // src/hotspot/hotspot-plane.tsx
-var import_three24 = require("three");
+var import_three25 = require("three");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var HOTSPOT_ALPHA_CUTOFF = 0.05;
-var SAMPLE_UV = new import_three24.Vector2();
+var SAMPLE_UV = new import_three25.Vector2();
 var RAYCAST_HITS = [];
 var IMAGE_DATA_CACHE = /* @__PURE__ */ new WeakMap();
 function clampOpacity(opacity) {
@@ -12262,8 +12507,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_three24.MeshBasicMaterial)) {
-    import_three24.Mesh.prototype.raycast.call(this, raycaster, intersects2);
+  if (!(material instanceof import_three25.MeshBasicMaterial)) {
+    import_three25.Mesh.prototype.raycast.call(this, raycaster, intersects2);
     return;
   }
   const cutoff = Math.max(material.alphaTest, HOTSPOT_ALPHA_CUTOFF);
@@ -12271,7 +12516,7 @@ function hotspotPlaneRaycast(raycaster, intersects2) {
     return;
   }
   RAYCAST_HITS.length = 0;
-  import_three24.Mesh.prototype.raycast.call(this, raycaster, RAYCAST_HITS);
+  import_three25.Mesh.prototype.raycast.call(this, raycaster, RAYCAST_HITS);
   const map = material.map;
   for (const hit of RAYCAST_HITS) {
     if (!map || !hit.uv) {
@@ -12297,7 +12542,7 @@ function HotspotPlane({
         alphaTest: HOTSPOT_ALPHA_CUTOFF,
         map,
         opacity: map ? clampOpacity(opacity) : 0,
-        side: import_three24.DoubleSide,
+        side: import_three25.DoubleSide,
         toneMapped: false,
         transparent: true
       }
@@ -12322,7 +12567,7 @@ function useHotspotImageTexture(src, onLoad, onError) {
         active = false;
       };
     }
-    const loader = new import_three25.TextureLoader();
+    const loader = new import_three26.TextureLoader();
     loader.load(
       src,
       (loadedTexture) => {
@@ -12330,11 +12575,11 @@ function useHotspotImageTexture(src, onLoad, onError) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three25.SRGBColorSpace;
-        loadedTexture.wrapS = import_three25.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three25.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three25.LinearFilter;
-        loadedTexture.minFilter = import_three25.LinearMipmapLinearFilter;
+        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.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -12375,7 +12620,7 @@ function ImageHotspot({
 
 // src/hotspot/graphic-hotspot.tsx
 var import_react44 = require("react");
-var import_three26 = require("three");
+var import_three27 = require("three");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var GRAPHIC_TEXTURE_SIZE = 512;
 function resolveStrokeWidth(value) {
@@ -12554,12 +12799,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_three26.CanvasTexture(canvas);
-  texture.colorSpace = import_three26.SRGBColorSpace;
-  texture.wrapS = import_three26.ClampToEdgeWrapping;
-  texture.wrapT = import_three26.ClampToEdgeWrapping;
-  texture.magFilter = import_three26.LinearFilter;
-  texture.minFilter = import_three26.LinearMipmapLinearFilter;
+  const texture = new import_three27.CanvasTexture(canvas);
+  texture.colorSpace = import_three27.SRGBColorSpace;
+  texture.wrapS = import_three27.ClampToEdgeWrapping;
+  texture.wrapT = import_three27.ClampToEdgeWrapping;
+  texture.magFilter = import_three27.LinearFilter;
+  texture.minFilter = import_three27.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
@@ -12610,7 +12855,7 @@ function GraphicHotspot(props) {
 // src/hotspot/sequence-hotspot.tsx
 var import_fiber23 = require("@react-three/fiber");
 var import_react45 = require("react");
-var import_three27 = require("three");
+var import_three28 = require("three");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var DEFAULT_SEQUENCE_FPS = 12;
 function resolveFps(value) {
@@ -12640,7 +12885,7 @@ function useSpriteTexture({
         active = false;
       };
     }
-    const loader = new import_three27.TextureLoader();
+    const loader = new import_three28.TextureLoader();
     loader.load(
       src,
       (loadedTexture) => {
@@ -12648,11 +12893,11 @@ function useSpriteTexture({
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three27.SRGBColorSpace;
-        loadedTexture.wrapS = import_three27.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three27.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three27.LinearFilter;
-        loadedTexture.minFilter = import_three27.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;
@@ -12793,7 +13038,7 @@ function SequenceHotspot({
 // src/hotspot/video-hotspot.tsx
 var import_fiber24 = require("@react-three/fiber");
 var import_react46 = require("react");
-var import_three28 = require("three");
+var import_three29 = require("three");
 
 // src/video/inline-playback.ts
 var INLINE_VIDEO_ATTRIBUTES = [
@@ -12866,7 +13111,7 @@ function usePosterTexture(id, poster, onError) {
         active = false;
       };
     }
-    const loader = new import_three28.TextureLoader();
+    const loader = new import_three29.TextureLoader();
     loader.load(
       poster,
       (loadedTexture) => {
@@ -12874,11 +13119,11 @@ function usePosterTexture(id, poster, onError) {
           loadedTexture.dispose();
           return;
         }
-        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.colorSpace = import_three29.SRGBColorSpace;
+        loadedTexture.wrapS = import_three29.ClampToEdgeWrapping;
+        loadedTexture.wrapT = import_three29.ClampToEdgeWrapping;
+        loadedTexture.magFilter = import_three29.LinearFilter;
+        loadedTexture.minFilter = import_three29.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -12933,12 +13178,12 @@ function useVideoResource({
     }
     applyInlineVideoPlayback(video, playsInline ?? true);
     video.poster = poster ?? "";
-    const texture = new import_three28.VideoTexture(video);
-    texture.colorSpace = import_three28.SRGBColorSpace;
-    texture.wrapS = import_three28.ClampToEdgeWrapping;
-    texture.wrapT = import_three28.ClampToEdgeWrapping;
-    texture.magFilter = import_three28.LinearFilter;
-    texture.minFilter = import_three28.LinearFilter;
+    const texture = new import_three29.VideoTexture(video);
+    texture.colorSpace = import_three29.SRGBColorSpace;
+    texture.wrapS = import_three29.ClampToEdgeWrapping;
+    texture.wrapT = import_three29.ClampToEdgeWrapping;
+    texture.magFilter = import_three29.LinearFilter;
+    texture.minFilter = import_three29.LinearFilter;
     texture.generateMipmaps = false;
     const notifyState = (state) => {
       if (active) {
@@ -13077,13 +13322,13 @@ function VideoHotspot({
 // src/hotspot/audio-hotspot.tsx
 var import_fiber25 = require("@react-three/fiber");
 var import_react47 = require("react");
-var import_three30 = require("three");
+var import_three31 = require("three");
 
 // src/hotspot/audio-spatial.ts
-var import_three29 = require("three");
-var LOOK_DIR = new import_three29.Vector3();
-var SOURCE_DIR = new import_three29.Vector3();
-var RIGHT_DIR = new import_three29.Vector3();
+var import_three30 = require("three");
+var LOOK_DIR = new import_three30.Vector3();
+var SOURCE_DIR = new import_three30.Vector3();
+var RIGHT_DIR = new import_three30.Vector3();
 function clampAudioVolume(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -13108,11 +13353,11 @@ function lookRangeGain(angleDegrees, range) {
 function audioSpatialFromView(camera, position, range) {
   camera.getWorldDirection(LOOK_DIR);
   SOURCE_DIR.copy(panoPositionToVector3(position)).normalize();
-  const angleDegrees = import_three29.MathUtils.radToDeg(
-    Math.acos(import_three29.MathUtils.clamp(LOOK_DIR.dot(SOURCE_DIR), -1, 1))
+  const angleDegrees = import_three30.MathUtils.radToDeg(
+    Math.acos(import_three30.MathUtils.clamp(LOOK_DIR.dot(SOURCE_DIR), -1, 1))
   );
   RIGHT_DIR.set(1, 0, 0).applyQuaternion(camera.quaternion);
-  const pan = import_three29.MathUtils.clamp(
+  const pan = import_three30.MathUtils.clamp(
     Math.atan2(SOURCE_DIR.dot(RIGHT_DIR), SOURCE_DIR.dot(LOOK_DIR)) / (Math.PI / 2),
     -1,
     1
@@ -13177,12 +13422,12 @@ function createSpeakerTexture(state) {
       return exhaustive;
     }
   }
-  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_three31.CanvasTexture(canvas);
+  texture.colorSpace = import_three31.SRGBColorSpace;
+  texture.wrapS = import_three31.ClampToEdgeWrapping;
+  texture.wrapT = import_three31.ClampToEdgeWrapping;
+  texture.magFilter = import_three31.LinearFilter;
+  texture.minFilter = import_three31.LinearMipmapLinearFilter;
   texture.generateMipmaps = true;
   texture.needsUpdate = true;
   return texture;
@@ -13217,7 +13462,7 @@ function useIconTexture(icon, enabled, onError, id) {
         active = false;
       };
     }
-    const loader = new import_three30.TextureLoader();
+    const loader = new import_three31.TextureLoader();
     loader.load(
       icon,
       (loadedTexture) => {
@@ -13225,11 +13470,11 @@ function useIconTexture(icon, enabled, onError, id) {
           loadedTexture.dispose();
           return;
         }
-        loadedTexture.colorSpace = import_three30.SRGBColorSpace;
-        loadedTexture.wrapS = import_three30.ClampToEdgeWrapping;
-        loadedTexture.wrapT = import_three30.ClampToEdgeWrapping;
-        loadedTexture.magFilter = import_three30.LinearFilter;
-        loadedTexture.minFilter = import_three30.LinearMipmapLinearFilter;
+        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.generateMipmaps = true;
         loadedTexture.anisotropy = gl.capabilities.getMaxAnisotropy();
         loadedTexture.needsUpdate = true;
@@ -13420,7 +13665,7 @@ function AudioHotspot({
 // src/hotspot/text-hotspot.tsx
 var import_react48 = require("react");
 var import_fiber26 = require("@react-three/fiber");
-var import_three31 = require("three");
+var import_three32 = require("three");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var TEXT_TEXTURE_LONG_SIDE = 1024;
 var TEXT_RASTER_SUPERSAMPLE = 2;
@@ -13492,7 +13737,7 @@ function projectedDevicePixels(angleDeg, fovDeg, viewportHeight) {
   }
   const fov = Math.min(179, Math.max(1, resolvePositive(fovDeg, DEFAULT_REFERENCE_FOV2)));
   const angle = Math.min(179, Math.max(0.01, Math.abs(angleDeg)));
-  return Math.tan(import_three31.MathUtils.degToRad(angle) / 2) / Math.tan(import_three31.MathUtils.degToRad(fov) / 2) * viewportHeight;
+  return Math.tan(import_three32.MathUtils.degToRad(angle) / 2) / Math.tan(import_three32.MathUtils.degToRad(fov) / 2) * viewportHeight;
 }
 function snapRasterLongSide(screenLong, layoutLong) {
   if (!(screenLong > 0)) {
@@ -13677,12 +13922,12 @@ function createTextTexture(text, width, height, style, rasterLong) {
     fontSize: resolvePositive(style.fontSize, DEFAULT_FONT_SIZE) * scale,
     strokeWidth: Number.isFinite(style.strokeWidth) ? style.strokeWidth * scale : style.strokeWidth
   });
-  const texture = new import_three31.CanvasTexture(canvas);
-  texture.colorSpace = import_three31.SRGBColorSpace;
-  texture.wrapS = import_three31.ClampToEdgeWrapping;
-  texture.wrapT = import_three31.ClampToEdgeWrapping;
-  texture.magFilter = import_three31.LinearFilter;
-  texture.minFilter = import_three31.LinearFilter;
+  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.LinearFilter;
   texture.generateMipmaps = false;
   texture.needsUpdate = true;
   return texture;
@@ -13694,7 +13939,7 @@ function useRasterLongSide(width, height, scale, scaleMode, referenceFov) {
   const measure = () => {
     const pixelRatio = getPixelRatio();
     const viewportHeight = size.height * (Number.isFinite(pixelRatio) && pixelRatio > 0 ? pixelRatio : 1);
-    const cameraFov = camera instanceof import_three31.PerspectiveCamera ? camera.fov : DEFAULT_REFERENCE_FOV2;
+    const cameraFov = camera instanceof import_three32.PerspectiveCamera ? camera.fov : DEFAULT_REFERENCE_FOV2;
     const screenLong = Math.max(
       projectedDevicePixels(
         width * resolveScale2(scale),
@@ -13846,7 +14091,7 @@ function TextHotspot({
 
 // src/hotspot/iframe-hotspot.tsx
 var import_drei2 = require("@react-three/drei");
-var import_three32 = require("three");
+var import_three33 = require("three");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var IFRAME_LONG_SIDE = 800;
 var CSS3D_DISTANCE_FACTOR = 400;
@@ -13920,7 +14165,7 @@ function IframeHotspot({
             {
               depthWrite: false,
               opacity: 0,
-              side: import_three32.DoubleSide,
+              side: import_three33.DoubleSide,
               toneMapped: false,
               transparent: true
             }
@@ -13964,7 +14209,7 @@ function IframeHotspot({
 
 // src/hotspot/polygon-hotspot.tsx
 var import_react49 = require("react");
-var import_three33 = require("three");
+var import_three34 = require("three");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
@@ -14000,7 +14245,7 @@ function intersects(a, b, c, d) {
 }
 function hasSelfIntersection(vertices) {
   const points = vertices.map(
-    (vertex) => new import_three33.Vector2(vertex.unwrappedYaw, vertex.pitch)
+    (vertex) => new import_three34.Vector2(vertex.unwrappedYaw, vertex.pitch)
   );
   for (let index = 0; index < points.length; index += 1) {
     const nextIndex = (index + 1) % points.length;
@@ -14037,7 +14282,7 @@ function polygonContainsDirection(vertices, direction) {
 }
 function fitsHemisphere(vertices) {
   const directions = vertices.map((vertex) => panoPositionToVector3(vertex).normalize());
-  const candidates = [new import_three33.Vector3()];
+  const candidates = [new import_three34.Vector3()];
   for (const direction of directions) {
     candidates[0].add(direction);
     candidates.push(direction.clone());
@@ -14061,7 +14306,7 @@ function validatePolygonVertices(vertices) {
   if (hasSelfIntersection(unwrapped)) {
     issues.push({ code: "self_intersection", message: "Polygon edges cannot cross." });
   }
-  if (polygonContainsDirection(normalized, new import_three33.Vector3(0, 1, 0)) || polygonContainsDirection(normalized, new import_three33.Vector3(0, -1, 0))) {
+  if (polygonContainsDirection(normalized, new import_three34.Vector3(0, 1, 0)) || polygonContainsDirection(normalized, new import_three34.Vector3(0, -1, 0))) {
     issues.push({ code: "contains_pole", message: "Polygons cannot contain a panorama pole." });
   }
   if (!fitsHemisphere(normalized)) {
@@ -14072,7 +14317,7 @@ function validatePolygonVertices(vertices) {
 function polygonCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new import_three33.Vector3()
+    new import_three34.Vector3()
   );
   return sum.lengthSq() > 1e-8 ? vector3ToPanoPosition(sum) : normalizePanoPosition(vertices[0]);
 }
@@ -14081,20 +14326,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_three33.Vector3(
+  const localUp = new import_three34.Vector3(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new import_three33.Quaternion().setFromRotationMatrix(
-    new import_three33.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
+  return new import_three34.Quaternion().setFromRotationMatrix(
+    new import_three34.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
 function makeWorldToLocal(center) {
-  return new import_three33.Matrix4().compose(
+  return new import_three34.Matrix4().compose(
     panoPositionToVector3(center, POLYGON_RADIUS),
     surfaceQuaternion(center),
-    new import_three33.Vector3(1, 1, 1)
+    new import_three34.Vector3(1, 1, 1)
   ).invert();
 }
 function projectedPoint(a, b, c, weightB, weightC, radius, worldToLocal) {
@@ -14149,8 +14394,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_three33.Vector2(vertex.unwrappedYaw, vertex.pitch));
-  const triangles = import_three33.ShapeUtils.triangulateShape(contour, []);
+  const contour = unwrapped.map((vertex) => new import_three34.Vector2(vertex.unwrappedYaw, vertex.pitch));
+  const triangles = import_three34.ShapeUtils.triangulateShape(contour, []);
   const positions = [];
   const indices = [];
   const worldToLocal = makeWorldToLocal(center);
@@ -14166,7 +14411,7 @@ function makeFillGeometry(vertices, center) {
       steps
     );
   }
-  return new import_three33.BufferGeometry().setAttribute("position", new import_three33.Float32BufferAttribute(positions, 3)).setIndex(indices);
+  return new import_three34.BufferGeometry().setAttribute("position", new import_three34.Float32BufferAttribute(positions, 3)).setIndex(indices);
 }
 function makeStrokePositions(vertices, center) {
   const points = [];
@@ -14296,7 +14541,7 @@ function PolygonHotspot({
             color: fill,
             depthWrite: false,
             opacity: Math.max(0, Math.min(fillOpacity, 1)),
-            side: import_three33.DoubleSide,
+            side: import_three34.DoubleSide,
             transparent: true
           }
         ) }),
@@ -14319,7 +14564,7 @@ function PolygonHotspot({
 
 // src/hotspot/polyline-hotspot.tsx
 var import_react50 = require("react");
-var import_three34 = require("three");
+var import_three35 = require("three");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
@@ -14345,29 +14590,29 @@ function unwrapVertices(vertices) {
 function polylineCenter(vertices) {
   const sum = vertices.reduce(
     (total, vertex) => total.add(panoPositionToVector3(vertex).normalize()),
-    new import_three34.Vector3()
+    new import_three35.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_three34.MathUtils.degToRad(position.pitch);
-  const yaw = import_three34.MathUtils.degToRad(position.yaw);
-  const localUp = new import_three34.Vector3(
+  const pitch = import_three35.MathUtils.degToRad(position.pitch);
+  const yaw = import_three35.MathUtils.degToRad(position.yaw);
+  const localUp = new import_three35.Vector3(
     -Math.sin(pitch) * Math.sin(yaw),
     Math.cos(pitch),
     Math.sin(pitch) * Math.cos(yaw)
   ).normalize();
-  return new import_three34.Quaternion().setFromRotationMatrix(
-    new import_three34.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
+  return new import_three35.Quaternion().setFromRotationMatrix(
+    new import_three35.Matrix4().makeBasis(localUp.clone().cross(inward).normalize(), localUp, inward)
   );
 }
 function makeWorldToLocal2(center) {
-  return new import_three34.Matrix4().compose(
+  return new import_three35.Matrix4().compose(
     panoPositionToVector3(center, POLYLINE_RADIUS),
     surfaceQuaternion2(center),
-    new import_three34.Vector3(1, 1, 1)
+    new import_three35.Vector3(1, 1, 1)
   ).invert();
 }
 function subdivisionSteps(vertices) {
@@ -14382,7 +14627,7 @@ function subdivisionSteps(vertices) {
   }
   return Math.min(
     8,
-    Math.max(1, Math.ceil(import_three34.MathUtils.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
+    Math.max(1, Math.ceil(import_three35.MathUtils.radToDeg(maxAngle) / MAX_SEGMENT_DEGREES))
   );
 }
 function makeLinePositions(vertices, center) {
@@ -15149,12 +15394,12 @@ var import_fiber27 = require("@react-three/fiber");
 var import_react54 = require("react");
 
 // src/gyro-orientation.ts
-var import_three35 = require("three");
-var DEVICE_FORWARD_CORRECTION = new import_three35.Quaternion().setFromAxisAngle(
-  new import_three35.Vector3(1, 0, 0),
+var import_three36 = require("three");
+var DEVICE_FORWARD_CORRECTION = new import_three36.Quaternion().setFromAxisAngle(
+  new import_three36.Vector3(1, 0, 0),
   -Math.PI / 2
 );
-var SCREEN_AXIS = new import_three35.Vector3(0, 0, 1);
+var SCREEN_AXIS = new import_three36.Vector3(0, 0, 1);
 function getScreenOrientationAngle() {
   if (typeof window === "undefined") {
     return 0;
@@ -15168,31 +15413,31 @@ function getScreenOrientationAngle() {
 }
 function deviceOrientationToQuaternion(sample, screenOrientation) {
   const alpha = Number.isFinite(sample.compassHeading) ? 360 - sample.compassHeading : sample.alpha;
-  const deviceEuler = new import_three35.Euler(
-    import_three35.MathUtils.degToRad(sample.beta),
-    import_three35.MathUtils.degToRad(alpha),
-    import_three35.MathUtils.degToRad(-sample.gamma),
+  const deviceEuler = new import_three36.Euler(
+    import_three36.MathUtils.degToRad(sample.beta),
+    import_three36.MathUtils.degToRad(alpha),
+    import_three36.MathUtils.degToRad(-sample.gamma),
     "YXZ"
   );
-  const screenCorrection = new import_three35.Quaternion().setFromAxisAngle(
+  const screenCorrection = new import_three36.Quaternion().setFromAxisAngle(
     SCREEN_AXIS,
-    -import_three35.MathUtils.degToRad(screenOrientation)
+    -import_three36.MathUtils.degToRad(screenOrientation)
   );
-  return new import_three35.Quaternion().setFromEuler(deviceEuler).multiply(DEVICE_FORWARD_CORRECTION).multiply(screenCorrection).normalize();
+  return new import_three36.Quaternion().setFromEuler(deviceEuler).multiply(DEVICE_FORWARD_CORRECTION).multiply(screenCorrection).normalize();
 }
 function quaternionToGyroPose(quaternion) {
-  const euler = new import_three35.Euler().setFromQuaternion(quaternion, "YXZ");
+  const euler = new import_three36.Euler().setFromQuaternion(quaternion, "YXZ");
   return {
-    yaw: import_three35.MathUtils.radToDeg(-euler.y),
-    pitch: import_three35.MathUtils.radToDeg(euler.x),
-    roll: import_three35.MathUtils.radToDeg(euler.z)
+    yaw: import_three36.MathUtils.radToDeg(-euler.y),
+    pitch: import_three36.MathUtils.radToDeg(euler.x),
+    roll: import_three36.MathUtils.radToDeg(euler.z)
   };
 }
 function createRelativeCalibration(deviceQuaternion, yaw, pitch) {
-  const targetQuaternion = new import_three35.Quaternion().setFromEuler(
-    new import_three35.Euler(
-      import_three35.MathUtils.degToRad(pitch),
-      import_three35.MathUtils.degToRad(-yaw),
+  const targetQuaternion = new import_three36.Quaternion().setFromEuler(
+    new import_three36.Euler(
+      import_three36.MathUtils.degToRad(pitch),
+      import_three36.MathUtils.degToRad(-yaw),
       0,
       "YXZ"
     )
@@ -15623,9 +15868,9 @@ async function detectWebVRCapabilities() {
 // src/webvr/reticle.tsx
 var import_fiber28 = require("@react-three/fiber");
 var import_react55 = require("react");
-var import_three36 = require("three");
+var import_three37 = require("three");
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var CENTER_NDC = new import_three36.Vector2(0, 0);
+var CENTER_NDC = new import_three37.Vector2(0, 0);
 var HUD_DISTANCE = 2;
 var RETICLE_SCALE = 1;
 var RETICLE_RENDER_ORDER = 1e5;
@@ -15710,8 +15955,8 @@ function WebVRReticle({
 }) {
   const groupRef = (0, import_react55.useRef)(null);
   const ringMeshRef = (0, import_react55.useRef)(null);
-  const directionRef = (0, import_react55.useRef)(new import_three36.Vector3());
-  const raycasterRef = (0, import_react55.useRef)(new import_three36.Raycaster());
+  const directionRef = (0, import_react55.useRef)(new import_three37.Vector3());
+  const raycasterRef = (0, import_react55.useRef)(new import_three37.Raycaster());
   const hoveredRef = (0, import_react55.useRef)(null);
   const dwellRef = (0, import_react55.useRef)(0);
   const clickedRef = (0, import_react55.useRef)(false);
@@ -15862,7 +16107,7 @@ function WebVRReticle({
                   color: "#ffffff",
                   depthTest: false,
                   depthWrite: false,
-                  side: import_three36.DoubleSide,
+                  side: import_three37.DoubleSide,
                   toneMapped: false,
                   transparent: true
                 }
@@ -15878,7 +16123,7 @@ function WebVRReticle({
 // src/webvr/stereo.tsx
 var import_fiber29 = require("@react-three/fiber");
 var import_react56 = require("react");
-var import_three37 = require("three");
+var import_three38 = require("three");
 var vertexShader = `
 varying vec2 vUv;
 void main() {
@@ -15903,26 +16148,26 @@ void main() {
 }
 `;
 function createDistortionResources() {
-  const target = new import_three37.WebGLRenderTarget(1, 1, {
+  const target = new import_three38.WebGLRenderTarget(1, 1, {
     depthBuffer: true,
     stencilBuffer: false
   });
-  const geometry = new import_three37.PlaneGeometry(2, 2);
-  const material = new import_three37.ShaderMaterial({
+  const geometry = new import_three38.PlaneGeometry(2, 2);
+  const material = new import_three38.ShaderMaterial({
     depthTest: false,
     depthWrite: false,
     fragmentShader,
     uniforms: {
-      distortion: { value: new import_three37.Vector2() },
+      distortion: { value: new import_three38.Vector2() },
       sourceTexture: { value: target.texture }
     },
     vertexShader
   });
-  const mesh = new import_three37.Mesh(geometry, material);
-  const scene = new import_three37.Scene();
+  const mesh = new import_three38.Mesh(geometry, material);
+  const scene = new import_three38.Scene();
   scene.add(mesh);
   return {
-    camera: new import_three37.OrthographicCamera(-1, 1, 1, -1, 0, 1),
+    camera: new import_three38.OrthographicCamera(-1, 1, 1, -1, 0, 1),
     geometry,
     material,
     mesh,
@@ -15955,15 +16200,15 @@ function WebVRStereoRenderer({
   const runtime = (0, import_react56.useContext)(WebVRRuntimeContext);
   const fallbackStereoRef = (0, import_react56.useRef)(null);
   if (!fallbackStereoRef.current) {
-    fallbackStereoRef.current = new import_three37.StereoCamera();
+    fallbackStereoRef.current = new import_three38.StereoCamera();
   }
   const stereo = runtime?.stereoView.stereo ?? fallbackStereoRef.current;
   const stereoRef = (0, import_react56.useRef)(stereo);
   stereoRef.current = stereo;
   const resources = (0, import_react56.useMemo)(createDistortionResources, []);
-  const drawingSizeRef = (0, import_react56.useRef)(new import_three37.Vector2());
-  const viewportRef = (0, import_react56.useRef)(new import_three37.Vector4());
-  const scissorRef = (0, import_react56.useRef)(new import_three37.Vector4());
+  const drawingSizeRef = (0, import_react56.useRef)(new import_three38.Vector2());
+  const viewportRef = (0, import_react56.useRef)(new import_three38.Vector4());
+  const scissorRef = (0, import_react56.useRef)(new import_three38.Vector4());
   const originalFovRef = (0, import_react56.useRef)(null);
   const stereoActiveRef = (0, import_react56.useRef)(false);
   const profileRef = (0, import_react56.useRef)(profile);
@@ -15981,7 +16226,7 @@ function WebVRStereoRenderer({
   (0, import_react56.useEffect)(() => {
     const originalRender = gl.render.bind(gl);
     gl.render = (sceneToRender, cameraToRender) => {
-      if (!stereoActiveRef.current || !(cameraToRender instanceof import_three37.PerspectiveCamera)) {
+      if (!stereoActiveRef.current || !(cameraToRender instanceof import_three38.PerspectiveCamera)) {
         originalRender(sceneToRender, cameraToRender);
         return;
       }
@@ -16056,7 +16301,7 @@ function WebVRStereoRenderer({
     if (runtime) {
       runtime.stereoView.active = fallback;
     }
-    if (fallback && camera instanceof import_three37.PerspectiveCamera) {
+    if (fallback && camera instanceof import_three38.PerspectiveCamera) {
       syncStereoCameras(
         stereoRef.current,
         camera,
@@ -16067,7 +16312,7 @@ function WebVRStereoRenderer({
       );
       return;
     }
-    if (originalFovRef.current !== null && camera instanceof import_three37.PerspectiveCamera) {
+    if (originalFovRef.current !== null && camera instanceof import_three38.PerspectiveCamera) {
       camera.fov = originalFovRef.current;
       camera.updateProjectionMatrix();
       originalFovRef.current = null;
@@ -16749,7 +16994,7 @@ function usePanoViewer() {
 // src/video/pano-video.tsx
 var import_fiber31 = require("@react-three/fiber");
 var import_react61 = require("react");
-var import_three38 = require("three");
+var import_three39 = require("three");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
@@ -16826,8 +17071,8 @@ function findTextTrack(video, tracks, trackId) {
   return list.length > 0 ? list[0] : null;
 }
 function applyEquirectangularLayout(texture, anisotropy) {
-  texture.colorSpace = import_three38.SRGBColorSpace;
-  texture.wrapS = import_three38.RepeatWrapping;
+  texture.colorSpace = import_three39.SRGBColorSpace;
+  texture.wrapS = import_three39.RepeatWrapping;
   texture.repeat.x = -1;
   texture.offset.x = 1;
   texture.anisotropy = anisotropy;
@@ -16846,7 +17091,7 @@ function usePosterTexture2(poster, onError) {
         active = false;
       };
     }
-    const loader = new import_three38.TextureLoader();
+    const loader = new import_three39.TextureLoader();
     loader.load(
       poster,
       (loadedTexture) => {
@@ -16858,9 +17103,9 @@ function usePosterTexture2(poster, onError) {
           loadedTexture,
           gl.capabilities.getMaxAnisotropy()
         );
-        loadedTexture.wrapT = import_three38.RepeatWrapping;
-        loadedTexture.magFilter = import_three38.LinearFilter;
-        loadedTexture.minFilter = import_three38.LinearMipmapLinearFilter;
+        loadedTexture.wrapT = import_three39.RepeatWrapping;
+        loadedTexture.magFilter = import_three39.LinearFilter;
+        loadedTexture.minFilter = import_three39.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         setTexture(loadedTexture);
       },
@@ -17014,10 +17259,10 @@ function PanoVideo({
     video.muted = true;
     applyInlineVideoPlayback(video, true);
     video.preload = "metadata";
-    const texture = new import_three38.VideoTexture(video);
+    const texture = new import_three39.VideoTexture(video);
     applyEquirectangularLayout(texture, 1);
-    texture.magFilter = import_three38.LinearFilter;
-    texture.minFilter = import_three38.LinearFilter;
+    texture.magFilter = import_three39.LinearFilter;
+    texture.minFilter = import_three39.LinearFilter;
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
@@ -17453,7 +17698,7 @@ function PanoVideo({
     activeTexture ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "mesh",
       {
-        rotation: [0, import_three38.MathUtils.degToRad(90 + yawOffset2), 0],
+        rotation: [0, import_three39.MathUtils.degToRad(90 + yawOffset2), 0],
         visible,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
@@ -17461,7 +17706,7 @@ function PanoVideo({
             PanoBasicMaterial,
             {
               map: activeTexture,
-              side: import_three38.BackSide,
+              side: import_three39.BackSide,
               toneMapped: false
             }
           )