@react-three/drei 11.0.0-alpha.4 → 11.0.0-alpha.6

package/legacy/index.mjs

@@ -2,10 +2,8 @@ import * as React from 'react';
 import { forwardRef, useImperativeHandle, useMemo, useEffect, useCallback, useRef, useLayoutEffect, useState, Fragment, createContext, useContext } from 'react';
 import { useThree, useFrame, extend, createPortal, applyProps, useInstanceHandle, context as context$a, useLoader, addEffect, addAfterEffect } from '@react-three/fiber';
 import * as THREE from 'three';
-import { REVISION, WebGLRenderTarget, HalfFloatType, LinearFilter, Vector2, Scene, Camera, BufferGeometry, BufferAttribute, Mesh, MeshStandardMaterial, Plane as Plane$1, Vector3, Matrix4, Vector4, PerspectiveCamera as PerspectiveCamera$1, DepthTexture, DepthFormat, UnsignedShortType, Frustum, MeshPhysicalMaterial, RGBAFormat, UnsignedByteType, Color, InstancedInterleavedBuffer, InterleavedBufferAttribute, Object3D, WebGLCubeRenderTarget, CubeCamera as CubeCamera$1, MathUtils, TextureLoader, Texture as Texture$1, MeshLambertMaterial, Quaternion, DynamicDrawUsage, CatmullRomCurve3, CubicBezierCurve3, QuadraticBezierCurve3, Shape as Shape$1, CanvasTexture, DoubleSide, OrthographicCamera as OrthographicCamera$1, AudioListener, AudioLoader, AnimationMixer, Box3, Sphere as Sphere$1, InstancedBufferAttribute, CubeTextureLoader, DefaultLoadingManager, Ray, Raycaster, CubeReflectionMapping, EquirectangularReflectionMapping, RepeatWrapping, ShaderMaterial, CylinderGeometry, AdditiveBlending, Spherical } from 'three';
+import { REVISION, WebGLRenderTarget, HalfFloatType, LinearFilter, Vector2, Scene, Camera, BufferGeometry, BufferAttribute, Mesh, MeshStandardMaterial, Plane as Plane$1, Vector3, Matrix4, Vector4, PerspectiveCamera as PerspectiveCamera$1, DepthTexture, DepthFormat, UnsignedShortType, Frustum, MeshPhysicalMaterial, RGBAFormat, UnsignedByteType, Color, InstancedInterleavedBuffer, InterleavedBufferAttribute, Object3D, WebGLCubeRenderTarget, CubeCamera as CubeCamera$1, EventDispatcher, Euler, Quaternion, MathUtils, TextureLoader, Texture as Texture$1, MeshLambertMaterial, DynamicDrawUsage, CatmullRomCurve3, CubicBezierCurve3, QuadraticBezierCurve3, Shape as Shape$1, CanvasTexture, OrthographicCamera as OrthographicCamera$1, AudioListener, AudioLoader, AnimationMixer, Box3, Sphere as Sphere$1, InstancedBufferAttribute, DoubleSide, CubeTextureLoader, DefaultLoadingManager, Ray, Raycaster, CubeReflectionMapping, EquirectangularReflectionMapping, RepeatWrapping, ShaderMaterial, CylinderGeometry, AdditiveBlending, Spherical } from 'three';
 import { ArcballControls as ArcballControls$1 } from 'three/examples/jsm/controls/ArcballControls.js';
-import { DeviceOrientationControls as DeviceOrientationControls$1 } from 'three-stdlib';
-import { useGesture } from '@use-gesture/react';
 import { FirstPersonControls as FirstPersonControls$1 } from 'three/examples/jsm/controls/FirstPersonControls.js';
 import { FlyControls as FlyControls$1 } from 'three/examples/jsm/controls/FlyControls.js';
 import { create as create$1 } from 'zustand';
@@ -14,6 +12,7 @@ import { MapControls as MapControls$1 } from 'three/examples/jsm/controls/MapCon
 import { misc, easing } from 'maath';
 import { OrbitControls as OrbitControls$1 } from 'three/addons/controls/OrbitControls.js';
 import { PointerLockControls as PointerLockControls$1 } from 'three/examples/jsm/controls/PointerLockControls.js';
+import { useGesture } from '@use-gesture/react';
 import * as ReactDOM from 'react-dom/client';
 import { TrackballControls as TrackballControls$1 } from 'three/examples/jsm/controls/TrackballControls.js';
 import { SimplexNoise } from 'three/examples/jsm/math/SimplexNoise.js';
@@ -32,7 +31,6 @@ import { TransformControls as TransformControls$1 } from 'three/examples/jsm/con
 import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils.js';
 import { MeshSurfaceSampler } from 'three/examples/jsm/math/MeshSurfaceSampler.js';
 import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader.js';
-import { Events } from 'hls.js';
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
@@ -58,7 +56,7 @@ import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 import { AsciiEffect } from 'three/examples/jsm/effects/AsciiEffect.js';
 import { FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass.js';
-import { shaderStructs, shaderIntersectFunction, MeshBVHUniformStruct } from 'three-mesh-bvh';
+import { MeshBVHUniformStruct, MeshBVH, SAH, shaderStructs, shaderIntersectFunction } from 'three-mesh-bvh';
 import { Text as Text$1, preloadFont } from 'troika-three-text';
 
 const ContactShadows = /* @__PURE__ */ React.forwardRef(
@@ -188,6 +186,7 @@ function shaderMaterial(uniforms, vertexShader, fragmentShader, onInit) {
         });
       }
       this.uniforms = THREE.UniformsUtils.clone(this.uniforms);
+      Object.assign(this, parameters);
       onInit?.(this);
     }
   };
@@ -799,6 +798,12 @@ const Caustics = /* @__PURE__ */ React.forwardRef(
     const helper = useHelper(debug && camera, THREE.CameraHelper);
     const normalTarget = useFBO(resolution, resolution, NORMALPROPS);
     const normalTargetB = useFBO(resolution, resolution, NORMALPROPS);
+    if (!gl.extensions.get("OES_texture_float_linear")) {
+      console.warn(
+        "[Caustics]: `OES_texture_float_linear` extension not supported, using HalfFloatType instead of FloatType"
+      );
+      CAUSTICPROPS.type = THREE.HalfFloatType;
+    }
     const causticsTarget = useFBO(resolution, resolution, CAUSTICPROPS);
     const causticsTargetB = useFBO(resolution, resolution, CAUSTICPROPS);
     const [normalMat] = React.useState(() => createNormalMaterial());
@@ -1085,7 +1090,7 @@ class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
           vec3 getVolumeTransmissionRay( const in vec3 n, const in vec3 v, const in float thickness, const in float ior, const in mat4 modelMatrix ) {
             // Direction of refracted light.
             vec3 refractionVector = refract( - v, normalize( n ), 1.0 / ior );
-            // Compute rotation-independant scaling of the model matrix.
+            // Compute rotation-independent scaling of the model matrix.
             vec3 modelScale;
             modelScale.x = length( vec3( modelMatrix[ 0 ].xyz ) );
             modelScale.y = length( vec3( modelMatrix[ 1 ].xyz ) );
@@ -1517,6 +1522,7 @@ let MeshReflectorMaterial$1 = class MeshReflectorMaterial extends MeshStandardMa
         uniform float depthScale;
         uniform float depthToBlurRatioBias;
         varying vec4 my_vUv;
+        #include <tonemapping_pars_fragment>
         ${shader.fragmentShader}`;
     shader.fragmentShader = shader.fragmentShader.replace(
       "#include <emissivemap_fragment>",
@@ -1577,6 +1583,9 @@ let MeshReflectorMaterial$1 = class MeshReflectorMaterial extends MeshStandardMa
         merge = mix(merge, blur, blurFactor);
       #endif
 
+      // Apply tone mapping to HDR reflection values before contrast adjustment
+      merge.rgb = toneMapping(merge.rgb);
+
       vec4 newMerge = vec4(0.0, 0.0, 0.0, 1.0);
       newMerge.r = (merge.r - 0.5) * mixContrast + 0.5;
       newMerge.g = (merge.g - 0.5) * mixContrast + 0.5;
@@ -1835,6 +1844,7 @@ const MeshReflectorMaterial = /* @__PURE__ */ React.forwardRef(
     useFrame(() => {
       const parent = materialRef.current.parent || materialRef.current?.__r3f.parent?.object;
       if (!parent) return;
+      if (gl.xr.isPresenting) return;
       parent.visible = false;
       const currentXrEnabled = gl.xr.enabled;
       const currentShadowAutoUpdate = gl.shadowMap.autoUpdate;
@@ -1864,7 +1874,7 @@ const MeshReflectorMaterial = /* @__PURE__ */ React.forwardRef(
   }
 );
 
-const MeshRefractionMaterial = /* @__PURE__ */ shaderMaterial(
+const MeshRefractionMaterial_ = /* @__PURE__ */ shaderMaterial(
   {
     envMap: null,
     bounces: 3,
@@ -2025,6 +2035,56 @@ const MeshRefractionMaterial = /* @__PURE__ */ shaderMaterial(
     #include <${version$1 >= 154 ? "colorspace_fragment" : "encodings_fragment"}>
   }`
 );
+const isCubeTexture = (def) => def && def.isCubeTexture;
+const MeshRefractionMaterial = /* @__PURE__ */ React.forwardRef(
+  ({ aberrationStrength = 0, fastChroma = true, envMap, ...props }, ref) => {
+    extend({ MeshRefractionMaterial_ });
+    const material = React.useRef(null);
+    const { size } = useThree();
+    const defines = React.useMemo(() => {
+      const temp = {};
+      const isCubeMap = isCubeTexture(envMap);
+      const w = (isCubeMap ? envMap.image[0]?.width : envMap.image.width) ?? 1024;
+      const cubeSize = w / 4;
+      const _lodMax = Math.floor(Math.log2(cubeSize));
+      const _cubeSize = Math.pow(2, _lodMax);
+      const width = 3 * Math.max(_cubeSize, 16 * 7);
+      const height = 4 * _cubeSize;
+      if (isCubeMap) temp.ENVMAP_TYPE_CUBEM = "";
+      temp.CUBEUV_TEXEL_WIDTH = `${1 / width}`;
+      temp.CUBEUV_TEXEL_HEIGHT = `${1 / height}`;
+      temp.CUBEUV_MAX_MIP = `${_lodMax}.0`;
+      if (aberrationStrength > 0) temp.CHROMATIC_ABERRATIONS = "";
+      if (fastChroma) temp.FAST_CHROMA = "";
+      return temp;
+    }, [aberrationStrength, fastChroma, envMap]);
+    React.useLayoutEffect(() => {
+      const geometry = material.current?.__r3f?.parent?.object?.geometry;
+      if (geometry) {
+        const geometryNi = geometry.index ? geometry.clone().toNonIndexed() : geometry.clone();
+        material.current.bvh = new MeshBVHUniformStruct();
+        material.current.bvh.updateFrom(new MeshBVH(geometryNi, { strategy: SAH }));
+      }
+    }, []);
+    useFrame(({ camera }) => {
+      material.current.viewMatrixInverse = camera.matrixWorld;
+      material.current.projectionMatrixInverse = camera.projectionMatrixInverse;
+    });
+    React.useImperativeHandle(ref, () => material.current, []);
+    return /* @__PURE__ */ React.createElement(
+      "meshRefractionMaterial_",
+      {
+        key: JSON.stringify(defines),
+        defines,
+        ref: material,
+        resolution: [size.width, size.height],
+        aberrationStrength,
+        envMap,
+        ...props
+      }
+    );
+  }
+);
 
 function useIntersect(onChange) {
   const { isLegacy } = useThree();
@@ -2248,6 +2308,8 @@ const MeshPortalMaterial = /* @__PURE__ */ React.forwardRef(
     children,
     events = void 0,
     blur = 0,
+    blend = 0,
+    samples = 8,
     eventPriority = 0,
     renderPriority = 0,
     worldUnits = false,
@@ -2260,7 +2322,7 @@ const MeshPortalMaterial = /* @__PURE__ */ React.forwardRef(
     const maskRenderTarget = useFBO(resolution, resolution);
     const [priority, setPriority] = React.useState(0);
     useFrame(() => {
-      const p = ref.current.blend > 0 ? Math.max(1, renderPriority) : 0;
+      const p = (ref.current.blend ?? 0) > 0 ? Math.max(1, renderPriority) : 0;
       if (priority !== p) setPriority(p);
     });
     React.useEffect(() => {
@@ -2334,7 +2396,8 @@ const MeshPortalMaterial = /* @__PURE__ */ React.forwardRef(
           frames: visible ? Infinity : 0,
           eventPriority,
           renderPriority,
-          compute
+          compute,
+          samples
         },
         children,
         /* @__PURE__ */ React.createElement(
@@ -2414,7 +2477,7 @@ function ManagePortalScene({
         scene.matrixWorld.copy(parent.matrixWorld);
       } else scene.matrixWorld.identity();
       if (priority) {
-        if (material.current?.blend > 0 && material.current?.blend < 1) {
+        if (material.current?.blend && material.current?.blend > 0 && material.current?.blend < 1) {
           blend.value = material.current.blend;
           state.gl.setRenderTarget(buffer1);
           state.gl.render(scene, state.camera);
@@ -3045,7 +3108,7 @@ const isWebGL2Available = () => {
 const Effects = /* @__PURE__ */ React.forwardRef(
   ({
     children,
-    multisamping = 8,
+    multisampling = 8,
     renderIndex = 1,
     disableRender,
     disableGamma,
@@ -3072,7 +3135,7 @@ const Effects = /* @__PURE__ */ React.forwardRef(
       if (type === UnsignedByteType && colorSpace != null) {
         t.texture.colorSpace = colorSpace;
       }
-      t.samples = multisamping;
+      t.samples = multisampling;
       return t;
     });
     React.useEffect(() => {
@@ -3207,12 +3270,12 @@ const Segments = /* @__PURE__ */ React.forwardRef((props, forwardedRef) => {
     for (let i = 0; i < limit; i++) {
       const segment = segments[i]?.current;
       if (segment) {
-        positions[i * 6 + 0] = segment.start.x;
-        positions[i * 6 + 1] = segment.start.y;
-        positions[i * 6 + 2] = segment.start.z;
-        positions[i * 6 + 3] = segment.end.x;
-        positions[i * 6 + 4] = segment.end.y;
-        positions[i * 6 + 5] = segment.end.z;
+        positions[i * 6 + 0] = segment.start?.x || 0;
+        positions[i * 6 + 1] = segment.start?.y || 0;
+        positions[i * 6 + 2] = segment.start?.z || 0;
+        positions[i * 6 + 3] = segment.end?.x || 0;
+        positions[i * 6 + 4] = segment.end?.y || 0;
+        positions[i * 6 + 5] = segment.end?.z || 0;
         colors[i * 6 + 0] = segment.color.r;
         colors[i * 6 + 1] = segment.color.g;
         colors[i * 6 + 2] = segment.color.b;
@@ -3247,7 +3310,10 @@ class SegmentObject {
     this.end = new THREE.Vector3(0, 0, 0);
   }
 }
-const normPos = (pos) => pos instanceof THREE.Vector3 ? pos : new THREE.Vector3(...typeof pos === "number" ? [pos, pos, pos] : pos);
+const normPos = (pos) => {
+  if (!pos) return new THREE.Vector3(0, 0, 0);
+  return pos instanceof THREE.Vector3 ? pos : new THREE.Vector3(...typeof pos === "number" ? [pos, pos, pos] : pos);
+};
 const Segment = /* @__PURE__ */ React.forwardRef(({ color, start, end }, forwardedRef) => {
   const api = React.useContext(context$9);
   if (!api) throw "Segment must used inside Segments component.";
@@ -3569,6 +3635,81 @@ const ArcballControls = /* @__PURE__ */ forwardRef(
   }
 );
 
+let DeviceOrientationControls$1 = class DeviceOrientationControls extends EventDispatcher {
+  object;
+  changeEvent = { type: "change" };
+  EPS = 1e-6;
+  enabled = true;
+  deviceOrientation = { alpha: 0, beta: 0, gamma: 0 };
+  screenOrientation = 0;
+  alphaOffset = 0;
+  // radians
+  constructor(object) {
+    super();
+    this.object = object;
+    this.object.rotation.reorder("YXZ");
+    this.connect();
+  }
+  onDeviceOrientationChangeEvent = (event) => {
+    this.deviceOrientation = event;
+  };
+  onScreenOrientationChangeEvent = () => {
+    this.screenOrientation = window.orientation || 0;
+  };
+  // The angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y''
+  zee = new Vector3(0, 0, 1);
+  euler = new Euler();
+  q0 = new Quaternion();
+  q1 = new Quaternion(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5));
+  // - PI/2 around the x-axis
+  setObjectQuaternion = (quaternion, alpha, beta, gamma, orient) => {
+    this.euler.set(beta, alpha, -gamma, "YXZ");
+    quaternion.setFromEuler(this.euler);
+    quaternion.multiply(this.q1);
+    quaternion.multiply(this.q0.setFromAxisAngle(this.zee, -orient));
+  };
+  connect = () => {
+    this.onScreenOrientationChangeEvent();
+    if (window.DeviceOrientationEvent !== void 0 && // @ts-ignore
+    typeof window.DeviceOrientationEvent.requestPermission === "function") {
+      window.DeviceOrientationEvent.requestPermission().then((response) => {
+        if (response == "granted") {
+          window.addEventListener("orientationchange", this.onScreenOrientationChangeEvent);
+          window.addEventListener("deviceorientation", this.onDeviceOrientationChangeEvent);
+        }
+      }).catch((error) => {
+        console.error("THREE.DeviceOrientationControls: Unable to use DeviceOrientation API:", error);
+      });
+    } else {
+      window.addEventListener("orientationchange", this.onScreenOrientationChangeEvent);
+      window.addEventListener("deviceorientation", this.onDeviceOrientationChangeEvent);
+    }
+    this.enabled = true;
+  };
+  disconnect = () => {
+    window.removeEventListener("orientationchange", this.onScreenOrientationChangeEvent);
+    window.removeEventListener("deviceorientation", this.onDeviceOrientationChangeEvent);
+    this.enabled = false;
+  };
+  lastQuaternion = new Quaternion();
+  update = () => {
+    if (this.enabled === false) return;
+    const device = this.deviceOrientation;
+    if (device) {
+      const alpha = device.alpha ? MathUtils.degToRad(device.alpha) + this.alphaOffset : 0;
+      const beta = device.beta ? MathUtils.degToRad(device.beta) : 0;
+      const gamma = device.gamma ? MathUtils.degToRad(device.gamma) : 0;
+      const orient = this.screenOrientation ? MathUtils.degToRad(this.screenOrientation) : 0;
+      this.setObjectQuaternion(this.object.quaternion, alpha, beta, gamma, orient);
+      if (8 * (1 - this.lastQuaternion.dot(this.object.quaternion)) > this.EPS) {
+        this.lastQuaternion.copy(this.object.quaternion);
+        this.dispatchEvent(this.changeEvent);
+      }
+    }
+  };
+  dispose = () => this.disconnect();
+};
+
 const DeviceOrientationControls = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
     const { camera, onChange, makeDefault, ...rest } = props;
@@ -3604,11 +3745,11 @@ const DeviceOrientationControls = /* @__PURE__ */ React.forwardRef(
 );
 
 const initialModelPosition = /* @__PURE__ */ new THREE.Vector3();
-const mousePosition2D = /* @__PURE__ */ new THREE.Vector2();
 const mousePosition3D = /* @__PURE__ */ new THREE.Vector3();
 const dragOffset = /* @__PURE__ */ new THREE.Vector3();
 const dragPlaneNormal = /* @__PURE__ */ new THREE.Vector3();
 const dragPlane = /* @__PURE__ */ new THREE.Plane();
+const startPointerPos = /* @__PURE__ */ new THREE.Vector3();
 const DragControls = React.forwardRef(
   ({
     autoTransform = true,
@@ -3624,89 +3765,132 @@ const DragControls = React.forwardRef(
     ...props
   }, fRef) => {
     const defaultControls = useThree((state) => state.controls);
-    const { camera, size, raycaster, invalidate } = useThree();
+    const { camera, invalidate } = useThree();
     const ref = React.useRef(null);
-    const bind = useGesture(
-      {
-        onHover: ({ hovering }) => onHover && onHover(hovering ?? false),
-        onDragStart: ({ event }) => {
-          if (defaultControls) defaultControls.enabled = false;
-          const { point } = event;
-          ref.current.matrix.decompose(initialModelPosition, new THREE.Quaternion(), new THREE.Vector3());
-          mousePosition3D.copy(point);
-          dragOffset.copy(mousePosition3D).sub(initialModelPosition);
-          onDragStart && onDragStart(initialModelPosition);
-          invalidate();
-        },
-        onDrag: ({ xy: [dragX, dragY], intentional }) => {
-          if (!intentional) return;
-          const normalizedMouseX = (dragX - size.left) / size.width * 2 - 1;
-          const normalizedMouseY = -((dragY - size.top) / size.height) * 2 + 1;
-          mousePosition2D.set(normalizedMouseX, normalizedMouseY);
-          raycaster.setFromCamera(mousePosition2D, camera);
-          if (!axisLock) {
-            camera.getWorldDirection(dragPlaneNormal).negate();
-          } else {
-            switch (axisLock) {
-              case "x":
-                dragPlaneNormal.set(1, 0, 0);
-                break;
-              case "y":
-                dragPlaneNormal.set(0, 1, 0);
-                break;
-              case "z":
-                dragPlaneNormal.set(0, 0, 1);
-                break;
-            }
-          }
-          dragPlane.setFromNormalAndCoplanarPoint(dragPlaneNormal, mousePosition3D);
-          raycaster.ray.intersectPlane(dragPlane, mousePosition3D);
-          const previousLocalMatrix = ref.current.matrix.clone();
-          const previousWorldMatrix = ref.current.matrixWorld.clone();
-          const intendedNewPosition = new THREE.Vector3(
-            mousePosition3D.x - dragOffset.x,
-            mousePosition3D.y - dragOffset.y,
-            mousePosition3D.z - dragOffset.z
-          );
-          if (dragLimits) {
-            intendedNewPosition.x = dragLimits[0] ? Math.max(Math.min(intendedNewPosition.x, dragLimits[0][1]), dragLimits[0][0]) : intendedNewPosition.x;
-            intendedNewPosition.y = dragLimits[1] ? Math.max(Math.min(intendedNewPosition.y, dragLimits[1][1]), dragLimits[1][0]) : intendedNewPosition.y;
-            intendedNewPosition.z = dragLimits[2] ? Math.max(Math.min(intendedNewPosition.z, dragLimits[2][1]), dragLimits[2][0]) : intendedNewPosition.z;
-          }
-          if (autoTransform) {
-            ref.current.matrix.setPosition(intendedNewPosition);
-            const deltaLocalMatrix = ref.current.matrix.clone().multiply(previousLocalMatrix.invert());
-            const deltaWorldMatrix = ref.current.matrix.clone().multiply(previousWorldMatrix.invert());
-            onDrag && onDrag(ref.current.matrix, deltaLocalMatrix, ref.current.matrixWorld, deltaWorldMatrix);
-          } else {
-            const tempMatrix = new THREE.Matrix4().copy(ref.current.matrix);
-            tempMatrix.setPosition(intendedNewPosition);
-            const deltaLocalMatrix = tempMatrix.clone().multiply(previousLocalMatrix.invert());
-            const deltaWorldMatrix = tempMatrix.clone().multiply(previousWorldMatrix.invert());
-            onDrag && onDrag(tempMatrix, deltaLocalMatrix, ref.current.matrixWorld, deltaWorldMatrix);
+    const dragState = React.useRef({
+      active: false,
+      intentional: false,
+      // Has moved past threshold
+      pointerId: -1
+    });
+    const threshold = dragConfig?.threshold ?? 0;
+    const filterTaps = dragConfig?.filterTaps ?? true;
+    const handlePointerDown = React.useCallback(
+      (event) => {
+        event.stopPropagation();
+        event.target.setPointerCapture(event.pointerId);
+        dragState.current.active = true;
+        dragState.current.intentional = threshold === 0;
+        dragState.current.pointerId = event.pointerId;
+        if (defaultControls) defaultControls.enabled = false;
+        ref.current.matrix.decompose(initialModelPosition, new THREE.Quaternion(), new THREE.Vector3());
+        mousePosition3D.copy(event.point);
+        startPointerPos.copy(event.point);
+        dragOffset.copy(mousePosition3D).sub(initialModelPosition);
+        if (!axisLock) {
+          camera.getWorldDirection(dragPlaneNormal).negate();
+        } else {
+          switch (axisLock) {
+            case "x":
+              dragPlaneNormal.set(1, 0, 0);
+              break;
+            case "y":
+              dragPlaneNormal.set(0, 1, 0);
+              break;
+            case "z":
+              dragPlaneNormal.set(0, 0, 1);
+              break;
           }
-          invalidate();
-        },
-        onDragEnd: () => {
-          if (defaultControls) defaultControls.enabled = true;
-          onDragEnd && onDragEnd();
-          invalidate();
         }
+        dragPlane.setFromNormalAndCoplanarPoint(dragPlaneNormal, mousePosition3D);
+        if (dragState.current.intentional) {
+          onDragStart && onDragStart(initialModelPosition);
+        }
+        invalidate();
       },
-      {
-        drag: {
-          filterTaps: true,
-          threshold: 1,
-          ...typeof dragConfig === "object" ? dragConfig : {}
+      [defaultControls, camera, axisLock, threshold, onDragStart, invalidate]
+    );
+    const handlePointerMove = React.useCallback(
+      (event) => {
+        if (!dragState.current.active || event.pointerId !== dragState.current.pointerId) return;
+        const intersection = event.ray.intersectPlane(dragPlane, mousePosition3D);
+        if (!intersection) return;
+        if (!dragState.current.intentional) {
+          const distance = mousePosition3D.distanceTo(startPointerPos);
+          if (distance < threshold) return;
+          dragState.current.intentional = true;
+          onDragStart && onDragStart(initialModelPosition);
         }
-      }
+        const previousLocalMatrix = ref.current.matrix.clone();
+        const previousWorldMatrix = ref.current.matrixWorld.clone();
+        const intendedNewPosition = new THREE.Vector3(
+          mousePosition3D.x - dragOffset.x,
+          mousePosition3D.y - dragOffset.y,
+          mousePosition3D.z - dragOffset.z
+        );
+        if (dragLimits) {
+          intendedNewPosition.x = dragLimits[0] ? Math.max(Math.min(intendedNewPosition.x, dragLimits[0][1]), dragLimits[0][0]) : intendedNewPosition.x;
+          intendedNewPosition.y = dragLimits[1] ? Math.max(Math.min(intendedNewPosition.y, dragLimits[1][1]), dragLimits[1][0]) : intendedNewPosition.y;
+          intendedNewPosition.z = dragLimits[2] ? Math.max(Math.min(intendedNewPosition.z, dragLimits[2][1]), dragLimits[2][0]) : intendedNewPosition.z;
+        }
+        if (autoTransform) {
+          ref.current.matrix.setPosition(intendedNewPosition);
+          const deltaLocalMatrix = ref.current.matrix.clone().multiply(previousLocalMatrix.invert());
+          const deltaWorldMatrix = ref.current.matrix.clone().multiply(previousWorldMatrix.invert());
+          onDrag && onDrag(ref.current.matrix, deltaLocalMatrix, ref.current.matrixWorld, deltaWorldMatrix);
+        } else {
+          const tempMatrix = new THREE.Matrix4().copy(ref.current.matrix);
+          tempMatrix.setPosition(intendedNewPosition);
+          const deltaLocalMatrix = tempMatrix.clone().multiply(previousLocalMatrix.invert());
+          const deltaWorldMatrix = tempMatrix.clone().multiply(previousWorldMatrix.invert());
+          onDrag && onDrag(tempMatrix, deltaLocalMatrix, ref.current.matrixWorld, deltaWorldMatrix);
+        }
+        invalidate();
+      },
+      [autoTransform, dragLimits, threshold, onDragStart, onDrag, invalidate]
+    );
+    const handlePointerUp = React.useCallback(
+      (event) => {
+        if (!dragState.current.active || event.pointerId !== dragState.current.pointerId) return;
+        event.target.releasePointerCapture(event.pointerId);
+        const wasIntentional = dragState.current.intentional;
+        dragState.current.active = false;
+        dragState.current.intentional = false;
+        dragState.current.pointerId = -1;
+        if (defaultControls) defaultControls.enabled = true;
+        if (wasIntentional || !filterTaps) {
+          onDragEnd && onDragEnd();
+        }
+        invalidate();
+      },
+      [defaultControls, filterTaps, onDragEnd, invalidate]
     );
+    const handlePointerEnter = React.useCallback(() => {
+      onHover && onHover(true);
+    }, [onHover]);
+    const handlePointerLeave = React.useCallback(() => {
+      onHover && onHover(false);
+    }, [onHover]);
     React.useImperativeHandle(fRef, () => ref.current, []);
     React.useLayoutEffect(() => {
       if (!matrix) return;
       ref.current.matrix = matrix;
     }, [matrix]);
-    return /* @__PURE__ */ React.createElement("group", { ref, ...bind(), matrix, matrixAutoUpdate: false, ...props }, children);
+    return /* @__PURE__ */ React.createElement(
+      "group",
+      {
+        ref,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        matrix,
+        matrixAutoUpdate: false,
+        ...props
+      },
+      children
+    );
   }
 );
 
@@ -3808,14 +3992,23 @@ function KeyboardControls({ map, children, onChange, domElement }) {
       obj.pressed = false;
       if (up) fn(false);
     };
+    const blurHandler = () => {
+      const resetState = map.reduce((prev, cur) => ({ ...prev, [cur.name]: false }), {});
+      set(resetState);
+      Object.values(keyMap).forEach((obj) => {
+        obj.pressed = false;
+      });
+    };
     const source = domElement || window;
     source.addEventListener("keydown", downHandler, { passive: true });
     source.addEventListener("keyup", upHandler, { passive: true });
+    window.addEventListener("blur", blurHandler);
     return () => {
       source.removeEventListener("keydown", downHandler);
       source.removeEventListener("keyup", upHandler);
+      window.removeEventListener("blur", blurHandler);
     };
-  }, [domElement, key]);
+  }, [domElement, key, onChange]);
   return /* @__PURE__ */ React.createElement(context$8.Provider, { value: api, children });
 }
 function useKeyboardControls(sel) {
@@ -3837,20 +4030,28 @@ const MapControls = /* @__PURE__ */ React.forwardRef((props = { enableDamping: t
   const controls = React.useMemo(() => new MapControls$1(explCamera), [explCamera]);
   React.useEffect(() => {
     controls.connect(explDomElement);
+    return () => void controls.dispose();
+  }, [explDomElement, controls]);
+  React.useEffect(() => {
     const callback = (e) => {
       invalidate();
       if (onChange) onChange(e);
     };
+    const onStartCb = (e) => {
+      if (onStart) onStart(e);
+    };
+    const onEndCb = (e) => {
+      if (onEnd) onEnd(e);
+    };
     controls.addEventListener("change", callback);
-    if (onStart) controls.addEventListener("start", onStart);
-    if (onEnd) controls.addEventListener("end", onEnd);
+    controls.addEventListener("start", onStartCb);
+    controls.addEventListener("end", onEndCb);
     return () => {
-      controls.dispose();
+      controls.removeEventListener("start", onStartCb);
+      controls.removeEventListener("end", onEndCb);
       controls.removeEventListener("change", callback);
-      if (onStart) controls.removeEventListener("start", onStart);
-      if (onEnd) controls.removeEventListener("end", onEnd);
     };
-  }, [onChange, onStart, onEnd, controls, invalidate, explDomElement]);
+  }, [onChange, onStart, onEnd, controls, invalidate]);
   React.useEffect(() => {
     if (makeDefault) {
       const old = get().controls;
@@ -3858,7 +4059,9 @@ const MapControls = /* @__PURE__ */ React.forwardRef((props = { enableDamping: t
       return () => set({ controls: old });
     }
   }, [makeDefault, controls]);
-  useFrame(() => controls.update(), -1);
+  useFrame(() => {
+    if (controls.enabled) controls.update();
+  }, -1);
   return /* @__PURE__ */ React.createElement("primitive", { ref, object: controls, enableDamping: true, ...rest });
 });
 
@@ -3984,20 +4187,16 @@ const OrbitControls = /* @__PURE__ */ React.forwardRef(
     onEnd,
     ...restProps
   }, ref) => {
-    const invalidate = useThree((state) => state.invalidate);
-    const defaultCamera = useThree((state) => state.camera);
-    const gl = useThree((state) => state.gl);
-    const events = useThree((state) => state.events);
-    const setEvents = useThree((state) => state.setEvents);
-    const set = useThree((state) => state.set);
-    const get = useThree((state) => state.get);
-    const performance = useThree((state) => state.performance);
+    const { invalidate, camera: defaultCamera, renderer, events, setEvents, set, get, performance } = useThree();
     const explCamera = camera || defaultCamera;
-    const explDomElement = domElement || events.connected || gl.domElement;
+    const explDomElement = domElement || events.connected || renderer.domElement;
     const controls = React.useMemo(() => new OrbitControls$1(explCamera), [explCamera]);
-    useFrame(() => {
-      if (controls.enabled) controls.update();
-    }, -1);
+    useFrame(
+      () => {
+        if (controls.enabled) controls.update();
+      },
+      { before: "update" }
+    );
     React.useEffect(() => {
       if (keyEvents) {
         controls.connect(keyEvents === true ? explDomElement : keyEvents);
@@ -4111,9 +4310,8 @@ function PresentationControls({
   azimuth = [-Infinity, Infinity],
   damping = 0.25
 }) {
-  const events = useThree((state) => state.events);
-  const gl = useThree((state) => state.gl);
-  const explDomElement = domElement || events.connected || gl.domElement;
+  const { events, renderer, invalidate } = useThree();
+  const explDomElement = domElement || events.connected || renderer.domElement;
   const { size } = useThree();
   const rPolar = React.useMemo(
     () => [rotation[0] + polar[0], rotation[0] + polar[1]],
@@ -4130,18 +4328,20 @@ function PresentationControls({
   React.useEffect(() => {
     if (global && cursor && enabled) {
       explDomElement.style.cursor = "grab";
-      gl.domElement.style.cursor = "";
+      renderer.domElement.style.cursor = "";
       return () => {
         explDomElement.style.cursor = "default";
-        gl.domElement.style.cursor = "default";
+        renderer.domElement.style.cursor = "default";
       };
     }
   }, [global, cursor, explDomElement, enabled]);
   const [animation] = React.useState({ scale: 1, rotation: rInitial, damping });
   const ref = React.useRef(null);
   useFrame((state, delta) => {
-    easing.damp3(ref.current.scale, animation.scale, animation.damping, delta);
-    easing.dampE(ref.current.rotation, animation.rotation, animation.damping, delta);
+    let changed = false;
+    changed ||= easing.damp3(ref.current.scale, animation.scale, animation.damping, delta);
+    changed ||= easing.dampE(ref.current.rotation, animation.rotation, animation.damping, delta);
+    if (changed) state.invalidate();
   });
   const bind = useGesture(
     {
@@ -4149,6 +4349,7 @@ function PresentationControls({
         if (cursor && !global && enabled) explDomElement.style.cursor = last ? "auto" : "grab";
       },
       onDrag: ({ down, delta: [x, y], memo: [oldY, oldX] = animation.rotation || rInitial }) => {
+        invalidate();
         if (!enabled) return [y, x];
         if (cursor) explDomElement.style.cursor = down ? "grabbing" : "grab";
         x = MathUtils.clamp(oldX + x / size.width * Math.PI * speed, ...rAzimuth);
@@ -4157,14 +4358,27 @@ function PresentationControls({
         animation.rotation = snap && !down ? rInitial : [y, x, 0];
         animation.damping = snap && !down && typeof snap !== "boolean" ? snap : damping;
         return [y, x];
+      },
+      onDragEnd: () => {
+        invalidate();
       }
     },
-    { target: global ? explDomElement : void 0 }
+    { target: global ? explDomElement : void 0, enabled }
   );
   return /* @__PURE__ */ React.createElement("group", { ref, ...bind?.() }, children);
 }
 
+function roundToPixelRatio(value) {
+  const ratio = window.devicePixelRatio || 1;
+  return Math.round(value * ratio) / ratio;
+}
+function getMaxAnisotropy(renderer) {
+  const r = renderer;
+  return r?.getMaxAnisotropy?.() ?? r?.capabilities?.getMaxAnisotropy?.() ?? 1;
+}
+
 const context$7 = /* @__PURE__ */ React.createContext(null);
+const rootCache = /* @__PURE__ */ new WeakMap();
 function useScroll() {
   return React.useContext(context$7);
 }
@@ -4178,6 +4392,7 @@ function ScrollControls({
   damping = 0.25,
   maxSpeed = Infinity,
   prepend = false,
+  pixelPerfect = true,
   style = {},
   children
 }) {
@@ -4187,6 +4402,7 @@ function ScrollControls({
   const [fixed] = React.useState(() => document.createElement("div"));
   const target = gl.domElement.parentNode;
   const scroll = React.useRef(0);
+  const disableScrollUpdate = React.useRef(false);
   const state = React.useMemo(() => {
     const state2 = {
       el,
@@ -4199,6 +4415,7 @@ function ScrollControls({
       delta: 0,
       scroll,
       pages,
+      pixelPerfect,
       // 0-1 for a range between from -> from + distance
       range(from, distance2, margin = 0) {
         const start = from - margin;
@@ -4217,7 +4434,7 @@ function ScrollControls({
       }
     };
     return state2;
-  }, [eps, damping, horizontal, pages]);
+  }, [eps, damping, horizontal, pages, pixelPerfect]);
   React.useEffect(() => {
     el.style.position = "absolute";
     el.style.width = "100%";
@@ -4267,16 +4484,20 @@ function ScrollControls({
       const scrollLength = el[horizontal ? "scrollWidth" : "scrollHeight"];
       const scrollThreshold = scrollLength - containerLength;
       let current = 0;
-      let disableScroll = true;
+      let disableScroll = false;
       let firstRun = true;
       const onScroll = () => {
         if (!enabled || firstRun) return;
+        if (disableScrollUpdate.current) {
+          disableScrollUpdate.current = false;
+          return;
+        }
         invalidate();
         current = el[horizontal ? "scrollLeft" : "scrollTop"];
         scroll.current = current / scrollThreshold;
         if (infinite) {
           if (!disableScroll) {
-            if (current >= scrollThreshold) {
+            if (current >= scrollThreshold - 1) {
               const damp = 1 - state.offset;
               el[horizontal ? "scrollLeft" : "scrollTop"] = 1;
               scroll.current = state.offset = -damp;
@@ -4293,11 +4514,34 @@ function ScrollControls({
       };
       el.addEventListener("scroll", onScroll, { passive: true });
       requestAnimationFrame(() => firstRun = false);
-      const onWheel = (e) => el.scrollLeft += e.deltaY / 2;
-      if (horizontal) el.addEventListener("wheel", onWheel, { passive: true });
+      const onResize = () => {
+        if (!el) return;
+        const scrollLength2 = el[horizontal ? "scrollWidth" : "scrollHeight"];
+        const containerLength2 = el[horizontal ? "clientWidth" : "clientHeight"];
+        disableScrollUpdate.current = true;
+        el[horizontal ? "scrollLeft" : "scrollTop"] = state.offset * (scrollLength2 - containerLength2);
+      };
+      const onWheel = (e) => {
+        if (horizontal) {
+          const previous = el.scrollLeft;
+          el.scrollLeft += e.deltaY / 2;
+          if (infinite && previous === el.scrollLeft) {
+            onScroll();
+          }
+        } else if (infinite) {
+          if (el.scrollTop <= 1 && e.deltaY < 0) {
+            onScroll();
+          } else if (el.scrollTop >= el.scrollHeight - el.clientHeight - 1 && e.deltaY > 0) {
+            onScroll();
+          }
+        }
+      };
+      if (horizontal || infinite) el.addEventListener("wheel", onWheel, { passive: true });
+      if (horizontal) window.addEventListener("resize", onResize);
       return () => {
         el.removeEventListener("scroll", onScroll);
-        if (horizontal) el.removeEventListener("wheel", onWheel);
+        if (horizontal || infinite) el.removeEventListener("wheel", onWheel);
+        if (horizontal) window.removeEventListener("resize", onResize);
       };
     }
   }, [el, events, size, infinite, state, invalidate, horizontal, enabled]);
@@ -4330,10 +4574,23 @@ const ScrollHtml = React.forwardRef(
     React.useImperativeHandle(ref, () => group.current, []);
     const { width, height } = useThree((state2) => state2.size);
     const fiberState = React.useContext(context$a);
-    const root = React.useMemo(() => ReactDOM.createRoot(state.fixed), [state.fixed]);
+    const root = React.useMemo(() => {
+      let root2 = rootCache.get(state.fixed);
+      if (!root2) {
+        root2 = ReactDOM.createRoot(state.fixed);
+        rootCache.set(state.fixed, root2);
+      }
+      return root2;
+    }, [state.fixed]);
     useFrame(() => {
       if (state.delta > state.eps) {
-        group.current.style.transform = `translate3d(${state.horizontal ? -width * (state.pages - 1) * state.offset : 0}px,${state.horizontal ? 0 : height * (state.pages - 1) * -state.offset}px,0)`;
+        let x = state.horizontal ? -width * (state.pages - 1) * state.offset : 0;
+        let y = state.horizontal ? 0 : height * (state.pages - 1) * -state.offset;
+        if (state.pixelPerfect) {
+          x = roundToPixelRatio(x);
+          y = roundToPixelRatio(y);
+        }
+        group.current.style.transform = `translate3d(${x}px,${y}px,0)`;
       }
     });
     root.render(
@@ -4701,10 +4958,10 @@ const CloudInstance = /* @__PURE__ */ React.forwardRef(
     return /* @__PURE__ */ React.createElement("group", { ref, ...props });
   }
 );
-const Cloud = /* @__PURE__ */ React.forwardRef((props, fref) => {
+const Cloud = /* @__PURE__ */ React.forwardRef(({ materialFactory, ...props }, fref) => {
   const parent = React.useContext(context$6);
   if (parent) return /* @__PURE__ */ React.createElement(CloudInstance, { ref: fref, ...props });
-  return /* @__PURE__ */ React.createElement(Clouds, null, /* @__PURE__ */ React.createElement(CloudInstance, { ref: fref, ...props }));
+  return /* @__PURE__ */ React.createElement(Clouds, { materialFactory }, /* @__PURE__ */ React.createElement(CloudInstance, { ref: fref, ...props }));
 });
 
 const CatmullRomLine = /* @__PURE__ */ React.forwardRef(function CatmullRomLine2({
@@ -5226,7 +5483,7 @@ const Text3D = /* @__PURE__ */ React.forwardRef(
       return {
         font,
         size,
-        height,
+        depth: height,
         bevelThickness,
         bevelSize,
         bevelEnabled,
@@ -5262,380 +5519,9 @@ const Text3D = /* @__PURE__ */ React.forwardRef(
   }
 );
 
-const WireframeMaterialShaders = {
-  uniforms: {
-    strokeOpacity: 1,
-    fillOpacity: 0.25,
-    fillMix: 0,
-    thickness: 0.05,
-    colorBackfaces: false,
-    dashInvert: true,
-    dash: false,
-    dashRepeats: 4,
-    dashLength: 0.5,
-    squeeze: false,
-    squeezeMin: 0.2,
-    squeezeMax: 1,
-    stroke: /* @__PURE__ */ new THREE.Color("#ff0000"),
-    backfaceStroke: /* @__PURE__ */ new THREE.Color("#0000ff"),
-    fill: /* @__PURE__ */ new THREE.Color("#00ff00")
-  },
-  vertex: (
-    /* glsl */
-    `
-	  attribute vec3 barycentric;
-	
-		varying vec3 v_edges_Barycentric;
-		varying vec3 v_edges_Position;
-
-		void initWireframe() {
-			v_edges_Barycentric = barycentric;
-			v_edges_Position = position.xyz;
-		}
-	  `
-  ),
-  fragment: (
-    /* glsl */
-    `
-		#ifndef PI
-	  	#define PI 3.1415926535897932384626433832795
-		#endif
-  
-	  varying vec3 v_edges_Barycentric;
-	  varying vec3 v_edges_Position;
-  
-	  uniform float strokeOpacity;
-	  uniform float fillOpacity;
-	  uniform float fillMix;
-	  uniform float thickness;
-	  uniform bool colorBackfaces;
-  
-	  // Dash
-	  uniform bool dashInvert;
-	  uniform bool dash;
-	  uniform bool dashOnly;
-	  uniform float dashRepeats;
-	  uniform float dashLength;
-  
-	  // Squeeze
-	  uniform bool squeeze;
-	  uniform float squeezeMin;
-	  uniform float squeezeMax;
-  
-	  // Colors
-	  uniform vec3 stroke;
-	  uniform vec3 backfaceStroke;
-	  uniform vec3 fill;
-  
-	  // This is like
-	  float wireframe_aastep(float threshold, float dist) {
-		  float afwidth = fwidth(dist) * 0.5;
-		  return smoothstep(threshold - afwidth, threshold + afwidth, dist);
-	  }
-  
-	  float wireframe_map(float value, float min1, float max1, float min2, float max2) {
-		  return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
-	  }
-  
-	  float getWireframe() {
-			vec3 barycentric = v_edges_Barycentric;
-		
-			// Distance from center of each triangle to its edges.
-			float d = min(min(barycentric.x, barycentric.y), barycentric.z);
-
-			// for dashed rendering, we can use this to get the 0 .. 1 value of the line length
-			float positionAlong = max(barycentric.x, barycentric.y);
-			if (barycentric.y < barycentric.x && barycentric.y < barycentric.z) {
-				positionAlong = 1.0 - positionAlong;
-			}
-
-			// the thickness of the stroke
-			float computedThickness = wireframe_map(thickness, 0.0, 1.0, 0.0, 0.34);
-
-			// if we want to shrink the thickness toward the center of the line segment
-			if (squeeze) {
-				computedThickness *= mix(squeezeMin, squeezeMax, (1.0 - sin(positionAlong * PI)));
-			}
-
-			// Create dash pattern
-			if (dash) {
-				// here we offset the stroke position depending on whether it
-				// should overlap or not
-				float offset = 1.0 / dashRepeats * dashLength / 2.0;
-				if (!dashInvert) {
-					offset += 1.0 / dashRepeats / 2.0;
-				}
-
-				// if we should animate the dash or not
-				// if (dashAnimate) {
-				// 	offset += time * 0.22;
-				// }
-
-				// create the repeating dash pattern
-				float pattern = fract((positionAlong + offset) * dashRepeats);
-				computedThickness *= 1.0 - wireframe_aastep(dashLength, pattern);
-			}
-
-			// compute the anti-aliased stroke edge  
-			float edge = 1.0 - wireframe_aastep(computedThickness, d);
-
-			return edge;
-	  }
-	  `
-  )
-};
-const WireframeMaterial = /* @__PURE__ */ shaderMaterial(
-  WireframeMaterialShaders.uniforms,
-  WireframeMaterialShaders.vertex + /* glsl */
-  `
-  	void main() {
-		initWireframe();
-		gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-	}
-  `,
-  WireframeMaterialShaders.fragment + /* glsl */
-  `
-  void main () {
-		// Compute color
-
-		float edge = getWireframe();
-		vec4 colorStroke = vec4(stroke, edge);
-
-		#ifdef FLIP_SIDED
-			colorStroke.rgb = backfaceStroke;
-		#endif
-    
-		vec4 colorFill = vec4(fill, fillOpacity);
-		vec4 outColor = mix(colorFill, colorStroke, edge * strokeOpacity);
-
-		gl_FragColor = outColor;
-	}
-  `
-);
-function setWireframeOverride(material, uniforms) {
-  material.onBeforeCompile = (shader) => {
-    shader.uniforms = {
-      ...shader.uniforms,
-      ...uniforms
-    };
-    shader.vertexShader = shader.vertexShader.replace(
-      "void main() {",
-      `
-		  ${WireframeMaterialShaders.vertex}
-		  void main() {
-			initWireframe();
-		`
-    );
-    shader.fragmentShader = shader.fragmentShader.replace(
-      "void main() {",
-      `
-		  ${WireframeMaterialShaders.fragment}
-		  void main() {
-		`
-    );
-    shader.fragmentShader = shader.fragmentShader.replace(
-      "#include <color_fragment>",
-      /* glsl */
-      `
-		  #include <color_fragment>
-			  float edge = getWireframe();
-		  vec4 colorStroke = vec4(stroke, edge);
-		  #ifdef FLIP_SIDED
-			colorStroke.rgb = backfaceStroke;
-		  #endif
-		  vec4 colorFill = vec4(mix(diffuseColor.rgb, fill, fillMix), mix(diffuseColor.a, fillOpacity, fillMix));
-		  vec4 outColor = mix(colorFill, colorStroke, edge * strokeOpacity);
-
-		  diffuseColor.rgb = outColor.rgb;
-		  diffuseColor.a *= outColor.a;
-		`
-    );
-  };
-  material.side = THREE.DoubleSide;
-  material.transparent = true;
-}
-function useWireframeUniforms(uniforms, props) {
-  React.useEffect(
-    () => void (uniforms.fillOpacity.value = props.fillOpacity ?? uniforms.fillOpacity.value),
-    [props.fillOpacity]
-  );
-  React.useEffect(() => void (uniforms.fillMix.value = props.fillMix ?? uniforms.fillMix.value), [props.fillMix]);
-  React.useEffect(
-    () => void (uniforms.strokeOpacity.value = props.strokeOpacity ?? uniforms.strokeOpacity.value),
-    [props.strokeOpacity]
-  );
-  React.useEffect(
-    () => void (uniforms.thickness.value = props.thickness ?? uniforms.thickness.value),
-    [props.thickness]
-  );
-  React.useEffect(() => void (uniforms.colorBackfaces.value = !!props.colorBackfaces), [props.colorBackfaces]);
-  React.useEffect(() => void (uniforms.dash.value = !!props.dash), [props.dash]);
-  React.useEffect(() => void (uniforms.dashInvert.value = !!props.dashInvert), [props.dashInvert]);
-  React.useEffect(
-    () => void (uniforms.dashRepeats.value = props.dashRepeats ?? uniforms.dashRepeats.value),
-    [props.dashRepeats]
-  );
-  React.useEffect(
-    () => void (uniforms.dashLength.value = props.dashLength ?? uniforms.dashLength.value),
-    [props.dashLength]
-  );
-  React.useEffect(() => void (uniforms.squeeze.value = !!props.squeeze), [props.squeeze]);
-  React.useEffect(
-    () => void (uniforms.squeezeMin.value = props.squeezeMin ?? uniforms.squeezeMin.value),
-    [props.squeezeMin]
-  );
-  React.useEffect(
-    () => void (uniforms.squeezeMax.value = props.squeezeMax ?? uniforms.squeezeMax.value),
-    [props.squeezeMax]
-  );
-  React.useEffect(
-    () => void (uniforms.stroke.value = props.stroke ? new THREE.Color(props.stroke) : uniforms.stroke.value),
-    [props.stroke]
-  );
-  React.useEffect(
-    () => void (uniforms.fill.value = props.fill ? new THREE.Color(props.fill) : uniforms.fill.value),
-    [props.fill]
-  );
-  React.useEffect(
-    () => void (uniforms.backfaceStroke.value = props.backfaceStroke ? new THREE.Color(props.backfaceStroke) : uniforms.backfaceStroke.value),
-    [props.backfaceStroke]
-  );
-}
-
-function isWithGeometry(object) {
-  return !!object?.geometry;
-}
-function isGeometry(object) {
-  return !!object?.isBufferGeometry;
-}
-function isRefObject$1(object) {
-  return !!object?.current;
-}
-function isRef$1(object) {
-  return object?.current !== void 0;
-}
-function isWireframeGeometry(geometry) {
-  return geometry.type === "WireframeGeometry";
-}
-function getUniforms() {
-  const u = {};
-  for (const key in WireframeMaterialShaders.uniforms) {
-    u[key] = { value: WireframeMaterialShaders.uniforms[key] };
-  }
-  return u;
-}
-function getBarycentricCoordinates(geometry, removeEdge) {
-  const position = geometry.getAttribute("position");
-  const count = position.count;
-  const barycentric = [];
-  for (let i = 0; i < count; i++) {
-    const even = i % 2 === 0;
-    const Q = removeEdge ? 1 : 0;
-    if (even) {
-      barycentric.push(0, 0, 1, 0, 1, 0, 1, 0, Q);
-    } else {
-      barycentric.push(0, 1, 0, 0, 0, 1, 1, 0, Q);
-    }
-  }
-  return new THREE.BufferAttribute(Float32Array.from(barycentric), 3);
-}
-function getInputGeometry(inputGeometry) {
-  const geo = isRefObject$1(inputGeometry) ? inputGeometry.current : inputGeometry;
-  if (!isGeometry(geo)) {
-    if (isWireframeGeometry(geo)) {
-      throw new Error("Wireframe: WireframeGeometry is not supported.");
-    }
-    const parent = geo.parent;
-    if (isWithGeometry(parent)) {
-      if (isWireframeGeometry(parent.geometry)) {
-        throw new Error("Wireframe: WireframeGeometry is not supported.");
-      }
-      return parent.geometry;
-    }
-  } else {
-    return geo;
-  }
-}
-function setBarycentricCoordinates(geometry, simplify) {
-  if (geometry.index) {
-    console.warn("Wireframe: Requires non-indexed geometry, converting to non-indexed geometry.");
-    const nonIndexedGeo = geometry.toNonIndexed();
-    geometry.copy(nonIndexedGeo);
-    geometry.setIndex(null);
-  }
-  const newBarycentric = getBarycentricCoordinates(geometry, simplify);
-  geometry.setAttribute("barycentric", newBarycentric);
-}
-function WireframeWithCustomGeo({
-  geometry: customGeometry,
-  simplify = false,
-  ...props
-}) {
-  extend({ MeshWireframeMaterial: WireframeMaterial });
-  const [geometry, setGeometry] = React.useState(null);
-  React.useLayoutEffect(() => {
-    const geom = getInputGeometry(customGeometry);
-    if (!geom) {
-      throw new Error("Wireframe: geometry prop must be a BufferGeometry or a ref to a BufferGeometry.");
-    }
-    setBarycentricCoordinates(geom, simplify);
-    if (isRef$1(customGeometry)) {
-      setGeometry(geom);
-    }
-  }, [simplify, customGeometry]);
-  const drawnGeo = isRef$1(customGeometry) ? geometry : customGeometry;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, drawnGeo && /* @__PURE__ */ React.createElement("mesh", { geometry: drawnGeo }, /* @__PURE__ */ React.createElement(
-    "meshWireframeMaterial",
-    {
-      attach: "material",
-      transparent: true,
-      side: THREE.DoubleSide,
-      polygonOffset: true,
-      polygonOffsetFactor: -4,
-      ...props
-    }
-  )));
-}
-function WireframeWithoutCustomGeo({
-  simplify = false,
-  ...props
-}) {
-  const objectRef = React.useRef(null);
-  const uniforms = React.useMemo(() => getUniforms(), [WireframeMaterialShaders.uniforms]);
-  useWireframeUniforms(uniforms, props);
-  React.useLayoutEffect(() => {
-    const geom = getInputGeometry(objectRef);
-    if (!geom) {
-      throw new Error("Wireframe: Must be a child of a Mesh, Line or Points object or specify a geometry prop.");
-    }
-    const og = geom.clone();
-    setBarycentricCoordinates(geom, simplify);
-    return () => {
-      geom.copy(og);
-      og.dispose();
-    };
-  }, [simplify]);
-  React.useLayoutEffect(() => {
-    const parentMesh = objectRef.current.parent;
-    const og = parentMesh.material.clone();
-    setWireframeOverride(parentMesh.material, uniforms);
-    return () => {
-      parentMesh.material.dispose();
-      parentMesh.material = og;
-    };
-  }, []);
-  return /* @__PURE__ */ React.createElement("object3D", { ref: objectRef });
-}
-function Wireframe({ geometry: customGeometry, ...props }) {
-  if (customGeometry) {
-    return /* @__PURE__ */ React.createElement(WireframeWithCustomGeo, { geometry: customGeometry, ...props });
-  }
-  return /* @__PURE__ */ React.createElement(WireframeWithoutCustomGeo, { ...props });
-}
-
-const Context = /* @__PURE__ */ React.createContext({});
-const useGizmoContext = () => {
-  return React.useContext(Context);
+const Context = /* @__PURE__ */ React.createContext({});
+const useGizmoContext = () => {
+  return React.useContext(Context);
 };
 const turnRate = 2 * Math.PI;
 const dummy = /* @__PURE__ */ new Object3D();
@@ -5780,7 +5666,7 @@ const FaceMaterial = ({
     "meshBasicMaterial",
     {
       map: texture,
-      "map-anisotropy": renderer.getMaxAnisotropy() || 1,
+      "map-anisotropy": getMaxAnisotropy(renderer),
       attach: `material-${index}`,
       color: hover ? hoverColor : "white",
       transparent: true,
@@ -5891,7 +5777,7 @@ function AxisHead({
       "spriteMaterial",
       {
         map: texture,
-        "map-anisotropy": renderer.getMaxAnisotropy() || 1,
+        "map-anisotropy": getMaxAnisotropy(renderer),
         alphaTest: 0.3,
         opacity: label ? 1 : 0.75,
         toneMapped: false
@@ -5928,6 +5814,11 @@ const GizmoViewport = ({
   return /* @__PURE__ */ React.createElement("group", { scale: 40, ...props }, /* @__PURE__ */ React.createElement(Axis, { color: colorX, rotation: [0, 0, 0], scale: axisScale }), /* @__PURE__ */ React.createElement(Axis, { color: colorY, rotation: [0, 0, Math.PI / 2], scale: axisScale }), /* @__PURE__ */ React.createElement(Axis, { color: colorZ, rotation: [0, -Math.PI / 2, 0], scale: axisScale }), !hideAxisHeads && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AxisHead, { arcStyle: colorX, position: [1, 0, 0], label: labels[0], ...axisHeadProps }), /* @__PURE__ */ React.createElement(AxisHead, { arcStyle: colorY, position: [0, 1, 0], label: labels[1], ...axisHeadProps }), /* @__PURE__ */ React.createElement(AxisHead, { arcStyle: colorZ, position: [0, 0, 1], label: labels[2], ...axisHeadProps }), !hideNegativeAxes && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AxisHead, { arcStyle: colorX, position: [-1, 0, 0], ...axisHeadProps }), /* @__PURE__ */ React.createElement(AxisHead, { arcStyle: colorY, position: [0, -1, 0], ...axisHeadProps }), /* @__PURE__ */ React.createElement(AxisHead, { arcStyle: colorZ, position: [0, 0, -1], ...axisHeadProps }))));
 };
 
+const roundEven = (n) => {
+  const rounded = Math.ceil(n);
+  return rounded % 2 === 0 ? rounded : rounded + 1;
+};
+
 const v1 = /* @__PURE__ */ new Vector3();
 const v2 = /* @__PURE__ */ new Vector3();
 const v3 = /* @__PURE__ */ new Vector3();
@@ -5999,7 +5890,7 @@ const getCameraCSSMatrix = /* @__PURE__ */ ((multipliers) => {
 const getObjectCSSMatrix = /* @__PURE__ */ ((scaleMultipliers) => {
   return (matrix, factor) => getCSSMatrix(matrix, scaleMultipliers(factor), "translate(-50%,-50%)");
 })((f) => [1 / f, 1 / f, 1 / f, 1, -1 / f, -1 / f, -1 / f, -1, 1 / f, 1 / f, 1 / f, 1, 1, 1, 1, 1]);
-function isRefObject(ref) {
+function isRefObject$1(ref) {
   return ref && typeof ref === "object" && "current" in ref;
 }
 const Html = /* @__PURE__ */ React.forwardRef(
@@ -6026,9 +5917,12 @@ const Html = /* @__PURE__ */ React.forwardRef(
     as = "div",
     wrapperClass,
     pointerEvents = "auto",
+    pixelPerfect = true,
     ...props
   }, ref) => {
     const { gl, camera, scene, size, raycaster, events, viewport } = useThree();
+    const forceEven = useThree((state) => state.internal.forceEven);
+    const { frustum } = useThree();
     const [el] = React.useState(() => document.createElement(as));
     const root = React.useRef(null);
     const group = React.useRef(null);
@@ -6040,7 +5934,7 @@ const Html = /* @__PURE__ */ React.forwardRef(
     const occlusionMeshRef = React.useRef(null);
     const isMeshSizeSet = React.useRef(false);
     const isRayCastOcclusion = React.useMemo(() => {
-      return occlude && occlude !== "blending" || Array.isArray(occlude) && occlude.length && isRefObject(occlude[0]);
+      return occlude && occlude !== "blending" || Array.isArray(occlude) && occlude.length && isRefObject$1(occlude[0]);
     }, [occlude]);
     React.useLayoutEffect(() => {
       const el2 = gl.domElement;
@@ -6053,38 +5947,50 @@ const Html = /* @__PURE__ */ React.forwardRef(
         el2.style.position = null;
         el2.style.pointerEvents = null;
       }
-    }, [occlude]);
+    }, [occlude, zIndexRange, gl.domElement]);
     React.useLayoutEffect(() => {
       if (group.current) {
-        const currentRoot = root.current = ReactDOM.createRoot(el);
-        scene.updateMatrixWorld();
-        if (transform) {
-          el.style.cssText = `position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;`;
-        } else {
-          const vec = calculatePosition(group.current, camera, size);
-          el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0);transform-origin:0 0;`;
+        if (!root.current) {
+          root.current = ReactDOM.createRoot(el);
+          scene.updateMatrixWorld();
+          if (transform) {
+            el.style.cssText = `position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;`;
+          } else {
+            el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(0,-9999px,0);transform-origin:0 0;`;
+          }
         }
         if (target) {
           if (prepend) target.prepend(el);
           else target.appendChild(el);
         }
         return () => {
-          if (target) target.removeChild(el);
-          currentRoot.unmount();
+          if (target && target.contains(el)) {
+            target.removeChild(el);
+          }
         };
       }
-    }, [target, transform]);
+    }, [target, transform, el, prepend, scene]);
     React.useLayoutEffect(() => {
       if (wrapperClass) el.className = wrapperClass;
-    }, [wrapperClass]);
+    }, [wrapperClass, el]);
+    React.useLayoutEffect(() => {
+      return () => {
+        if (root.current) {
+          root.current.unmount();
+          root.current = null;
+        }
+      };
+    }, []);
     const styles = React.useMemo(() => {
+      const width = forceEven ? roundEven(size.width) : size.width;
+      const height = forceEven ? roundEven(size.height) : size.height;
       if (transform) {
         return {
           position: "absolute",
           top: 0,
           left: 0,
-          width: size.width,
-          height: size.height,
+          width,
+          height,
           transformStyle: "preserve-3d",
           pointerEvents: "none"
         };
@@ -6093,15 +5999,15 @@ const Html = /* @__PURE__ */ React.forwardRef(
           position: "absolute",
           transform: center ? "translate3d(-50%,-50%,0)" : "none",
           ...fullscreen && {
-            top: -size.height / 2,
-            left: -size.width / 2,
-            width: size.width,
-            height: size.height
+            top: forceEven ? roundEven(-size.height / 2) : -size.height / 2,
+            left: forceEven ? roundEven(-size.width / 2) : -size.width / 2,
+            width,
+            height
           },
           ...style
         };
       }
-    }, [style, center, fullscreen, size, transform]);
+    }, [style, center, fullscreen, size, transform, forceEven]);
     const transformInnerStyles = React.useMemo(
       () => ({ position: "absolute", pointerEvents }),
       [pointerEvents]
@@ -6115,7 +6021,7 @@ const Html = /* @__PURE__ */ React.forwardRef(
       } else {
         root.current?.render(/* @__PURE__ */ React.createElement("div", { ref, style: styles, className, children }));
       }
-    });
+    }, [transform, styles, transformInnerStyles, ref, className, style, children]);
     const visible = React.useRef(true);
     useFrame((gl2) => {
       if (group.current) {
@@ -6147,7 +6053,12 @@ const Html = /* @__PURE__ */ React.forwardRef(
           const zRange = occlude ? isRayCastOcclusion ? [zIndexRange[0], halfRange] : [halfRange - 1, 0] : zIndexRange;
           el.style.zIndex = `${objectZIndex(group.current, camera, zRange)}`;
           if (transform) {
-            const [widthHalf, heightHalf] = [size.width / 2, size.height / 2];
+            let widthHalf = forceEven ? roundEven(size.width / 2) : size.width / 2;
+            let heightHalf = forceEven ? roundEven(size.height / 2) : size.height / 2;
+            if (pixelPerfect) {
+              widthHalf = roundToPixelRatio(widthHalf);
+              heightHalf = roundToPixelRatio(heightHalf);
+            }
             const fov = camera.projectionMatrix.elements[5] * heightHalf;
             const { isOrthographicCamera, top, left, bottom, right } = camera;
             const cameraMatrix = getCameraCSSMatrix(camera.matrixWorldInverse);
@@ -6158,8 +6069,10 @@ const Html = /* @__PURE__ */ React.forwardRef(
               matrix.elements[3] = matrix.elements[7] = matrix.elements[11] = 0;
               matrix.elements[15] = 1;
             }
-            el.style.width = size.width + "px";
-            el.style.height = size.height + "px";
+            const elWidth = forceEven ? roundEven(size.width) : size.width;
+            const elHeight = forceEven ? roundEven(size.height) : size.height;
+            el.style.width = elWidth + "px";
+            el.style.height = elHeight + "px";
             el.style.perspective = isOrthographicCamera ? "" : `${fov}px`;
             if (transformOuterRef.current && transformInnerRef.current) {
               transformOuterRef.current.style.transform = `${cameraTransform}${cameraMatrix}translate(${widthHalf}px,${heightHalf}px)`;
@@ -6167,7 +6080,13 @@ const Html = /* @__PURE__ */ React.forwardRef(
             }
           } else {
             const scale = distanceFactor === void 0 ? 1 : objectScale(group.current, camera) * distanceFactor;
-            el.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(${scale})`;
+            let x = forceEven ? roundEven(vec[0]) : vec[0];
+            let y = forceEven ? roundEven(vec[1]) : vec[1];
+            if (pixelPerfect) {
+              x = roundToPixelRatio(x);
+              y = roundToPixelRatio(y);
+            }
+            el.style.transform = `translate3d(${x}px,${y}px,0) scale(${scale})`;
           }
           oldPosition.current = vec;
           oldZoom.current = camera.zoom;
@@ -6178,8 +6097,7 @@ const Html = /* @__PURE__ */ React.forwardRef(
           if (transformOuterRef.current) {
             const el2 = transformOuterRef.current.children[0];
             if (el2?.clientWidth && el2?.clientHeight) {
-              const { isOrthographicCamera } = camera;
-              if (isOrthographicCamera || geometry) {
+              if (geometry) {
                 if (props.scale) {
                   if (!Array.isArray(props.scale)) {
                     occlusionMeshRef.current.scale.setScalar(1 / props.scale);
@@ -6211,68 +6129,16 @@ const Html = /* @__PURE__ */ React.forwardRef(
         }
       }
     });
-    const shaders = React.useMemo(
-      () => ({
-        vertexShader: !transform ? (
-          /* glsl */
-          `
-          /*
-            This shader is from the THREE's SpriteMaterial.
-            We need to turn the backing plane into a Sprite
-            (make it always face the camera) if "transfrom"
-            is false.
-          */
-          #include <common>
-
-          void main() {
-            vec2 center = vec2(0., 1.);
-            float rotation = 0.0;
-
-            // This is somewhat arbitrary, but it seems to work well
-            // Need to figure out how to derive this dynamically if it even matters
-            float size = 0.03;
-
-            vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
-            vec2 scale;
-            scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );
-            scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );
-
-            bool isPerspective = isPerspectiveMatrix( projectionMatrix );
-            if ( isPerspective ) scale *= - mvPosition.z;
-
-            vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;
-            vec2 rotatedPosition;
-            rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;
-            rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;
-            mvPosition.xy += rotatedPosition;
-
-            gl_Position = projectionMatrix * mvPosition;
-          }
-      `
-        ) : void 0,
-        fragmentShader: (
-          /* glsl */
-          `
-        void main() {
-          gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
-        }
-      `
-        )
-      }),
-      [transform]
-    );
-    return /* @__PURE__ */ React.createElement("group", { ...props, ref: group }, occlude && !isRayCastOcclusion && /* @__PURE__ */ React.createElement("mesh", { castShadow, receiveShadow, ref: occlusionMeshRef }, geometry || /* @__PURE__ */ React.createElement("planeGeometry", null), material || /* @__PURE__ */ React.createElement(
-      "shaderMaterial",
-      {
-        side: DoubleSide,
-        vertexShader: shaders.vertexShader,
-        fragmentShader: shaders.fragmentShader
-      }
-    )));
+    return /* @__PURE__ */ React.createElement("group", { ...props, ref: group }, occlude && !isRayCastOcclusion && /* @__PURE__ */ React.createElement("mesh", { castShadow, receiveShadow, ref: occlusionMeshRef }, geometry || /* @__PURE__ */ React.createElement("planeGeometry", null), material));
   }
 );
 
 const context$4 = /* @__PURE__ */ React.createContext(null);
+const resolveObject = (object, fallback) => {
+  if (!object) return fallback;
+  if ("current" in object) return object.current;
+  return object;
+};
 
 const vec1$1 = /* @__PURE__ */ new THREE.Vector3();
 const vec2$1 = /* @__PURE__ */ new THREE.Vector3();
@@ -6307,6 +6173,8 @@ const AxisArrow = ({ direction, axis }) => {
     onDragStart,
     onDrag,
     onDragEnd,
+    onHover,
+    dragState,
     userData,
     LineComponent: Line
   } = React.useContext(context$4);
@@ -6338,7 +6206,13 @@ const AxisArrow = ({ direction, axis }) => {
   const onPointerMove = React.useCallback(
     (e) => {
       e.stopPropagation();
-      if (!isHovered) setIsHovered(true);
+      if (!isHovered) {
+        const drag = dragState.current;
+        if (drag === null || drag.component === "Arrow" && drag.axis === axis) {
+          setIsHovered(true);
+          onHover({ component: "Arrow", axis, hovering: true });
+        }
+      }
       if (clickInfo.current) {
         const { clickPoint, dir } = clickInfo.current;
         const [min, max] = translationLimits?.[axis] || [void 0, void 0];
@@ -6357,7 +6231,7 @@ const AxisArrow = ({ direction, axis }) => {
         onDrag(offsetMatrix$1);
       }
     },
-    [annotations, onDrag, isHovered, translation, translationLimits, axis]
+    [annotations, onDrag, onHover, dragState, isHovered, translation, translationLimits, axis]
   );
   const onPointerUp = React.useCallback(
     (e) => {
@@ -6372,10 +6246,16 @@ const AxisArrow = ({ direction, axis }) => {
     },
     [annotations, camControls, onDragEnd]
   );
-  const onPointerOut = React.useCallback((e) => {
-    e.stopPropagation();
-    setIsHovered(false);
-  }, []);
+  const onPointerOut = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (isHovered) {
+        setIsHovered(false);
+        onHover({ component: "Arrow", axis, hovering: false });
+      }
+    },
+    [onHover, axis, isHovered]
+  );
   const { cylinderLength, coneWidth, coneLength, matrixL } = React.useMemo(() => {
     const coneWidth2 = fixed ? lineWidth / scale * 1.6 : scale / 20;
     const coneLength2 = fixed ? 0.2 : scale / 5;
@@ -6479,6 +6359,8 @@ const rotMatrix = /* @__PURE__ */ new THREE.Matrix4();
 const posNew = /* @__PURE__ */ new THREE.Vector3();
 const ray$1 = /* @__PURE__ */ new THREE.Ray();
 const intersection$1 = /* @__PURE__ */ new THREE.Vector3();
+const viewPlane = /* @__PURE__ */ new THREE.Plane();
+const viewIntersection = /* @__PURE__ */ new THREE.Vector3();
 const AxisRotator = ({
   dir1,
   dir2,
@@ -6499,6 +6381,8 @@ const AxisRotator = ({
     onDragStart,
     onDrag,
     onDragEnd,
+    onHover,
+    dragState,
     userData,
     LineComponent: Line
   } = React.useContext(context$4);
@@ -6532,14 +6416,29 @@ const AxisRotator = ({
   const onPointerMove = React.useCallback(
     (e) => {
       e.stopPropagation();
-      if (!isHovered) setIsHovered(true);
+      if (!isHovered) {
+        const drag = dragState.current;
+        if (drag === null || drag.component === "Rotator" && drag.axis === axis) {
+          setIsHovered(true);
+          onHover({ component: "Rotator", axis, hovering: true });
+        }
+      }
       if (clickInfo.current) {
         const { clickPoint, origin, e1, e2, normal, plane } = clickInfo.current;
         const [min, max] = rotationLimits?.[axis] || [void 0, void 0];
         ray$1.copy(e.ray);
-        ray$1.intersectPlane(plane, intersection$1);
-        ray$1.direction.negate();
-        ray$1.intersectPlane(plane, intersection$1);
+        const dotProduct = Math.abs(ray$1.direction.dot(normal));
+        if (dotProduct < 0.1) {
+          viewPlane.setFromNormalAndCoplanarPoint(ray$1.direction.clone().negate(), origin);
+          ray$1.intersectPlane(viewPlane, viewIntersection);
+          const toIntersection = viewIntersection.clone().sub(origin);
+          const projectedDist = toIntersection.dot(normal);
+          intersection$1.copy(viewIntersection).sub(normal.clone().multiplyScalar(projectedDist));
+        } else {
+          ray$1.intersectPlane(plane, intersection$1);
+          ray$1.direction.negate();
+          ray$1.intersectPlane(plane, intersection$1);
+        }
         let deltaAngle = calculateAngle(clickPoint, intersection$1, origin, e1, e2);
         let degrees = toDegrees(deltaAngle);
         if (e.shiftKey) {
@@ -6565,7 +6464,7 @@ const AxisRotator = ({
         onDrag(rotMatrix);
       }
     },
-    [annotations, onDrag, isHovered, rotationLimits, axis]
+    [annotations, onDrag, onHover, dragState, isHovered, rotationLimits, axis]
   );
   const onPointerUp = React.useCallback(
     (e) => {
@@ -6581,10 +6480,16 @@ const AxisRotator = ({
     },
     [annotations, camControls, onDragEnd]
   );
-  const onPointerOut = React.useCallback((e) => {
-    e.stopPropagation();
-    setIsHovered(false);
-  }, []);
+  const onPointerOut = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (isHovered) {
+        setIsHovered(false);
+        onHover({ component: "Rotator", axis, hovering: false });
+      }
+    },
+    [onHover, axis, isHovered]
+  );
   const matrixL = React.useMemo(() => {
     const dir1N = dir1.clone().normalize();
     const dir2N = dir2.clone().normalize();
@@ -6685,6 +6590,8 @@ const PlaneSlider = ({
     onDragStart,
     onDrag,
     onDragEnd,
+    onHover,
+    dragState,
     userData,
     LineComponent: Line
   } = React.useContext(context$4);
@@ -6720,7 +6627,13 @@ const PlaneSlider = ({
   const onPointerMove = React.useCallback(
     (e) => {
       e.stopPropagation();
-      if (!isHovered) setIsHovered(true);
+      if (!isHovered) {
+        const drag = dragState.current;
+        if (drag === null || drag.component === "Slider" && drag.axis === axis) {
+          setIsHovered(true);
+          onHover({ component: "Slider", axis, hovering: true });
+        }
+      }
       if (clickInfo.current) {
         const { clickPoint, e1, e2, plane } = clickInfo.current;
         const [minX, maxX] = translationLimits?.[(axis + 1) % 3] || [void 0, void 0];
@@ -6756,7 +6669,7 @@ const PlaneSlider = ({
         onDrag(offsetMatrix);
       }
     },
-    [annotations, onDrag, isHovered, translation, translationLimits, axis]
+    [annotations, onDrag, onHover, dragState, isHovered, translation, translationLimits, axis]
   );
   const onPointerUp = React.useCallback(
     (e) => {
@@ -6771,10 +6684,16 @@ const PlaneSlider = ({
     },
     [annotations, camControls, onDragEnd]
   );
-  const onPointerOut = React.useCallback((e) => {
-    e.stopPropagation();
-    setIsHovered(false);
-  }, []);
+  const onPointerOut = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (isHovered) {
+        setIsHovered(false);
+        onHover({ component: "Slider", axis, hovering: false });
+      }
+    },
+    [onHover, axis, isHovered]
+  );
   const matrixL = React.useMemo(() => {
     const dir1N = dir1.clone().normalize();
     const dir2N = dir2.clone().normalize();
@@ -6912,6 +6831,8 @@ const ScalingSphere = ({ direction, axis }) => {
     onDragStart,
     onDrag,
     onDragEnd,
+    onHover,
+    dragState,
     userData
   } = React.useContext(context$4);
   const size = useThree((state) => state.size);
@@ -6948,7 +6869,13 @@ const ScalingSphere = ({ direction, axis }) => {
   const onPointerMove = React.useCallback(
     (e) => {
       e.stopPropagation();
-      if (!isHovered) setIsHovered(true);
+      if (!isHovered) {
+        const drag = dragState.current;
+        if (drag === null || drag.component === "Sphere" && drag.axis === axis) {
+          setIsHovered(true);
+          onHover({ component: "Sphere", axis, hovering: true });
+        }
+      }
       if (clickInfo.current) {
         const { clickPoint, dir, mPLG, mPLGInv, offsetMultiplier } = clickInfo.current;
         const [min, max] = scaleLimits?.[axis] || [1e-5, void 0];
@@ -6974,7 +6901,7 @@ const ScalingSphere = ({ direction, axis }) => {
         onDrag(scaleMatrix);
       }
     },
-    [annotations, position, onDrag, isHovered, scaleLimits, axis]
+    [annotations, position, onDrag, onHover, dragState, isHovered, scaleLimits, axis]
   );
   const onPointerUp = React.useCallback(
     (e) => {
@@ -6991,10 +6918,16 @@ const ScalingSphere = ({ direction, axis }) => {
     },
     [annotations, camControls, onDragEnd, position]
   );
-  const onPointerOut = React.useCallback((e) => {
-    e.stopPropagation();
-    setIsHovered(false);
-  }, []);
+  const onPointerOut = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (isHovered) {
+        setIsHovered(false);
+        onHover({ component: "Sphere", axis, hovering: false });
+      }
+    },
+    [onHover, axis, isHovered]
+  );
   const { radius, matrixL } = React.useMemo(() => {
     const radius2 = fixed ? lineWidth / scale * 1.8 : scale / 22.5;
     const quaternion = new THREE.Quaternion().setFromUnitVectors(upV, direction.clone().normalize());
@@ -7049,6 +6982,7 @@ const mW = /* @__PURE__ */ new THREE.Matrix4();
 const mL = /* @__PURE__ */ new THREE.Matrix4();
 const mL0Inv = /* @__PURE__ */ new THREE.Matrix4();
 const mdL = /* @__PURE__ */ new THREE.Matrix4();
+const mdW = /* @__PURE__ */ new THREE.Matrix4();
 const mG = /* @__PURE__ */ new THREE.Matrix4();
 const bb = /* @__PURE__ */ new THREE.Box3();
 const bbObj = /* @__PURE__ */ new THREE.Box3();
@@ -7064,9 +6998,11 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
   ({
     enabled = true,
     matrix,
+    object,
     onDragStart,
     onDrag,
     onDragEnd,
+    onHover,
     autoTransform = true,
     anchor,
     disableAxes = false,
@@ -7102,14 +7038,35 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
     const gizmoRef = React.useRef(null);
     const childrenRef = React.useRef(null);
     const translation = React.useRef([0, 0, 0]);
+    const dragState = React.useRef(null);
     const cameraScale = React.useRef(new THREE.Vector3(1, 1, 1));
     const gizmoScale = React.useRef(new THREE.Vector3(1, 1, 1));
+    React.useEffect(() => {
+      if (object) {
+        const target = resolveObject(object);
+        if (target) {
+          const pivot = ref.current;
+          const didAutoUpdate = target.matrixAutoUpdate;
+          target.updateWorldMatrix(true, true);
+          target.matrixAutoUpdate = false;
+          pivot.matrix.copy(target.matrix);
+          return () => {
+            if (didAutoUpdate) {
+              target.matrixAutoUpdate = true;
+              target.matrix.decompose(target.position, target.quaternion, target.scale);
+            }
+          };
+        }
+      }
+    }, [object]);
     React.useLayoutEffect(() => {
       if (!anchor) return;
-      childrenRef.current.updateWorldMatrix(true, true);
-      mPInv.copy(childrenRef.current.matrixWorld).invert();
+      const anchorTarget = resolveObject(object, childrenRef.current);
+      if (!anchorTarget) return;
+      anchorTarget.updateWorldMatrix(true, true);
+      mPInv.copy(anchorTarget.matrixWorld).invert();
       bb.makeEmpty();
-      childrenRef.current.traverse((obj) => {
+      anchorTarget.traverse((obj) => {
         if (!obj.geometry) return;
         if (!obj.geometry.boundingBox) obj.geometry.computeBoundingBox();
         mL.copy(obj.matrixWorld).premultiply(mPInv);
@@ -7124,15 +7081,24 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
       gizmoRef.current.position.copy(vPosition);
       invalidate();
     });
+    const mergedUserData = React.useMemo(
+      () => ({
+        ...userData,
+        ...depthTest === false && { interactivePriority: 1 }
+      }),
+      [userData, depthTest]
+    );
     const config = React.useMemo(
       () => ({
         onDragStart: (props2) => {
+          dragState.current = props2;
           mL0.copy(ref.current.matrix);
           mW0.copy(ref.current.matrixWorld);
           onDragStart && onDragStart(props2);
           invalidate();
         },
-        onDrag: (mdW) => {
+        onDrag: (mdW_) => {
+          mdW.copy(mdW_);
           mP.copy(parentRef.current.matrixWorld);
           mPInv.copy(mP).invert();
           mW.copy(mW0).premultiply(mdW);
@@ -7142,13 +7108,20 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
           if (autoTransform) {
             ref.current.matrix.copy(mL);
           }
-          onDrag && onDrag(mL, mdL, mW, mdW);
+          const target = resolveObject(object);
+          if (target) target.matrix.copy(mL);
+          onDrag && onDrag({ local: mL, deltaLocal: mdL, world: mW, deltaWorld: mdW });
           invalidate();
         },
         onDragEnd: () => {
-          if (onDragEnd) onDragEnd();
+          dragState.current = null;
+          if (onDragEnd) onDragEnd({ local: mL, deltaLocal: mdL, world: mW, deltaWorld: mdW });
           invalidate();
         },
+        onHover: (props2) => {
+          if (onHover) onHover(props2);
+        },
+        dragState,
         translation,
         translationLimits,
         rotationLimits,
@@ -7160,7 +7133,7 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
         fixed,
         depthTest,
         renderOrder,
-        userData,
+        userData: mergedUserData,
         annotations,
         annotationsClass,
         LineComponent: LineComp
@@ -7169,6 +7142,7 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
         onDragStart,
         onDrag,
         onDragEnd,
+        onHover,
         translation,
         translationLimits,
         rotationLimits,
@@ -7180,11 +7154,12 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
         ...axisColors,
         hoveredColor,
         opacity,
-        userData,
+        mergedUserData,
         autoTransform,
         annotations,
         annotationsClass,
-        LineComp
+        LineComp,
+        object
       ]
     );
     const vec = new THREE.Vector3();
@@ -7251,7 +7226,9 @@ const TransformControls = /* @__PURE__ */ React.forwardRef(
     const group = React.useRef(null);
     React.useLayoutEffect(() => {
       if (object) {
-        controls.attach(object instanceof THREE.Object3D ? object : object.current);
+        controls.attach(
+          object instanceof THREE.Object3D ? object : object.current
+        );
       } else if (group.current instanceof THREE.Object3D) {
         controls.attach(group.current);
       }
@@ -7347,7 +7324,7 @@ const PointMaterial = /* @__PURE__ */ React.forwardRef((props, ref) => {
   return /* @__PURE__ */ React.createElement("primitive", { ...props, object: material, ref, attach: "material" });
 });
 
-const PositionalAudio = /* @__PURE__ */ React.forwardRef(({ url, distance = 1, loop = true, autoplay, ...props }, ref) => {
+const PositionalAudio = /* @__PURE__ */ React.forwardRef(({ url, distance = 1, loop = false, autoplay, ...props }, ref) => {
   const sound = React.useRef(null);
   React.useImperativeHandle(ref, () => sound.current, []);
   const camera = useThree(({ camera: camera2 }) => camera2);
@@ -7359,7 +7336,9 @@ const PositionalAudio = /* @__PURE__ */ React.forwardRef(({ url, distance = 1, l
       _sound.setBuffer(Array.isArray(buffer) ? buffer[0] : buffer);
       _sound.setRefDistance(distance);
       _sound.setLoop(loop);
-      if (autoplay && !_sound.isPlaying) _sound.play();
+      if (autoplay && !_sound.isPlaying) {
+        _sound.play();
+      }
     }
   }, [buffer, camera, distance, loop]);
   React.useEffect(() => {
@@ -7428,7 +7407,6 @@ const tempMatrix = /* @__PURE__ */ new THREE.Matrix4();
 const translation = /* @__PURE__ */ new THREE.Vector3();
 const rotation = /* @__PURE__ */ new THREE.Quaternion();
 const scale = /* @__PURE__ */ new THREE.Vector3();
-const isInstancedBufferAttribute = (attr) => attr.isInstancedBufferAttribute;
 const Instance = /* @__PURE__ */ React.forwardRef(({ context, children, ...props }, ref) => {
   React.useMemo(() => extend({ PositionMesh }), []);
   const group = React.useRef(null);
@@ -7448,24 +7426,20 @@ const Instances = /* @__PURE__ */ React.forwardRef(({ context, children, range,
   const parentRef = React.useRef(null);
   React.useImperativeHandle(ref, () => parentRef.current, []);
   const [instances, setInstances] = React.useState([]);
+  const boundsDirty = React.useRef(true);
   const [[matrices, colors]] = React.useState(() => {
     const mArray = new Float32Array(limit * 16);
     for (let i = 0; i < limit; i++) tempMatrix.identity().toArray(mArray, i * 16);
     return [mArray, new Float32Array([...new Array(limit * 3)].map(() => 1))];
   });
   React.useEffect(() => {
-    parentRef.current.instanceMatrix.needsUpdate = true;
+    if (parentRef.current) parentRef.current.instanceMatrix.needsUpdate = true;
   });
   let iterations = 0;
   let count = 0;
-  const attributes = React.useRef([]);
-  React.useLayoutEffect(() => {
-    attributes.current = Object.entries(parentRef.current.geometry.attributes).filter(
-      ([_name, value]) => isInstancedBufferAttribute(value)
-    );
-  });
   useFrame(() => {
     if (frames === Infinity || iterations < frames) {
+      if (!parentRef.current) return;
       parentRef.current.updateMatrix();
       parentRef.current.updateMatrixWorld();
       parentMatrix.copy(parentRef.current.matrixWorld).invert();
@@ -7486,13 +7460,22 @@ const Instances = /* @__PURE__ */ React.forwardRef(({ context, children, range,
       }
       iterations++;
     }
+    if (boundsDirty.current && (frames === Infinity || iterations === frames)) {
+      boundsDirty.current = false;
+      if (parentRef.current.boundingBox) parentRef.current.computeBoundingBox();
+      if (parentRef.current.boundingSphere) parentRef.current.computeBoundingSphere();
+    }
   });
   const api = React.useMemo(
     () => ({
       getParent: () => parentRef,
       subscribe: (ref2) => {
         setInstances((instances2) => [...instances2, ref2]);
-        return () => setInstances((instances2) => instances2.filter((item) => item.current !== ref2.current));
+        boundsDirty.current = true;
+        return () => {
+          setInstances((instances2) => instances2.filter((item) => item.current !== ref2.current));
+          boundsDirty.current = true;
+        };
       }
     }),
     []
@@ -7517,10 +7500,23 @@ const Merged = /* @__PURE__ */ React.forwardRef(function Merged2({ meshes, child
   if (!isArray) {
     for (const key of Object.keys(meshes)) if (!meshes[key].isMesh) delete meshes[key];
   }
-  const render = (args) => isArray ? children(...args) : children(
-    Object.keys(meshes).filter((key) => meshes[key].isMesh).reduce((acc, key, i) => ({ ...acc, [key]: args[i] }), {})
-  );
-  const components = (isArray ? meshes : Object.values(meshes)).map(({ geometry, material }) => /* @__PURE__ */ React.createElement(Instances, { key: geometry.uuid, geometry, material, ...props }));
+  const render = (args) => {
+    if (isArray) {
+      return children(
+        ...args
+      );
+    }
+    const instanceMap = {};
+    const keys = Object.keys(meshes).filter((key) => meshes[key].isMesh);
+    keys.forEach((key, i) => {
+      instanceMap[key] = args[i];
+    });
+    return children(instanceMap);
+  };
+  const components = (isArray ? meshes : Object.values(meshes)).map((mesh) => {
+    const { geometry, material } = mesh;
+    return /* @__PURE__ */ React.createElement(Instances, { key: geometry.uuid, geometry, material, ...props });
+  });
   return /* @__PURE__ */ React.createElement("group", { ref }, renderRecursive(render, components));
 });
 function renderRecursive(render, components, results = []) {
@@ -7546,7 +7542,7 @@ function createInstances() {
   ];
 }
 const InstancedAttribute = React.forwardRef(
-  ({ name, defaultValue, normalized, usage = THREE.DynamicDrawUsage }, fref) => {
+  ({ name, defaultValue, normalized, usage = THREE.DynamicDrawUsage, type = "float" }, fref) => {
     const ref = React.useRef(null);
     React.useImperativeHandle(fref, () => ref.current, []);
     React.useLayoutEffect(() => {
@@ -7554,7 +7550,26 @@ const InstancedAttribute = React.forwardRef(
       parent.geometry.attributes[name] = ref.current;
       const value = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
       const array = Array.from({ length: parent.userData.limit }, () => value).flat();
-      ref.current.array = new Float32Array(array);
+      switch (type) {
+        case "float":
+          ref.current.array = new Float32Array(array);
+          break;
+        case "int":
+          ref.current.array = new Int32Array(array);
+          break;
+        case "uint":
+          ref.current.array = new Uint32Array(array);
+          break;
+        case "short":
+          ref.current.array = new Int16Array(array);
+          break;
+        case "ushort":
+          ref.current.array = new Uint16Array(array);
+          break;
+        case "byte":
+          ref.current.array = new Uint8Array(array);
+          break;
+      }
       ref.current.itemSize = value.length;
       ref.current.count = array.length / ref.current.itemSize;
       return () => {
@@ -8575,12 +8590,13 @@ function Sampler({ children, weight, transform, instances, mesh, count = 16, ...
   return /* @__PURE__ */ React.createElement("group", { ref: group, ...props }, children);
 }
 
+const pathStyle = (path) => path.userData?.style;
 const Svg = /* @__PURE__ */ forwardRef(
   function R3FSvg({ src, skipFill, skipStrokes, fillMaterial, strokeMaterial, fillMeshProps, strokeMeshProps, ...props }, ref) {
     const svg = useLoader(SVGLoader, !src.startsWith("<svg") ? src : `data:image/svg+xml;utf8,${src}`);
     const strokeGeometries = useMemo(
       () => skipStrokes ? [] : svg.paths.map(
-        (path) => path.userData?.style.stroke === void 0 || path.userData.style.stroke === "none" ? null : path.subPaths.map((subPath) => SVGLoader.pointsToStroke(subPath.getPoints(), path.userData.style))
+        (path) => pathStyle(path)?.stroke === void 0 || pathStyle(path).stroke === "none" ? null : path.subPaths.map((subPath) => SVGLoader.pointsToStroke(subPath.getPoints(), pathStyle(path)))
       ),
       [svg, skipStrokes]
     );
@@ -8588,21 +8604,21 @@ const Svg = /* @__PURE__ */ forwardRef(
       return () => strokeGeometries.forEach((group) => group && group.map((g) => g.dispose()));
     }, [strokeGeometries]);
     let renderOrder = 0;
-    return /* @__PURE__ */ React.createElement("object3D", { ref, ...props }, /* @__PURE__ */ React.createElement("object3D", { scale: [1, -1, 1] }, svg.paths.map((path, p) => /* @__PURE__ */ React.createElement(Fragment, { key: p }, !skipFill && path.userData?.style.fill !== void 0 && path.userData.style.fill !== "none" && SVGLoader.createShapes(path).map((shape, s) => /* @__PURE__ */ React.createElement("mesh", { key: s, ...fillMeshProps, renderOrder: renderOrder++ }, /* @__PURE__ */ React.createElement("shapeGeometry", { args: [shape] }), /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("object3D", { ref, ...props }, /* @__PURE__ */ React.createElement("object3D", { scale: [1, -1, 1] }, svg.paths.map((path, p) => /* @__PURE__ */ React.createElement(Fragment, { key: p }, !skipFill && pathStyle(path)?.fill !== void 0 && pathStyle(path).fill !== "none" && SVGLoader.createShapes(path).map((shape, s) => /* @__PURE__ */ React.createElement("mesh", { key: s, ...fillMeshProps, renderOrder: renderOrder++ }, /* @__PURE__ */ React.createElement("shapeGeometry", { args: [shape] }), /* @__PURE__ */ React.createElement(
       "meshBasicMaterial",
       {
-        color: path.userData.style.fill,
-        opacity: path.userData.style.fillOpacity,
+        color: pathStyle(path).fill,
+        opacity: pathStyle(path).fillOpacity,
         transparent: true,
         side: DoubleSide,
         depthWrite: false,
         ...fillMaterial
       }
-    ))), !skipStrokes && path.userData?.style.stroke !== void 0 && path.userData.style.stroke !== "none" && path.subPaths.map((_subPath, s) => /* @__PURE__ */ React.createElement("mesh", { key: s, geometry: strokeGeometries[p][s], ...strokeMeshProps, renderOrder: renderOrder++ }, /* @__PURE__ */ React.createElement(
+    ))), !skipStrokes && pathStyle(path)?.stroke !== void 0 && pathStyle(path).stroke !== "none" && path.subPaths.map((_subPath, s) => /* @__PURE__ */ React.createElement("mesh", { key: s, geometry: strokeGeometries[p][s], ...strokeMeshProps, renderOrder: renderOrder++ }, /* @__PURE__ */ React.createElement(
       "meshBasicMaterial",
       {
-        color: path.userData.style.stroke,
-        opacity: path.userData.style.strokeOpacity,
+        color: pathStyle(path).stroke,
+        opacity: pathStyle(path).strokeOpacity,
         transparent: true,
         side: DoubleSide,
         depthWrite: false,
@@ -8825,8 +8841,8 @@ function useVideoTexture(srcOrSrcObject, {
       });
       if (src && IS_BROWSER && src.endsWith(".m3u8")) {
         const hls = hlsRef.current = await getHls(hlsConfig);
-        if (hls) {
-          hls.on(Events.MEDIA_ATTACHED, () => void hls.loadSource(src));
+        if (hls && _HLSModule) {
+          hls.on(_HLSModule.Events.MEDIA_ATTACHED, () => void hls.loadSource(src));
           hls.attachMedia(video2);
         }
       }
@@ -9046,9 +9062,125 @@ function Fbx({
   return /* @__PURE__ */ React.createElement(Clone, { ...props, object });
 }
 
+const SERVICE_KEY = "__drei_ktx2_service__";
+const DEFAULT_TRANSCODER_PATH = "https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/basis/";
+class KTX2LoaderServiceImpl {
+  loader = null;
+  renderer = null;
+  _isReady = false;
+  transcoderPath = DEFAULT_TRANSCODER_PATH;
+  pendingCallbacks = [];
+  /**
+   * Get or create the singleton KTX2Loader instance.
+   * The loader is created lazily on first access.
+   */
+  getLoader() {
+    if (!this.loader) {
+      this.loader = new KTX2Loader();
+      this.loader.setTranscoderPath(this.transcoderPath);
+    }
+    return this.loader;
+  }
+  /**
+   * Register a renderer and call detectSupport.
+   * Should be called from within React context (useLayoutEffect).
+   * Flushes any queued callbacks.
+   */
+  registerRenderer(renderer) {
+    if (this._isReady && this.renderer === renderer) {
+      return;
+    }
+    this.renderer = renderer;
+    const loader = this.getLoader();
+    loader.detectSupport(renderer);
+    this._isReady = true;
+    this.flushPendingCallbacks();
+  }
+  /**
+   * Check if the service is ready (has renderer registered).
+   */
+  isReady() {
+    return this._isReady;
+  }
+  /**
+   * Get the registered renderer, if any.
+   */
+  getRenderer() {
+    return this.renderer;
+  }
+  /**
+   * Register a callback to run when renderer becomes available.
+   * If renderer is already available, runs immediately.
+   */
+  onReady(callback) {
+    if (this._isReady) {
+      callback();
+    } else {
+      this.pendingCallbacks.push(callback);
+    }
+  }
+  /**
+   * Process all pending callbacks.
+   */
+  flushPendingCallbacks() {
+    const callbacks = this.pendingCallbacks;
+    this.pendingCallbacks = [];
+    for (const callback of callbacks) {
+      try {
+        callback();
+      } catch (error) {
+        console.error("KTX2LoaderService: Error in pending callback:", error);
+      }
+    }
+  }
+  /**
+   * Set the transcoder path for basis/ktx2 decoding.
+   */
+  setTranscoderPath(path) {
+    this.transcoderPath = path;
+    if (this.loader) {
+      this.loader.setTranscoderPath(path);
+    }
+  }
+  /**
+   * Get the current transcoder path.
+   */
+  getTranscoderPath() {
+    return this.transcoderPath;
+  }
+  /**
+   * Dispose of the loader and reset state.
+   * Useful for testing or cleanup.
+   */
+  dispose() {
+    if (this.loader) {
+      this.loader.dispose();
+    }
+    const path = this.transcoderPath;
+    this.loader = null;
+    this.renderer = null;
+    this._isReady = false;
+    this.transcoderPath = path;
+    this.pendingCallbacks = [];
+  }
+}
+const KTX2LoaderService = globalThis[SERVICE_KEY] || (globalThis[SERVICE_KEY] = new KTX2LoaderServiceImpl());
+
 let dracoLoader = null;
 let decoderPath = "https://www.gstatic.com/draco/versioned/decoders/1.5.5/";
-function extensions(useDraco = true, useMeshopt = true, extendLoader) {
+let legacyApiWarned = false;
+function isOptionsObject(arg) {
+  return typeof arg === "object" && arg !== null && !Array.isArray(arg);
+}
+function warnLegacyApi() {
+  if (!legacyApiWarned) {
+    legacyApiWarned = true;
+    console.warn(
+      "useGLTF: Boolean arguments are deprecated. Use options object instead:\n  useGLTF(path, { draco: true, meshopt: true, ktx2: true })"
+    );
+  }
+}
+function extensions(useDraco = true, useMeshopt = true, useKTX2 = false, extendLoader, renderer) {
   return (loader) => {
     if (extendLoader) {
       extendLoader(loader);
@@ -9064,31 +9196,110 @@ function extensions(useDraco = true, useMeshopt = true, extendLoader) {
       const decoder = typeof MeshoptDecoder === "function" ? MeshoptDecoder() : MeshoptDecoder;
       loader.setMeshoptDecoder(decoder);
     }
+    if (useKTX2) {
+      const ktx2Loader = KTX2LoaderService.getLoader();
+      if (typeof useKTX2 === "string") {
+        ktx2Loader.setTranscoderPath(useKTX2);
+      }
+      if (renderer) {
+        ktx2Loader.detectSupport(renderer);
+      }
+      loader.setKTX2Loader(ktx2Loader);
+    }
   };
 }
-const useGLTF = (path, useDraco, useMeshopt, extendLoader) => useLoader(GLTFLoader, path, extensions(useDraco, useMeshopt, extendLoader));
-useGLTF.preload = (path, useDraco, useMeshopt, extendLoader) => useLoader.preload(GLTFLoader, path, extensions(useDraco, useMeshopt, extendLoader));
+function useGLTF(path, optionsOrDraco, useMeshoptArg, useKTX2Arg, extendLoaderArg) {
+  let draco = true;
+  let meshopt = true;
+  let ktx2 = false;
+  let extendLoader;
+  if (isOptionsObject(optionsOrDraco)) {
+    draco = optionsOrDraco.draco ?? true;
+    meshopt = optionsOrDraco.meshopt ?? true;
+    ktx2 = optionsOrDraco.ktx2 ?? false;
+    extendLoader = optionsOrDraco.extendLoader;
+  } else if (optionsOrDraco !== void 0) {
+    warnLegacyApi();
+    draco = optionsOrDraco;
+    meshopt = useMeshoptArg ?? true;
+    ktx2 = useKTX2Arg ?? false;
+    extendLoader = extendLoaderArg;
+  }
+  const renderer = useThree((state) => state.renderer);
+  useLayoutEffect(() => {
+    if (ktx2) {
+      KTX2LoaderService.registerRenderer(renderer);
+    }
+  }, [ktx2, renderer]);
+  return useLoader(GLTFLoader, path, extensions(draco, meshopt, ktx2, extendLoader, ktx2 ? renderer : void 0));
+}
+useGLTF.preload = (path, optionsOrDraco, useMeshoptArg, useKTX2Arg, extendLoaderArg) => {
+  let draco = true;
+  let meshopt = true;
+  let ktx2 = false;
+  let extendLoader;
+  if (isOptionsObject(optionsOrDraco)) {
+    draco = optionsOrDraco.draco ?? true;
+    meshopt = optionsOrDraco.meshopt ?? true;
+    ktx2 = optionsOrDraco.ktx2 ?? false;
+    extendLoader = optionsOrDraco.extendLoader;
+  } else if (optionsOrDraco !== void 0) {
+    warnLegacyApi();
+    draco = optionsOrDraco;
+    meshopt = useMeshoptArg ?? true;
+    ktx2 = useKTX2Arg ?? false;
+    extendLoader = extendLoaderArg;
+  }
+  if (ktx2) {
+    KTX2LoaderService.onReady(() => {
+      const renderer = KTX2LoaderService.getRenderer();
+      useLoader.preload(GLTFLoader, path, extensions(draco, meshopt, ktx2, extendLoader, renderer));
+    });
+  } else {
+    useLoader.preload(GLTFLoader, path, extensions(draco, meshopt, false, extendLoader));
+  }
+};
 useGLTF.clear = (path) => useLoader.clear(GLTFLoader, path);
 useGLTF.setDecoderPath = (path) => {
   decoderPath = path;
 };
+useGLTF.setKTX2TranscoderPath = (path) => {
+  KTX2LoaderService.setTranscoderPath(path);
+};
 const Gltf = /* @__PURE__ */ React.forwardRef(
-  ({ src, useDraco, useMeshOpt, extendLoader, ...props }, ref) => {
-    const { scene } = useGLTF(src, useDraco, useMeshOpt, extendLoader);
+  ({ src, useDraco, useMeshOpt, extendLoader, options, ...props }, ref) => {
+    const opts = options ?? {
+      draco: useDraco,
+      meshopt: useMeshOpt,
+      extendLoader
+    };
+    const { scene } = useGLTF(src, opts);
     return /* @__PURE__ */ React.createElement(Clone, { ref, ...props, object: scene });
   }
 );
 
-const cdn = "https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master";
-function useKTX2(input, basisPath = `${cdn}/basis/`) {
+function useKTX2(input, basisPath = true, extendLoader) {
   const renderer = useThree((state) => state.renderer);
+  useLayoutEffect(() => {
+    KTX2LoaderService.registerRenderer(renderer);
+  }, [renderer]);
   const textures = useLoader(KTX2Loader, IsObject(input) ? Object.values(input) : input, (loader) => {
+    if (extendLoader) {
+      extendLoader(loader);
+    }
+    if (basisPath) {
+      const path = typeof basisPath === "string" ? basisPath : KTX2LoaderService.getTranscoderPath();
+      loader.setTranscoderPath(path);
+    }
     loader.detectSupport(renderer);
-    loader.setTranscoderPath(basisPath);
   });
   useEffect(() => {
     const array = Array.isArray(textures) ? textures : [textures];
-    array.forEach((texture) => renderer.initTexture(texture));
+    array.forEach((texture) => {
+      if ("initTexture" in renderer) {
+        renderer.initTexture(texture);
+      }
+    });
   }, [renderer, textures]);
   if (IsObject(input)) {
     const keys = Object.keys(input);
@@ -9099,19 +9310,81 @@ function useKTX2(input, basisPath = `${cdn}/basis/`) {
     return textures;
   }
 }
-useKTX2.preload = (url, basisPath = `${cdn}/basis/`) => useLoader.preload(KTX2Loader, url, (loader) => {
-  loader.setTranscoderPath(basisPath);
-});
+useKTX2.preload = (url, basisPath = true, extendLoader) => {
+  KTX2LoaderService.onReady(() => {
+    const renderer = KTX2LoaderService.getRenderer();
+    useLoader.preload(KTX2Loader, url, (loader) => {
+      if (extendLoader) {
+        extendLoader(loader);
+      }
+      if (basisPath) {
+        const path = typeof basisPath === "string" ? basisPath : KTX2LoaderService.getTranscoderPath();
+        loader.setTranscoderPath(path);
+      }
+      if (renderer) {
+        loader.detectSupport(renderer);
+      }
+    });
+  });
+};
 useKTX2.clear = (input) => useLoader.clear(KTX2Loader, input);
-const Ktx2 = ({
-  children,
-  input,
-  basisPath
-}) => {
-  const texture = useKTX2(input, basisPath);
+useKTX2.setTranscoderPath = (path) => {
+  KTX2LoaderService.setTranscoderPath(path);
+};
+const Ktx2 = ({ children, input, basisPath, extendLoader }) => {
+  const texture = useKTX2(input, basisPath, extendLoader);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children?.(texture));
 };
 
+const useVariants = (model, inVariant) => {
+  const [activeVariant, setActiveVariant] = useState(null);
+  const [materials, setMaterials] = useState([]);
+  useEffect(() => {
+    model.parser.getDependencies("material").then((materials2) => {
+      setMaterials(materials2);
+    });
+  }, [model]);
+  const variants = useMemo(() => {
+    return model.userData.gltfExtensions?.KHR_materials_variants?.variants;
+  }, [model]);
+  const applyVariant = useCallback(
+    (variantIndex) => {
+      model.scene.traverse(async (object) => {
+        if (!("isMesh" in object) || !object.userData.gltfExtensions) return;
+        const meshObject = object;
+        const meshVariantDef = meshObject.userData.gltfExtensions.KHR_materials_variants;
+        if (!meshVariantDef) return;
+        if (!meshObject.userData.originalMaterial) meshObject.userData.originalMaterial = meshObject.material;
+        const mapping = meshVariantDef.mappings.find((mapping2) => mapping2.variants.includes(variantIndex));
+        if (mapping) {
+          meshObject.material = await model.parser.getDependency("material", mapping.material);
+          model.parser.assignFinalMaterial(meshObject);
+        } else meshObject.material = meshObject.userData.originalMaterial;
+        if (Array.isArray(meshObject.material)) for (const mat of meshObject.material) mat.needsUpdate = true;
+        else meshObject.material.needsUpdate = true;
+      });
+    },
+    [model]
+  );
+  const setVariant = useCallback(
+    (variantName) => {
+      if (!variants) return;
+      const newVariant = variantName && variants.some((v) => v.name === variantName) ? variantName : null;
+      setActiveVariant(newVariant);
+    },
+    [variants]
+  );
+  useEffect(() => {
+    if (!variants) return;
+    const variantIndex = variants.findIndex((v) => v.name === activeVariant);
+    applyVariant(variantIndex > -1 ? variantIndex : 0);
+  }, [variants, activeVariant, applyVariant]);
+  useEffect(() => {
+    setVariant(inVariant ?? null);
+  }, [inVariant, setVariant]);
+  return { variants, activeVariant, setVariant, materials };
+};
+
 const WebcamVideoTexture = /* @__PURE__ */ forwardRef(
   ({
     constraints = {
@@ -9299,6 +9572,7 @@ function useEffectfulState(fn, deps = [], cb) {
 }
 
 function Stats({ showPanel = 0, className, parent }) {
+  React.useEffect(() => void console.warn("drei: <Stats /> is deprecated, use <StatsGl /> instead."), []);
   const stats = useEffectfulState(() => new StatsImpl(), []);
   React.useEffect(() => {
     if (stats) {
@@ -9327,6 +9601,7 @@ const StatsGl = /* @__PURE__ */ React.forwardRef(
       const stats2 = new Stats$1({
         ...props
       });
+      stats2.init(renderer);
       return stats2;
     }, [renderer]);
     React.useImperativeHandle(fref, () => stats.domElement, [stats]);
@@ -9344,7 +9619,7 @@ const StatsGl = /* @__PURE__ */ React.forwardRef(
         return () => {
           if (classNames.length) stats.domElement.classList.remove(...classNames);
           node?.removeChild(stats.domElement);
-          stats.end();
+          stats.dispose();
         };
       }
     }, [parent, stats, className, id, clearStatsGlStyle]);
@@ -9352,7 +9627,7 @@ const StatsGl = /* @__PURE__ */ React.forwardRef(
       () => {
         stats.begin();
       },
-      { before: "render" }
+      { before: "update" }
     );
     useFrame(
       () => {
@@ -9402,11 +9677,11 @@ const RenderCubeTexture = /* @__PURE__ */ React.forwardRef(
         depthBuffer,
         generateMipmaps
       };
-      const fboA2 = new THREE.WebGLCubeRenderTarget(fboSize, settings);
+      const fboA2 = new WebGLCubeRenderTarget(fboSize, settings);
       fboA2.texture.isRenderTargetTexture = !flip;
       fboA2.texture.flipY = true;
       fboA2.texture.type = THREE.HalfFloatType;
-      const fboB2 = new THREE.WebGLCubeRenderTarget(fboSize, settings);
+      const fboB2 = new WebGLCubeRenderTarget(fboSize, settings);
       fboB2.texture.isRenderTargetTexture = !flip;
       fboB2.texture.flipY = true;
       fboB2.texture.type = THREE.HalfFloatType;
@@ -9584,18 +9859,21 @@ function Fisheye({
   const normal = new THREE.Vector3();
   const sph = new THREE.Sphere(new THREE.Vector3(), radius);
   const normalMatrix = new THREE.Matrix3();
-  const compute = React.useCallback((event, state, prev) => {
-    state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
-    state.raycaster.setFromCamera(state.pointer, orthoC);
-    if (!state.raycaster.ray.intersectSphere(sph, normal)) return;
-    else normal.normalize();
-    normalMatrix.getNormalMatrix(cubeApi.current.camera.matrixWorld);
-    cubeApi.current.camera.getWorldPosition(state.raycaster.ray.origin);
-    state.raycaster.ray.direction.set(0, 0, 1).reflect(normal);
-    state.raycaster.ray.direction.x *= -1;
-    state.raycaster.ray.direction.applyNormalMatrix(normalMatrix).multiplyScalar(-1);
-    return void 0;
-  }, []);
+  const compute = React.useCallback(
+    (event, state, prev) => {
+      state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+      state.raycaster.setFromCamera(state.pointer, orthoC);
+      if (!state.raycaster.ray.intersectSphere(sph, normal)) return;
+      else normal.normalize();
+      normalMatrix.getNormalMatrix(cubeApi.current.camera.matrixWorld);
+      cubeApi.current.camera.getWorldPosition(state.raycaster.ray.origin);
+      state.raycaster.ray.direction.set(0, 0, 1).reflect(normal);
+      state.raycaster.ray.direction.x *= -1;
+      state.raycaster.ray.direction.applyNormalMatrix(normalMatrix).multiplyScalar(-1);
+      return void 0;
+    },
+    [width, height]
+  );
   useFrame(
     ({ gl }) => {
       if (renderPriority) gl.render(sphere.current, orthoC);
@@ -9730,14 +10008,23 @@ const isWebGPURenderer = (def) => !!def.isWebGPURenderer;
 const col = /* @__PURE__ */ new THREE.Color();
 const TUNNEL_KEY = "__drei_view_tunnel__";
 const tracked = globalThis[TUNNEL_KEY] || (globalThis[TUNNEL_KEY] = tunnel());
-function computeContainerPosition(canvasSize, trackRect) {
+function computeContainerPosition(canvasSize, trackRect, forceEven) {
   const { right, top: trackTop, left: trackLeft, bottom: trackBottom, width, height } = trackRect;
-  const isOffscreen = trackRect.bottom < 0 || trackTop > canvasSize.height || right < 0 || trackRect.left > canvasSize.width;
   const canvasBottom = canvasSize.top + canvasSize.height;
-  const bottom = canvasBottom - trackBottom;
-  const left = trackLeft - canvasSize.left;
-  const top = trackTop - canvasSize.top;
-  return { position: { width, height, left, top, bottom, right }, isOffscreen };
+  const canvasRight = canvasSize.left + canvasSize.width;
+  const isOffscreen = trackBottom < canvasSize.top || trackTop > canvasBottom || right < canvasSize.left || trackLeft > canvasRight;
+  const rawBottom = canvasBottom - trackBottom;
+  const rawLeft = trackLeft - canvasSize.left;
+  const rawTop = trackTop - canvasSize.top;
+  const position = forceEven ? {
+    width: roundEven(width),
+    height: roundEven(height),
+    left: roundEven(rawLeft),
+    top: roundEven(rawTop),
+    bottom: roundEven(rawBottom),
+    right: roundEven(right)
+  } : { width, height, left: rawLeft, top: rawTop, bottom: rawBottom, right };
+  return { position, isOffscreen };
 }
 function prepareSkissor(renderer, camera, {
   left,
@@ -9777,6 +10064,7 @@ function clear(renderer) {
 }
 function Container({ visible = true, canvasSize, scene, index, children, frames, rect, track }) {
   const { scene: portalScene, camera: portalCamera, renderer, get, setEvents } = useThree();
+  const forceEven = useThree((state) => state.internal.forceEven);
   const [isOffscreen, setOffscreen] = React.useState(false);
   const mountedRef = React.useRef(true);
   React.useEffect(() => {
@@ -9794,7 +10082,7 @@ function Container({ visible = true, canvasSize, scene, index, children, frames,
         frameCount++;
       }
       if (rect.current) {
-        const { position, isOffscreen: _isOffscreen } = computeContainerPosition(canvasSize, rect.current);
+        const { position, isOffscreen: _isOffscreen } = computeContainerPosition(canvasSize, rect.current, forceEven);
         if (isOffscreen !== _isOffscreen) setOffscreen(_isOffscreen);
         if (visible && !_isOffscreen && rect.current) {
           const targetScene = children ? portalScene : scene;
@@ -9816,14 +10104,14 @@ function Container({ visible = true, canvasSize, scene, index, children, frames,
   React.useLayoutEffect(() => {
     const curRect = rect.current;
     if (curRect && (!visible || !isOffscreen)) {
-      const { position, isOffscreen: _isOffscreen } = computeContainerPosition(canvasSize, curRect);
+      const { position, isOffscreen: _isOffscreen } = computeContainerPosition(canvasSize, curRect, forceEven);
       if (!_isOffscreen) {
         const autoClear = prepareSkissor(renderer, portalCamera, position);
         clear(renderer);
         finishSkissor(renderer, autoClear);
       }
     }
-  }, [visible, isOffscreen, renderer, portalCamera, canvasSize]);
+  }, [visible, isOffscreen, renderer, portalCamera, canvasSize, forceEven]);
   React.useEffect(() => {
     if (!track) return;
     const curRect = rect.current;
@@ -9831,7 +10119,7 @@ function Container({ visible = true, canvasSize, scene, index, children, frames,
     setEvents({ connected: track.current });
     return () => {
       if (curRect) {
-        const { position, isOffscreen: _isOffscreen } = computeContainerPosition(canvasSize, curRect);
+        const { position, isOffscreen: _isOffscreen } = computeContainerPosition(canvasSize, curRect, forceEven);
         if (!_isOffscreen) {
           const autoClear = prepareSkissor(renderer, portalCamera, position);
           clear(renderer);
@@ -9840,13 +10128,14 @@ function Container({ visible = true, canvasSize, scene, index, children, frames,
       }
       setEvents({ connected: old });
     };
-  }, [track, renderer, portalCamera, canvasSize, get, setEvents]);
+  }, [track, renderer, portalCamera, canvasSize, get, setEvents, forceEven]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children, /* @__PURE__ */ React.createElement("group", { onPointerOver: () => null }));
 }
 const CanvasView = /* @__PURE__ */ React.forwardRef(
   ({ track, visible = true, index = 1, id, style, className, frames = Infinity, children, ...props }, fref) => {
     const rect = React.useRef(null);
     const { size, scene } = useThree();
+    const forceEven = useThree((state) => state.internal.forceEven);
     const [virtualScene] = React.useState(() => new THREE.Scene());
     const [ready, toggle] = React.useReducer(() => true, false);
     const compute = React.useCallback(
@@ -9883,12 +10172,12 @@ const CanvasView = /* @__PURE__ */ React.forwardRef(
       {
         events: { compute, priority: index },
         size: {
-          width: rect.current?.width,
-          height: rect.current?.height,
+          width: forceEven && rect.current?.width ? roundEven(rect.current.width) : rect.current?.width,
+          height: forceEven && rect.current?.height ? roundEven(rect.current.height) : rect.current?.height,
           // @ts-ignore
-          top: rect.current?.top,
+          top: forceEven && rect.current?.top ? roundEven(rect.current.top) : rect.current?.top,
           // @ts-ignore
-          left: rect.current?.left
+          left: forceEven && rect.current?.left ? roundEven(rect.current.left) : rect.current?.left
         }
       }
     ));
@@ -10283,12 +10572,12 @@ useEnvironment.preload = (preloadOptions) => {
     if (extensions) extensions(loader2);
   });
 };
-const clearDefaultOptins = {
+const clearDefaultOptions = {
   files: defaultFiles,
   preset: void 0
 };
 useEnvironment.clear = (clearOptions) => {
-  const options = { ...clearDefaultOptins, ...clearOptions };
+  const options = { ...clearDefaultOptions, ...clearOptions };
   let { files } = options;
   const { preset } = options;
   if (preset) {
@@ -10315,8 +10604,8 @@ function getLoader(extension) {
   return loader;
 }
 
-const isRef = (obj) => obj.current && obj.current.isScene;
-const resolveScene = (scene) => isRef(scene) ? scene.current : scene;
+const isRef$1 = (obj) => obj.current && obj.current.isScene;
+const resolveScene = (scene) => isRef$1(scene) ? scene.current : scene;
 function setEnvProps(background, scene, defaultScene, texture, sceneProps = {}) {
   sceneProps = {
     backgroundBlurriness: 0,
@@ -10982,9 +11271,14 @@ function Select({
     const oldControlsEnabled = controls?.enabled;
     let isDown = false;
     function prepareRay(event, vec) {
-      const { offsetX, offsetY } = event;
+      const canvas = gl.domElement;
+      const rect = canvas.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
       const { width, height } = size;
-      vec.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
+      const normalizedX = x / width * 2 - 1;
+      const normalizedY = -(y / height) * 2 + 1;
+      vec.set(normalizedX, normalizedY, -1);
     }
     function onSelectStart(event) {
       if (controls) controls.enabled = false;
@@ -11102,83 +11396,454 @@ function AsciiRenderer({
   return /* @__PURE__ */ React.createElement(React.Fragment, null);
 }
 
-function BakeShadows() {
-  const gl = useThree((state) => state.gl);
-  useEffect(() => {
-    gl.shadowMap.autoUpdate = false;
-    gl.shadowMap.needsUpdate = true;
-    return () => {
-      gl.shadowMap.autoUpdate = gl.shadowMap.needsUpdate = true;
-    };
-  }, [gl.shadowMap]);
-  return null;
-}
-
-var GradientType = /* @__PURE__ */ ((GradientType2) => {
-  GradientType2["Linear"] = "linear";
-  GradientType2["Radial"] = "radial";
-  return GradientType2;
-})(GradientType || {});
-function GradientTexture({
-  stops,
-  colors,
-  size = 1024,
-  width = 16,
-  type = "linear" /* Linear */,
-  innerCircleRadius = 0,
-  outerCircleRadius = "auto",
-  ...props
-}) {
-  const gl = useThree((state) => state.gl);
-  const canvas = React.useMemo(() => {
-    const canvas2 = document.createElement("canvas");
-    const context = canvas2.getContext("2d");
-    canvas2.width = width;
-    canvas2.height = size;
-    let gradient;
-    if (type === "linear" /* Linear */) {
-      gradient = context.createLinearGradient(0, 0, 0, size);
-    } else {
-      const canvasCenterX = canvas2.width / 2;
-      const canvasCenterY = canvas2.height / 2;
-      const radius = outerCircleRadius !== "auto" ? Math.abs(Number(outerCircleRadius)) : Math.sqrt(canvasCenterX ** 2 + canvasCenterY ** 2);
-      gradient = context.createRadialGradient(
-        canvasCenterX,
-        canvasCenterY,
-        Math.abs(innerCircleRadius),
-        canvasCenterX,
-        canvasCenterY,
-        radius
-      );
-    }
-    const tempColor = new THREE.Color();
-    let i = stops.length;
-    while (i--) {
-      gradient.addColorStop(stops[i], tempColor.set(colors[i]).getStyle());
-    }
-    context.save();
-    context.fillStyle = gradient;
-    context.fillRect(0, 0, width, size);
-    context.restore();
-    return canvas2;
-  }, [stops]);
-  return /* @__PURE__ */ React.createElement("canvasTexture", { colorSpace: gl.outputColorSpace, args: [canvas], attach: "map", ...props });
-}
-
-const ImageMaterialImpl = /* @__PURE__ */ shaderMaterial(
-  {
-    color: /* @__PURE__ */ new THREE.Color("white"),
-    scale: /* @__PURE__ */ new THREE.Vector2(1, 1),
-    imageBounds: /* @__PURE__ */ new THREE.Vector2(1, 1),
-    resolution: 1024,
-    map: null,
-    zoom: 1,
-    radius: 0,
-    grayscale: 0,
-    opacity: 1
+const WireframeMaterialShaders = {
+  uniforms: {
+    strokeOpacity: 1,
+    fillOpacity: 0.25,
+    fillMix: 0,
+    thickness: 0.05,
+    colorBackfaces: false,
+    dashInvert: true,
+    dash: false,
+    dashRepeats: 4,
+    dashLength: 0.5,
+    squeeze: false,
+    squeezeMin: 0.2,
+    squeezeMax: 1,
+    stroke: /* @__PURE__ */ new THREE.Color("#ff0000"),
+    backfaceStroke: /* @__PURE__ */ new THREE.Color("#0000ff"),
+    fill: /* @__PURE__ */ new THREE.Color("#00ff00")
   },
-  /* glsl */
-  `
+  vertex: (
+    /* glsl */
+    `
+	  attribute vec3 barycentric;
+	
+		varying vec3 v_edges_Barycentric;
+		varying vec3 v_edges_Position;
+
+		void initWireframe() {
+			v_edges_Barycentric = barycentric;
+			v_edges_Position = position.xyz;
+		}
+	  `
+  ),
+  fragment: (
+    /* glsl */
+    `
+		#ifndef PI
+	  	#define PI 3.1415926535897932384626433832795
+		#endif
+  
+	  varying vec3 v_edges_Barycentric;
+	  varying vec3 v_edges_Position;
+  
+	  uniform float strokeOpacity;
+	  uniform float fillOpacity;
+	  uniform float fillMix;
+	  uniform float thickness;
+	  uniform bool colorBackfaces;
+  
+	  // Dash
+	  uniform bool dashInvert;
+	  uniform bool dash;
+	  uniform bool dashOnly;
+	  uniform float dashRepeats;
+	  uniform float dashLength;
+  
+	  // Squeeze
+	  uniform bool squeeze;
+	  uniform float squeezeMin;
+	  uniform float squeezeMax;
+  
+	  // Colors
+	  uniform vec3 stroke;
+	  uniform vec3 backfaceStroke;
+	  uniform vec3 fill;
+  
+	  // This is like
+	  float wireframe_aastep(float threshold, float dist) {
+		  float afwidth = fwidth(dist) * 0.5;
+		  return smoothstep(threshold - afwidth, threshold + afwidth, dist);
+	  }
+  
+	  float wireframe_map(float value, float min1, float max1, float min2, float max2) {
+		  return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
+	  }
+  
+	  float getWireframe() {
+			vec3 barycentric = v_edges_Barycentric;
+		
+			// Distance from center of each triangle to its edges.
+			float d = min(min(barycentric.x, barycentric.y), barycentric.z);
+
+			// for dashed rendering, we can use this to get the 0 .. 1 value of the line length
+			float positionAlong = max(barycentric.x, barycentric.y);
+			if (barycentric.y < barycentric.x && barycentric.y < barycentric.z) {
+				positionAlong = 1.0 - positionAlong;
+			}
+
+			// the thickness of the stroke
+			float computedThickness = wireframe_map(thickness, 0.0, 1.0, 0.0, 0.34);
+
+			// if we want to shrink the thickness toward the center of the line segment
+			if (squeeze) {
+				computedThickness *= mix(squeezeMin, squeezeMax, (1.0 - sin(positionAlong * PI)));
+			}
+
+			// Create dash pattern
+			if (dash) {
+				// here we offset the stroke position depending on whether it
+				// should overlap or not
+				float offset = 1.0 / dashRepeats * dashLength / 2.0;
+				if (!dashInvert) {
+					offset += 1.0 / dashRepeats / 2.0;
+				}
+
+				// if we should animate the dash or not
+				// if (dashAnimate) {
+				// 	offset += time * 0.22;
+				// }
+
+				// create the repeating dash pattern
+				float pattern = fract((positionAlong + offset) * dashRepeats);
+				computedThickness *= 1.0 - wireframe_aastep(dashLength, pattern);
+			}
+
+			// compute the anti-aliased stroke edge  
+			float edge = 1.0 - wireframe_aastep(computedThickness, d);
+
+			return edge;
+	  }
+	  `
+  )
+};
+const WireframeMaterial = /* @__PURE__ */ shaderMaterial(
+  WireframeMaterialShaders.uniforms,
+  WireframeMaterialShaders.vertex + /* glsl */
+  `
+  	void main() {
+		initWireframe();
+		gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+	}
+  `,
+  WireframeMaterialShaders.fragment + /* glsl */
+  `
+  void main () {
+		// Compute color
+
+		float edge = getWireframe();
+		vec4 colorStroke = vec4(stroke, edge);
+
+		#ifdef FLIP_SIDED
+			colorStroke.rgb = backfaceStroke;
+		#endif
+    
+		vec4 colorFill = vec4(fill, fillOpacity);
+		vec4 outColor = mix(colorFill, colorStroke, edge * strokeOpacity);
+
+		gl_FragColor = outColor;
+	}
+  `
+);
+function setWireframeOverride(material, uniforms) {
+  material.onBeforeCompile = (shader) => {
+    shader.uniforms = {
+      ...shader.uniforms,
+      ...uniforms
+    };
+    shader.vertexShader = shader.vertexShader.replace(
+      "void main() {",
+      `
+		  ${WireframeMaterialShaders.vertex}
+		  void main() {
+			initWireframe();
+		`
+    );
+    shader.fragmentShader = shader.fragmentShader.replace(
+      "void main() {",
+      `
+		  ${WireframeMaterialShaders.fragment}
+		  void main() {
+		`
+    );
+    shader.fragmentShader = shader.fragmentShader.replace(
+      "#include <color_fragment>",
+      /* glsl */
+      `
+		  #include <color_fragment>
+			  float edge = getWireframe();
+		  vec4 colorStroke = vec4(stroke, edge);
+		  #ifdef FLIP_SIDED
+			colorStroke.rgb = backfaceStroke;
+		  #endif
+		  vec4 colorFill = vec4(mix(diffuseColor.rgb, fill, fillMix), mix(diffuseColor.a, fillOpacity, fillMix));
+		  vec4 outColor = mix(colorFill, colorStroke, edge * strokeOpacity);
+
+		  diffuseColor.rgb = outColor.rgb;
+		  diffuseColor.a *= outColor.a;
+		`
+    );
+  };
+  material.side = THREE.DoubleSide;
+  material.transparent = true;
+}
+function useWireframeUniforms(uniforms, props) {
+  React.useEffect(
+    () => void (uniforms.fillOpacity.value = props.fillOpacity ?? uniforms.fillOpacity.value),
+    [props.fillOpacity]
+  );
+  React.useEffect(() => void (uniforms.fillMix.value = props.fillMix ?? uniforms.fillMix.value), [props.fillMix]);
+  React.useEffect(
+    () => void (uniforms.strokeOpacity.value = props.strokeOpacity ?? uniforms.strokeOpacity.value),
+    [props.strokeOpacity]
+  );
+  React.useEffect(
+    () => void (uniforms.thickness.value = props.thickness ?? uniforms.thickness.value),
+    [props.thickness]
+  );
+  React.useEffect(() => void (uniforms.colorBackfaces.value = !!props.colorBackfaces), [props.colorBackfaces]);
+  React.useEffect(() => void (uniforms.dash.value = !!props.dash), [props.dash]);
+  React.useEffect(() => void (uniforms.dashInvert.value = !!props.dashInvert), [props.dashInvert]);
+  React.useEffect(
+    () => void (uniforms.dashRepeats.value = props.dashRepeats ?? uniforms.dashRepeats.value),
+    [props.dashRepeats]
+  );
+  React.useEffect(
+    () => void (uniforms.dashLength.value = props.dashLength ?? uniforms.dashLength.value),
+    [props.dashLength]
+  );
+  React.useEffect(() => void (uniforms.squeeze.value = !!props.squeeze), [props.squeeze]);
+  React.useEffect(
+    () => void (uniforms.squeezeMin.value = props.squeezeMin ?? uniforms.squeezeMin.value),
+    [props.squeezeMin]
+  );
+  React.useEffect(
+    () => void (uniforms.squeezeMax.value = props.squeezeMax ?? uniforms.squeezeMax.value),
+    [props.squeezeMax]
+  );
+  React.useEffect(
+    () => void (uniforms.stroke.value = props.stroke ? new THREE.Color(props.stroke) : uniforms.stroke.value),
+    [props.stroke]
+  );
+  React.useEffect(
+    () => void (uniforms.fill.value = props.fill ? new THREE.Color(props.fill) : uniforms.fill.value),
+    [props.fill]
+  );
+  React.useEffect(
+    () => void (uniforms.backfaceStroke.value = props.backfaceStroke ? new THREE.Color(props.backfaceStroke) : uniforms.backfaceStroke.value),
+    [props.backfaceStroke]
+  );
+}
+
+function isWithGeometry(object) {
+  return !!object?.geometry;
+}
+function isGeometry(object) {
+  return !!object?.isBufferGeometry;
+}
+function isRefObject(object) {
+  return !!object?.current;
+}
+function isRef(object) {
+  return object?.current !== void 0;
+}
+function isWireframeGeometry(geometry) {
+  return geometry.type === "WireframeGeometry";
+}
+function getUniforms() {
+  const u = {};
+  for (const key in WireframeMaterialShaders.uniforms) {
+    u[key] = { value: WireframeMaterialShaders.uniforms[key] };
+  }
+  return u;
+}
+function getBarycentricCoordinates(geometry, removeEdge) {
+  const position = geometry.getAttribute("position");
+  const count = position.count;
+  const barycentric = [];
+  for (let i = 0; i < count; i++) {
+    const even = i % 2 === 0;
+    const Q = removeEdge ? 1 : 0;
+    if (even) {
+      barycentric.push(0, 0, 1, 0, 1, 0, 1, 0, Q);
+    } else {
+      barycentric.push(0, 1, 0, 0, 0, 1, 1, 0, Q);
+    }
+  }
+  return new THREE.BufferAttribute(Float32Array.from(barycentric), 3);
+}
+function getInputGeometry(inputGeometry) {
+  const geo = isRefObject(inputGeometry) ? inputGeometry.current : inputGeometry;
+  if (!isGeometry(geo)) {
+    if (isWireframeGeometry(geo)) {
+      throw new Error("Wireframe: WireframeGeometry is not supported.");
+    }
+    const parent = geo.parent;
+    if (isWithGeometry(parent)) {
+      if (isWireframeGeometry(parent.geometry)) {
+        throw new Error("Wireframe: WireframeGeometry is not supported.");
+      }
+      return parent.geometry;
+    }
+  } else {
+    return geo;
+  }
+}
+function setBarycentricCoordinates(geometry, simplify) {
+  if (geometry.index) {
+    console.warn("Wireframe: Requires non-indexed geometry, converting to non-indexed geometry.");
+    const nonIndexedGeo = geometry.toNonIndexed();
+    geometry.copy(nonIndexedGeo);
+    geometry.setIndex(null);
+  }
+  const newBarycentric = getBarycentricCoordinates(geometry, simplify);
+  geometry.setAttribute("barycentric", newBarycentric);
+}
+function WireframeWithCustomGeo({
+  geometry: customGeometry,
+  simplify = false,
+  ...props
+}) {
+  extend({ MeshWireframeMaterial: WireframeMaterial });
+  const [geometry, setGeometry] = React.useState(null);
+  React.useLayoutEffect(() => {
+    const geom = getInputGeometry(customGeometry);
+    if (!geom) {
+      throw new Error("Wireframe: geometry prop must be a BufferGeometry or a ref to a BufferGeometry.");
+    }
+    setBarycentricCoordinates(geom, simplify);
+    if (isRef(customGeometry)) {
+      setGeometry(geom);
+    }
+  }, [simplify, customGeometry]);
+  const drawnGeo = isRef(customGeometry) ? geometry : customGeometry;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, drawnGeo && /* @__PURE__ */ React.createElement("mesh", { geometry: drawnGeo }, /* @__PURE__ */ React.createElement(
+    "meshWireframeMaterial",
+    {
+      attach: "material",
+      transparent: true,
+      side: THREE.DoubleSide,
+      polygonOffset: true,
+      polygonOffsetFactor: -4,
+      ...props
+    }
+  )));
+}
+function WireframeWithoutCustomGeo({
+  simplify = false,
+  ...props
+}) {
+  const objectRef = React.useRef(null);
+  const uniforms = React.useMemo(() => getUniforms(), [WireframeMaterialShaders.uniforms]);
+  useWireframeUniforms(uniforms, props);
+  React.useLayoutEffect(() => {
+    const geom = getInputGeometry(objectRef);
+    if (!geom) {
+      throw new Error("Wireframe: Must be a child of a Mesh, Line or Points object or specify a geometry prop.");
+    }
+    const og = geom.clone();
+    setBarycentricCoordinates(geom, simplify);
+    return () => {
+      geom.copy(og);
+      og.dispose();
+    };
+  }, [simplify]);
+  React.useLayoutEffect(() => {
+    const parentMesh = objectRef.current.parent;
+    const og = parentMesh.material.clone();
+    setWireframeOverride(parentMesh.material, uniforms);
+    return () => {
+      parentMesh.material.dispose();
+      parentMesh.material = og;
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement("object3D", { ref: objectRef });
+}
+function Wireframe({ geometry: customGeometry, ...props }) {
+  if (customGeometry) {
+    return /* @__PURE__ */ React.createElement(WireframeWithCustomGeo, { geometry: customGeometry, ...props });
+  }
+  return /* @__PURE__ */ React.createElement(WireframeWithoutCustomGeo, { ...props });
+}
+
+function BakeShadows() {
+  const gl = useThree((state) => state.gl);
+  useEffect(() => {
+    gl.shadowMap.autoUpdate = false;
+    gl.shadowMap.needsUpdate = true;
+    return () => {
+      gl.shadowMap.autoUpdate = gl.shadowMap.needsUpdate = true;
+    };
+  }, [gl.shadowMap]);
+  return null;
+}
+
+var GradientType = /* @__PURE__ */ ((GradientType2) => {
+  GradientType2["Linear"] = "linear";
+  GradientType2["Radial"] = "radial";
+  return GradientType2;
+})(GradientType || {});
+function GradientTexture({
+  stops,
+  colors,
+  size = 1024,
+  width = 16,
+  type = "linear" /* Linear */,
+  innerCircleRadius = 0,
+  outerCircleRadius = "auto",
+  ...props
+}) {
+  const gl = useThree((state) => state.gl);
+  const canvas = React.useMemo(() => {
+    const canvas2 = document.createElement("canvas");
+    const context = canvas2.getContext("2d");
+    canvas2.width = width;
+    canvas2.height = size;
+    let gradient;
+    if (type === "linear" /* Linear */) {
+      gradient = context.createLinearGradient(0, 0, 0, size);
+    } else {
+      const canvasCenterX = canvas2.width / 2;
+      const canvasCenterY = canvas2.height / 2;
+      const radius = outerCircleRadius !== "auto" ? Math.abs(Number(outerCircleRadius)) : Math.sqrt(canvasCenterX ** 2 + canvasCenterY ** 2);
+      gradient = context.createRadialGradient(
+        canvasCenterX,
+        canvasCenterY,
+        Math.abs(innerCircleRadius),
+        canvasCenterX,
+        canvasCenterY,
+        radius
+      );
+    }
+    const tempColor = new THREE.Color();
+    let i = stops.length;
+    while (i--) {
+      gradient.addColorStop(stops[i], tempColor.set(colors[i]).getStyle());
+    }
+    context.save();
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, width, size);
+    context.restore();
+    return canvas2;
+  }, [stops]);
+  return /* @__PURE__ */ React.createElement("canvasTexture", { colorSpace: gl.outputColorSpace, args: [canvas], attach: "map", ...props });
+}
+
+const ImageMaterialImpl = /* @__PURE__ */ shaderMaterial(
+  {
+    color: /* @__PURE__ */ new THREE.Color("white"),
+    scale: /* @__PURE__ */ new THREE.Vector2(1, 1),
+    imageBounds: /* @__PURE__ */ new THREE.Vector2(1, 1),
+    resolution: 1024,
+    map: null,
+    zoom: 1,
+    radius: 0,
+    grayscale: 0,
+    opacity: 1
+  },
+  /* glsl */
+  `
   varying vec2 vUv;
   varying vec2 vPos;
   void main() {
@@ -11347,8 +12012,8 @@ vec3 highPassRandRGB(vec2 uv) {
 
 
 vec2 vogelDiskSample(int sampleIndex, int sampleCount, float angle) {
-  const float goldenAngle = 2.399963f; // radians
-  float r = sqrt(float(sampleIndex) + 0.5f) / sqrt(float(sampleCount));
+  float goldenAngle = 2.399963;
+  float r = sqrt(float(sampleIndex) + 0.5) / sqrt(float(sampleCount));
   float theta = float(sampleIndex) * goldenAngle + angle;
   float sine = sin(theta);
   float cosine = cos(theta);
@@ -11369,7 +12034,7 @@ float findBlocker(sampler2D shadowMap, vec2 uv, float compare, float angle) {
   #pragma unroll_loop_start
   for(int i = 0; i < ${samples}; i ++) {
     offset = (vogelDiskSample(j, ${samples}, angle) * texelSize) * 2.0 * PENUMBRA_FILTER_SIZE;
-    depth = unpackRGBAToDepth( texture2D( shadowMap, uv + offset));
+    depth = texture2D( shadowMap, uv + offset ).r;
     if (depth < compare) {
       blockerDepthSum += depth;
       blockers++;
@@ -11387,7 +12052,7 @@ float findBlocker(sampler2D shadowMap, vec2 uv, float compare, float angle) {
         
 float vogelFilter(sampler2D shadowMap, vec2 uv, float zReceiver, float filterRadius, float angle) {
   float texelSize = 1.0 / float(textureSize(shadowMap, 0).x);
-  float shadow = 0.0f;
+  float shadow = 0.0;
   int j = 0;
   vec2 vogelSample = vec2(0.0);
   vec2 offset = vec2(0.0);
@@ -11395,7 +12060,7 @@ float vogelFilter(sampler2D shadowMap, vec2 uv, float zReceiver, float filterRad
   for (int i = 0; i < ${samples}; i++) {
     vogelSample = vogelDiskSample(j, ${samples}, angle) * texelSize;
     offset = vogelSample * (1.0 + filterRadius * float(${size}));
-    shadow += step( zReceiver, unpackRGBAToDepth( texture2D( shadowMap, uv + offset ) ) );
+    shadow += step( zReceiver, texture2D( shadowMap, uv + offset ).r );
     j++;
   }
   #pragma unroll_loop_end
@@ -11404,7 +12069,7 @@ float vogelFilter(sampler2D shadowMap, vec2 uv, float zReceiver, float filterRad
 
 float PCSS (sampler2D shadowMap, vec4 coords) {
   vec2 uv = coords.xy;
-  float zReceiver = coords.z; // Assumed to be eye-space z in this code
+  float zReceiver = coords.z;
   float angle = highPassRandRGB(gl_FragCoord.xy).r * PI2;
   float avgBlockerDepth = findBlocker(shadowMap, uv, zReceiver, angle);
   if (avgBlockerDepth == -1.0) {
@@ -11428,14 +12093,27 @@ function SoftShadows({ focus = 0, samples = 10, size = 25 }) {
   const scene = useThree((state) => state.scene);
   const camera = useThree((state) => state.camera);
   React.useEffect(() => {
-    const original = THREE.ShaderChunk.shadowmap_pars_fragment;
-    THREE.ShaderChunk.shadowmap_pars_fragment = THREE.ShaderChunk.shadowmap_pars_fragment.replace("#ifdef USE_SHADOWMAP", "#ifdef USE_SHADOWMAP\n" + pcss({ size, samples, focus })).replace(
-      "#if defined( SHADOWMAP_TYPE_PCF )",
-      "\nreturn PCSS(shadowMap, shadowCoord);\n#if defined( SHADOWMAP_TYPE_PCF )"
-    );
+    const originalShader = THREE.ShaderChunk.shadowmap_pars_fragment;
+    const originalShadowMapType = gl.shadowMap.type;
+    gl.shadowMap.type = THREE.BasicShadowMap;
+    let shader = THREE.ShaderChunk.shadowmap_pars_fragment;
+    shader = shader.replace("#ifdef USE_SHADOWMAP", "#ifdef USE_SHADOWMAP\n" + pcss({ size, samples, focus }));
+    const basicIfBlockRegex = /if\s*\(\s*frustumTest\s*\)\s*\{\s*float\s+depth\s*=\s*texture2D\s*\(\s*shadowMap\s*,\s*shadowCoord\.xy\s*\)\.r;\s*#ifdef\s+USE_REVERSED_DEPTH_BUFFER\s*shadow\s*=\s*step\s*\(\s*depth\s*,\s*shadowCoord\.z\s*\)\s*;\s*#else\s*shadow\s*=\s*step\s*\(\s*shadowCoord\.z\s*,\s*depth\s*\)\s*;\s*#endif\s*\}/;
+    if (basicIfBlockRegex.test(shader)) {
+      shader = shader.replace(
+        basicIfBlockRegex,
+        `if ( frustumTest ) {
+				shadow = PCSS( shadowMap, shadowCoord );
+			}`
+      );
+    } else {
+      console.warn("[SoftShadows] Could not find injection point in shader!");
+    }
+    THREE.ShaderChunk.shadowmap_pars_fragment = shader;
     reset(gl, scene, camera);
     return () => {
-      THREE.ShaderChunk.shadowmap_pars_fragment = original;
+      THREE.ShaderChunk.shadowmap_pars_fragment = originalShader;
+      gl.shadowMap.type = originalShadowMapType;
       reset(gl, scene, camera);
     };
   }, [focus, size, samples]);
@@ -11541,6 +12219,60 @@ class SpotLightMaterial extends THREE.ShaderMaterial {
   }
 }
 
+const HtmlMaterial = ({ transform }) => {
+  const shaders = useMemo(
+    () => ({
+      vertexShader: !transform ? (
+        /* glsl */
+        `
+            /*
+              This shader is from the THREE's SpriteMaterial.
+              We need to turn the backing plane into a Sprite
+              (make it always face the camera) if "transform"
+              is false.
+            */
+            #include <common>
+
+            void main() {
+              vec2 center = vec2(0., 1.);
+              float rotation = 0.0;
+
+              // This is somewhat arbitrary, but it seems to work well
+              // Need to figure out how to derive this dynamically if it even matters
+              float size = 0.03;
+
+              vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
+              vec2 scale;
+              scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );
+              scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );
+
+              bool isPerspective = isPerspectiveMatrix( projectionMatrix );
+              if ( isPerspective ) scale *= - mvPosition.z;
+
+              vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;
+              vec2 rotatedPosition;
+              rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;
+              rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;
+              mvPosition.xy += rotatedPosition;
+
+              gl_Position = projectionMatrix * mvPosition;
+            }
+        `
+      ) : void 0,
+      fragmentShader: (
+        /* glsl */
+        `
+          void main() {
+            gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+          }
+        `
+      )
+    }),
+    [transform]
+  );
+  return /* @__PURE__ */ React.createElement("shaderMaterial", { side: DoubleSide, vertexShader: shaders.vertexShader, fragmentShader: shaders.fragmentShader });
+};
+
 class StarfieldMaterial extends ShaderMaterial {
   constructor() {
     super({
@@ -11615,8 +12347,8 @@ class SparklesMaterial extends ShaderMaterial {
           modelPosition.z += cos(time * speed + modelPosition.x * noise.y * 100.0) * 0.2;
           modelPosition.x += cos(time * speed + modelPosition.x * noise.z * 100.0) * 0.2;
           vec4 viewPosition = viewMatrix * modelPosition;
-          vec4 projectionPostion = projectionMatrix * viewPosition;
-          gl_Position = projectionPostion;
+          vec4 projectionPosition = projectionMatrix * viewPosition;
+          gl_Position = projectionPosition;
           gl_PointSize = size * 25. * pixelRatio;
           gl_PointSize *= (1.0 / - viewPosition.z);
           vColor = color;
@@ -11631,8 +12363,9 @@ class SparklesMaterial extends ShaderMaterial {
         varying float vOpacity;
         void main() {
           float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
-          float strength = 0.05 / distanceToCenter - 0.1;
+          float strength = clamp(0.05 / distanceToCenter - 0.1, 0.0, 1.0);
           gl_FragColor = vec4(vColor, strength * vOpacity);
+          // Note: tonemapping may shift hue (e.g. orange \u2192 yellow) compared to the WebGPU version
           #include <tonemapping_fragment>
           #include <${version >= 154 ? "colorspace_fragment" : "encodings_fragment"}>
         }
@@ -12322,4 +13055,4 @@ const Text = /* @__PURE__ */ React.forwardRef(
   }
 );
 
-export { AccumulativeShadows, AdaptiveDpr, AdaptiveEvents, ArcballControls, AsciiRenderer, BBAnchor, Backdrop, BakeShadows, Billboard, BlurPass, Bounds, Box, CameraShake, Capsule, CatmullRomLine, Caustics, Center, Circle, Clone, Cloud, CloudInstance, CloudMaterial, Clouds, ComputedAttribute, Cone, ContactShadows, ConvolutionMaterial, CubeCamera, CubeTexture, CubicBezierLine, CurveModifier, CycleRaycast, Cylinder, Decal, Detailed, DetectGPU, DeviceOrientationControls, DiscardMaterial, Dodecahedron, DragControls, Edges, Effects, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, Example, Extrude, Fbo, Fbx, FirstPersonControls, Fisheye, Float, FlyControls, GizmoHelper, GizmoViewcube, GizmoViewport, Gltf, GradientTexture, GradientType, Grid, Helper, Html, Hud, Icosahedron, Image, Instance, InstancedAttribute, Instances, IsObject, KeyboardControls, Ktx2, Lathe, Lightformer, Line, Loader, MapControls, Mask, MatcapTexture, Merged, MeshDiscardMaterial, MeshDistortMaterial, MeshPortalMaterial, MeshReflectorMaterial, MeshRefractionMaterial, MeshTransmissionMaterial, MeshWobbleMaterial, MotionPathControls, NormalTexture, Octahedron, OrbitControls, OrthographicCamera, Outlines, PerformanceMonitor, PerspectiveCamera, PivotControls, Plane, Point, PointMaterial, PointMaterialImpl, PointerLockControls, Points, PointsBuffer, Polyhedron, PositionMesh, PositionPoint, PositionalAudio, Preload, PresentationControls, Progress, QuadraticBezierLine, RandomizedLight, RenderCubeTexture, RenderTexture, Resize, Ring, RoundedBox, RoundedBoxGeometry, Sampler, ScreenQuad, ScreenSizer, ScreenSpace, ScreenVideoTexture, Scroll, ScrollControls, Segment, SegmentObject, Segments, Select, Shadow, Shape, Sky, SoftShadows, Sparkles, SparklesMaterial, Sphere, SpotLight, SpotLightMaterial, SpotLightShadow, SpriteAnimator, Stage, StarfieldMaterial, Stars, Stats, StatsGl, Svg, Tetrahedron, Text, Text3D, Texture, Torus, TorusKnot, TrackballControls, Trail, TrailTexture, TransformControls, Tube, VideoTexture, View, WebcamVideoTexture, Wireframe, WireframeMaterial, WireframeMaterialShaders, accumulativeContext, calcPosFromAngles, checkIfFrameIsEmpty, createInstances, getFirstFrame, isWebGL2Available, meshBounds, presetsObj, setWireframeOverride, shaderMaterial, useAnimations, useAspect, useBounds, useBoxProjectedEnv, useContextBridge, useCubeCamera, useCubeTexture, useCursor, useCustomRaycast, useDepthBuffer, useDetectGPU, useEnvironment, useFBO, useFBX, useFont, useGLTF, useGizmoContext, useHelper, useIntersect, useKTX2, useKeyboardControls, useMask, useMatcapTexture, useMotion, useNormalTexture, usePerformanceMonitor, useProgress, useScroll, useSelect, useSpriteAnimator, useSpriteLoader, useSurfaceSampler, useTexture, useTrail, useTrailTexture, useVideoTexture, useWireframeUniforms };
+export { AccumulativeShadows, AdaptiveDpr, AdaptiveEvents, ArcballControls, AsciiRenderer, BBAnchor, Backdrop, BakeShadows, Billboard, BlurPass, Bounds, Box, CameraShake, Capsule, CatmullRomLine, Caustics, Center, Circle, Clone, Cloud, CloudInstance, CloudMaterial, Clouds, ComputedAttribute, Cone, ContactShadows, ConvolutionMaterial, CubeCamera, CubeTexture, CubicBezierLine, CurveModifier, CycleRaycast, Cylinder, Decal, Detailed, DetectGPU, DeviceOrientationControls, DiscardMaterial, Dodecahedron, DragControls, Edges, Effects, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, Example, Extrude, Fbo, Fbx, FirstPersonControls, Fisheye, Float, FlyControls, GizmoHelper, GizmoViewcube, GizmoViewport, Gltf, GradientTexture, GradientType, Grid, Helper, Html, HtmlMaterial, Hud, Icosahedron, Image, Instance, InstancedAttribute, Instances, IsObject, KeyboardControls, Ktx2, Lathe, Lightformer, Line, Loader, MapControls, Mask, MatcapTexture, Merged, MeshDiscardMaterial, MeshDistortMaterial, MeshPortalMaterial, MeshReflectorMaterial, MeshRefractionMaterial, MeshTransmissionMaterial, MeshWobbleMaterial, MotionPathControls, NormalTexture, Octahedron, OrbitControls, OrthographicCamera, Outlines, PerformanceMonitor, PerspectiveCamera, PivotControls, Plane, Point, PointMaterial, PointMaterialImpl, PointerLockControls, Points, PointsBuffer, Polyhedron, PositionMesh, PositionPoint, PositionalAudio, Preload, PresentationControls, Progress, QuadraticBezierLine, RandomizedLight, RenderCubeTexture, RenderTexture, Resize, Ring, RoundedBox, RoundedBoxGeometry, Sampler, ScreenQuad, ScreenSizer, ScreenSpace, ScreenVideoTexture, Scroll, ScrollControls, Segment, SegmentObject, Segments, Select, Shadow, Shape, Sky, SoftShadows, Sparkles, SparklesMaterial, Sphere, SpotLight, SpotLightMaterial, SpotLightShadow, SpriteAnimator, Stage, StarfieldMaterial, Stars, Stats, StatsGl, Svg, Tetrahedron, Text, Text3D, Texture, Torus, TorusKnot, TrackballControls, Trail, TrailTexture, TransformControls, Tube, VideoTexture, View, WebcamVideoTexture, Wireframe, WireframeMaterial, WireframeMaterialShaders, accumulativeContext, calcPosFromAngles, checkIfFrameIsEmpty, createInstances, getFirstFrame, isWebGL2Available, meshBounds, presetsObj, setWireframeOverride, shaderMaterial, useAnimations, useAspect, useBounds, useBoxProjectedEnv, useContextBridge, useCubeCamera, useCubeTexture, useCursor, useCustomRaycast, useDepthBuffer, useDetectGPU, useEnvironment, useFBO, useFBX, useFont, useGLTF, useGizmoContext, useHelper, useIntersect, useKTX2, useKeyboardControls, useMask, useMatcapTexture, useMotion, useNormalTexture, usePerformanceMonitor, useProgress, useScroll, useSelect, useSpriteAnimator, useSpriteLoader, useSurfaceSampler, useTexture, useTrail, useTrailTexture, useVariants, useVideoTexture, useWireframeUniforms };