@almadar/ui 5.143.0 → 5.145.0

package/dist/lib/drawable/three/index.js

@@ -2,7 +2,7 @@ import React3, { createContext, forwardRef, useRef, useState, useMemo, useEffect
 import { EventBusContext, useTraitScopeChain } from '@almadar/ui/providers';
 import { createLogger } from '@almadar/logger';
 import { Canvas, useThree, useFrame } from '@react-three/fiber';
-import * as THREE11 from 'three';
+import * as THREE5 from 'three';
 import { Vector3, QuadraticBezierCurve3, MathUtils, Quaternion } from 'three';
 import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
 import { Grid, OrbitControls, Billboard, Text, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
@@ -507,7 +507,7 @@ function Lighting3D({
       "directionalLightHelper",
       {
         args: [
-          new THREE11.DirectionalLight(directionalColor, directionalIntensity),
+          new THREE5.DirectionalLight(directionalColor, directionalIntensity),
           5
         ]
       }
@@ -564,8 +564,8 @@ function FollowCamera3D({
   offset
 }) {
   const { camera } = useThree();
-  const look = useRef(new THREE11.Vector3(target[0], target[1], target[2]));
-  const goal = useRef(new THREE11.Vector3());
+  const look = useRef(new THREE5.Vector3(target[0], target[1], target[2]));
+  const goal = useRef(new THREE5.Vector3());
   useFrame((_, delta) => {
     const t = Math.min(1, delta * 5);
     goal.current.set(target[0] + offset[0], target[1] + offset[1], target[2] + offset[2]);
@@ -765,6 +765,10 @@ var atlasCache = /* @__PURE__ */ new Map();
 function isTilesheet(a) {
   return typeof a.tileWidth === "number";
 }
+function isSpriteSheetAtlas(a) {
+  const s = a;
+  return typeof s.frameWidth === "number" && typeof s.frameHeight === "number" && typeof s.animations === "object";
+}
 function getAtlas(url, onReady) {
   if (atlasCache.has(url)) return atlasCache.get(url) ?? void 0;
   atlasCache.set(url, void 0);
@@ -801,6 +805,7 @@ function subRectFor(atlas, sprite) {
       sh: atlas.tileHeight
     };
   }
+  if (isSpriteSheetAtlas(atlas)) return null;
   const st = atlas.subTextures[sprite];
   if (!st) return null;
   return { sx: st.x, sy: st.y, sw: st.width, sh: st.height };
@@ -894,12 +899,12 @@ function ModelLoader({
     if (!loadedModel) return null;
     const cloned = clone(loadedModel);
     cloned.updateMatrixWorld(true);
-    const tintColor = tint ? new THREE11.Color(tint) : null;
+    const tintColor = tint ? new THREE5.Color(tint) : null;
     cloned.traverse((child) => {
-      if (child instanceof THREE11.Mesh) {
+      if (child instanceof THREE5.Mesh) {
         child.castShadow = castShadow;
         child.receiveShadow = receiveShadow;
-        if (tintColor && child.material instanceof THREE11.MeshStandardMaterial) {
+        if (tintColor && child.material instanceof THREE5.MeshStandardMaterial) {
           const mat = child.material.clone();
           mat.color.multiply(tintColor);
           child.material = mat;
@@ -908,7 +913,7 @@ function ModelLoader({
     });
     return cloned;
   }, [loadedModel, castShadow, receiveShadow, tint]);
-  const mixer = useMemo(() => model ? new THREE11.AnimationMixer(model) : null, [model]);
+  const mixer = useMemo(() => model ? new THREE5.AnimationMixer(model) : null, [model]);
   useEffect(() => {
     if (!mixer || !animation || clips.length === 0) return;
     const wanted = animation.toLowerCase();
@@ -925,8 +930,8 @@ function ModelLoader({
   });
   const normFactor = useMemo(() => {
     if (!model) return 1;
-    const box = new THREE11.Box3().setFromObject(model);
-    const size = new THREE11.Vector3();
+    const box = new THREE5.Box3().setFromObject(model);
+    const size = new THREE5.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
     if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
@@ -1016,7 +1021,7 @@ var warnUnsupported3d = (kind) => {
   warnedUnsupported.add(kind);
   mesh3dLog.warn("unsupported drawable kind on the 3D backend \u2014 skipped", { kind });
 };
-var CrossOriginTextureLoader = class extends THREE11.TextureLoader {
+var CrossOriginTextureLoader = class extends THREE5.TextureLoader {
   constructor() {
     super();
     this.crossOrigin = "anonymous";
@@ -1034,7 +1039,7 @@ function useBillboardTexture(url) {
       url,
       (texture) => {
         if (!active) return;
-        texture.colorSpace = THREE11.SRGBColorSpace;
+        texture.colorSpace = THREE5.SRGBColorSpace;
         setState({ texture, error: false });
       },
       void 0,
@@ -1087,7 +1092,7 @@ function SpriteBillboard({ node, world, cellSize = 1, groupOpacity = 1 }) {
   }, [texture, frame, node.height, node.width, anchor, cellSize]);
   const groundGeometry = React3.useMemo(() => {
     if (anchor !== "top-left" || !texture || !atlasReady) return null;
-    const g = new THREE11.PlaneGeometry(size.width, size.height);
+    const g = new THREE5.PlaneGeometry(size.width, size.height);
     g.rotateX(-Math.PI / 2);
     return g;
   }, [anchor, texture, atlasReady, size.width, size.height]);
@@ -1095,15 +1100,15 @@ function SpriteBillboard({ node, world, cellSize = 1, groupOpacity = 1 }) {
     if (anchor === "top-left") {
       return /* @__PURE__ */ jsx("group", { position: [world[0] + size.width / 2, 0.02, world[2] + size.height / 2], children: /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], children: [
         /* @__PURE__ */ jsx("planeGeometry", { args: [size.width, size.height] }),
-        /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE11.DoubleSide })
+        /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE5.DoubleSide })
       ] }) });
     }
     return /* @__PURE__ */ jsx("group", { position: [world[0], world[1] + size.height / 2, world[2]], children: /* @__PURE__ */ jsxs("mesh", { children: [
       /* @__PURE__ */ jsx("planeGeometry", { args: [size.width, size.height] }),
-      /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE11.DoubleSide })
+      /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE5.DoubleSide })
     ] }) });
   }
-  texture.magFilter = texture.minFilter = THREE11.NearestFilter;
+  texture.magFilter = texture.minFilter = THREE5.NearestFilter;
   texture.needsUpdate = true;
   if (frame) {
     texture.repeat.set(frame.w / size.imgW, frame.h / size.imgH);
@@ -1116,7 +1121,7 @@ function SpriteBillboard({ node, world, cellSize = 1, groupOpacity = 1 }) {
         map: texture,
         transparent: true,
         alphaTest: 0.1,
-        side: THREE11.DoubleSide,
+        side: THREE5.DoubleSide,
         opacity: (node.opacity ?? 1) * groupOpacity
       }
     ) }) });
@@ -1129,7 +1134,7 @@ function SpriteBillboard({ node, world, cellSize = 1, groupOpacity = 1 }) {
         map: texture,
         transparent: true,
         alphaTest: 0.1,
-        side: THREE11.DoubleSide,
+        side: THREE5.DoubleSide,
         opacity: node.opacity ?? 1
       }
     )
@@ -1198,7 +1203,7 @@ function Shape3D({ node, projector, groupOpacity = 1 }) {
     }
     case "poly": {
       if (!node.points || node.points.length === 0) return null;
-      const s = new THREE11.Shape();
+      const s = new THREE5.Shape();
       node.points.forEach((p, i) => {
         if (i === 0) s.moveTo(p.x, p.y);
         else s.lineTo(p.x, p.y);
@@ -1216,7 +1221,7 @@ function Shape3D({ node, projector, groupOpacity = 1 }) {
   }
   return /* @__PURE__ */ jsx("group", { ref: groupRef, position: [world[0], world[1] + 0.02, world[2]], children: /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], children: [
     geometry,
-    /* @__PURE__ */ jsx("meshBasicMaterial", { ref: materialRef, color, transparent: true, opacity: (node.opacity ?? 1) * groupOpacity, side: THREE11.DoubleSide })
+    /* @__PURE__ */ jsx("meshBasicMaterial", { ref: materialRef, color, transparent: true, opacity: (node.opacity ?? 1) * groupOpacity, side: THREE5.DoubleSide })
   ] }) });
 }
 function Text3D({ node, projector, groupOpacity = 1 }) {
@@ -1238,6 +1243,18 @@ function Text3D({ node, projector, groupOpacity = 1 }) {
   ) });
 }
 var GROUND_ROTATION = [-Math.PI / 2, 0, 0];
+var textureCache = /* @__PURE__ */ new Map();
+function getMeshTexture(url) {
+  const cached = textureCache.get(url);
+  if (cached) return cached;
+  const texture = new THREE5.TextureLoader().load(url);
+  texture.flipY = false;
+  texture.colorSpace = THREE5.SRGBColorSpace;
+  texture.wrapS = THREE5.RepeatWrapping;
+  texture.wrapT = THREE5.RepeatWrapping;
+  textureCache.set(url, texture);
+  return texture;
+}
 function polyhedronGeometry(node, cellSize) {
   const verts = node.vertices;
   const faces = node.faces;
@@ -1258,8 +1275,16 @@ function polyhedronGeometry(node, cellSize) {
     index.push(a, c, b);
   }
   if (index.length === 0) return null;
-  const geometry = new THREE11.BufferGeometry();
-  geometry.setAttribute("position", new THREE11.BufferAttribute(positions, 3));
+  const geometry = new THREE5.BufferGeometry();
+  geometry.setAttribute("position", new THREE5.BufferAttribute(positions, 3));
+  if (node.uvs && node.uvs.length === verts.length) {
+    const uv = new Float32Array(verts.length * 2);
+    for (let i = 0; i < verts.length; i++) {
+      uv[i * 2] = node.uvs[i][0];
+      uv[i * 2 + 1] = node.uvs[i][1];
+    }
+    geometry.setAttribute("uv", new THREE5.BufferAttribute(uv, 2));
+  }
   geometry.setIndex(index);
   geometry.computeVertexNormals();
   const skin = node.skin;
@@ -1272,8 +1297,8 @@ function polyhedronGeometry(node, cellSize) {
         skinWeight[i * 4 + k] = skin.weights[i][k] ?? 0;
       }
     }
-    geometry.setAttribute("skinIndex", new THREE11.BufferAttribute(skinIndex, 4));
-    geometry.setAttribute("skinWeight", new THREE11.BufferAttribute(skinWeight, 4));
+    geometry.setAttribute("skinIndex", new THREE5.BufferAttribute(skinIndex, 4));
+    geometry.setAttribute("skinWeight", new THREE5.BufferAttribute(skinWeight, 4));
   }
   const size = Math.max(bounds.max[0] - bounds.min[0], bounds.max[1] - bounds.min[1], bounds.max[2] - bounds.min[2]) * cellSize;
   return { geometry, lift: -bounds.min[2] * cellSize, size };
@@ -1315,9 +1340,9 @@ function meshGeometry(node, cellSize) {
 }
 var warnedPolyhedronOutline = false;
 var SIDE_MAP = {
-  front: THREE11.FrontSide,
-  back: THREE11.BackSide,
-  double: THREE11.DoubleSide
+  front: THREE5.FrontSide,
+  back: THREE5.BackSide,
+  double: THREE5.DoubleSide
 };
 function meshMaterial(mat, opacity, ref) {
   const m = mat ?? {};
@@ -1326,7 +1351,8 @@ function meshMaterial(mat, opacity, ref) {
     color: m.color ?? "#ffffff",
     transparent: opacity < 1,
     opacity,
-    side: SIDE_MAP[m.side ?? "front"]
+    side: SIDE_MAP[m.side ?? "front"],
+    ...m.map ? { map: getMeshTexture(m.map) } : {}
   };
   const emissive = m.emissive ? { emissive: m.emissive, emissiveIntensity: m.emissiveIntensity ?? 1 } : {};
   switch (m.kind ?? "standard") {
@@ -1384,13 +1410,13 @@ function SkinnedPolyhedron3D({
     if (mesh.skeleton && mesh.skeleton.bones.length === bones.length && mesh.skeleton.bones.every((b, i) => b === bones[i])) return;
     if (skin.inverseBindMatrices.length !== bones.length) return;
     const inverses = skin.inverseBindMatrices.map((m) => {
-      const mat = new THREE11.Matrix4().fromArray(m);
+      const mat = new THREE5.Matrix4().fromArray(m);
       mat.elements[12] *= cellSize;
       mat.elements[13] *= cellSize;
       mat.elements[14] *= cellSize;
       return mat;
     });
-    mesh.bind(new THREE11.Skeleton(bones, inverses), new THREE11.Matrix4());
+    mesh.bind(new THREE5.Skeleton(bones, inverses), new THREE5.Matrix4());
   }, [registryTick, skin, boneStore, geometry, cellSize]);
   useEffect(() => {
     const mesh = meshRef.current;
@@ -1497,7 +1523,7 @@ function Mesh3D({
         "meshBasicMaterial",
         {
           color: node.outline.color ?? "#101014",
-          side: THREE11.BackSide,
+          side: THREE5.BackSide,
           transparent: opacity < 1,
           opacity
         }
@@ -1543,7 +1569,7 @@ function Group3D({
   const parentStore = useContext(BoneRegistryContext);
   const scopedStore = useMemo(() => node.skeleton ? new BoneStore() : null, [node.skeleton]);
   const boneStore = scopedStore ?? parentStore;
-  const boneObject = useMemo(() => node.bone ? new THREE11.Bone() : null, [node.bone]);
+  const boneObject = useMemo(() => node.bone ? new THREE5.Bone() : null, [node.bone]);
   useEffect(() => {
     if (!node.bone || !boneStore || !boneObject) return;
     return boneStore.register(node.bone, boneObject);
@@ -1583,10 +1609,26 @@ function cn(...inputs) {
 }
 var DEFAULT_GRID_CONFIG = {
   cellSize: 1};
+function CameraPose({
+  position,
+  fov,
+  controls
+}) {
+  const camera = useThree((s) => s.camera);
+  useEffect(() => {
+    camera.position.set(position[0], position[1], position[2]);
+    if (camera.isPerspectiveCamera) {
+      camera.fov = fov;
+      camera.updateProjectionMatrix();
+    }
+    controls.current?.update();
+  }, [camera, position, fov, controls]);
+  return null;
+}
 function RoomEnvironment3D() {
   const { gl, scene } = useThree(({ gl: gl2, scene: scene2 }) => ({ gl: gl2, scene: scene2 }));
   useEffect(() => {
-    const pmremGenerator = new THREE11.PMREMGenerator(gl);
+    const pmremGenerator = new THREE5.PMREMGenerator(gl);
     const envTexture = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
     scene.environment = envTexture;
     return () => {
@@ -1622,6 +1664,7 @@ var Canvas3DHost = forwardRef(
     keyUpMap,
     pixelsPerUnit,
     fov,
+    azimuth,
     lighting,
     post,
     children,
@@ -1715,7 +1758,7 @@ var Canvas3DHost = forwardRef(
       getCameraPosition: () => {
         if (controlsRef.current) {
           const pos = controlsRef.current.object.position;
-          return new THREE11.Vector3(pos.x, pos.y, pos.z);
+          return new THREE5.Vector3(pos.x, pos.y, pos.z);
         }
         return null;
       },
@@ -1755,20 +1798,28 @@ var Canvas3DHost = forwardRef(
       const cz = cameraTarget[2];
       const d = size * 1;
       const fovDeg = fov ?? 45;
-      switch (cameraMode) {
-        case "isometric":
-          return { position: [cx + d, d * 0.8, cz + d], fov: fovDeg };
-        case "top-down":
-          return { position: [cx, d * 2, cz + d * 0.35], fov: fovDeg };
-        case "front":
-          return { position: [cx, d * 0.32, cz + d * 1.15], fov: fovDeg };
-        case "follow":
-          return { position: [cx, d * 0.5, cz + d], fov: fovDeg };
-        case "perspective":
-        default:
-          return { position: [cx + d, d, cz + d], fov: fovDeg };
-      }
-    }, [cameraMode, gridBounds, cellSize, cameraTarget, fov]);
+      const base = (() => {
+        switch (cameraMode) {
+          case "isometric":
+            return { position: [cx + d, d * 0.8, cz + d], fov: fovDeg };
+          case "top-down":
+            return { position: [cx, d * 2, cz + d * 0.35], fov: fovDeg };
+          case "front":
+            return { position: [cx, d * 0.32, cz + d * 1.15], fov: fovDeg };
+          case "follow":
+            return { position: [cx, d * 0.5, cz + d], fov: fovDeg };
+          case "perspective":
+          default:
+            return { position: [cx + d, d, cz + d], fov: fovDeg };
+        }
+      })();
+      if (!azimuth) return base;
+      const ox = base.position[0] - cx;
+      const oz = base.position[2] - cz;
+      const c = Math.cos(azimuth);
+      const s = Math.sin(azimuth);
+      return { position: [cx + ox * c - oz * s, base.position[1], cz + ox * s + oz * c], fov: base.fov };
+    }, [cameraMode, gridBounds, cellSize, cameraTarget, fov, azimuth]);
     const followWorld = useMemo(() => {
       if (followTarget) return drawableProjector.toWorld(followTarget);
       return cameraTarget;
@@ -1829,6 +1880,7 @@ var Canvas3DHost = forwardRef(
               {
                 shadows,
                 flat: lighting?.toneMapping === "none",
+                gl: { preserveDrawingBuffer: true },
                 camera: {
                   position: cameraConfig.position,
                   fov: cameraConfig.fov,
@@ -1843,6 +1895,7 @@ var Canvas3DHost = forwardRef(
                 },
                 children: [
                   /* @__PURE__ */ jsx(CameraController3D, { onCameraChange: eventHandlers.handleCameraChange }),
+                  /* @__PURE__ */ jsx(CameraPose, { position: cameraConfig.position, fov: cameraConfig.fov, controls: controlsRef }),
                   (cameraMode === "follow" || cameraMode === "chase") && /* @__PURE__ */ jsx(FollowCamera3D, { target: followWorld, offset: followOffset }),
                   /* @__PURE__ */ jsx(
                     Lighting3D,
@@ -1923,7 +1976,7 @@ var Canvas3DHost = forwardRef(
                       dampingFactor: 0.05,
                       enableZoom: true,
                       enablePan: true,
-                      touches: { ONE: THREE11.TOUCH.ROTATE, TWO: THREE11.TOUCH.DOLLY_PAN },
+                      touches: { ONE: THREE5.TOUCH.ROTATE, TWO: THREE5.TOUCH.DOLLY_PAN },
                       minDistance: 2,
                       maxDistance: 100,
                       maxPolarAngle: Math.PI / 2 - 0.1
@@ -1946,15 +1999,15 @@ function Scene3D({ background = "#1a1a2e", fog, children }) {
     if (initializedRef.current) return;
     initializedRef.current = true;
     if (background.startsWith("#") || background.startsWith("rgb")) {
-      scene.background = new THREE11.Color(background);
+      scene.background = new THREE5.Color(background);
     } else {
-      const loader = new THREE11.TextureLoader();
+      const loader = new THREE5.TextureLoader();
       loader.load(background, (texture) => {
         scene.background = texture;
       });
     }
     if (fog) {
-      scene.fog = new THREE11.Fog(fog.color, fog.near, fog.far);
+      scene.fog = new THREE5.Fog(fog.color, fog.near, fog.far);
     }
     return () => {
       scene.background = null;
@@ -1977,14 +2030,14 @@ var Camera3D = forwardRef(
   }, ref) => {
     const { camera, set, viewport } = useThree();
     const controlsRef = useRef(null);
-    const initialPosition = useRef(new THREE11.Vector3(...position));
-    const initialTarget = useRef(new THREE11.Vector3(...target));
+    const initialPosition = useRef(new THREE5.Vector3(...position));
+    const initialTarget = useRef(new THREE5.Vector3(...target));
     useEffect(() => {
       let newCamera;
       if (mode === "isometric") {
         const aspect = viewport.aspect;
         const size = 10 / zoom;
-        newCamera = new THREE11.OrthographicCamera(
+        newCamera = new THREE5.OrthographicCamera(
           -size * aspect,
           size * aspect,
           size,
@@ -1993,7 +2046,7 @@ var Camera3D = forwardRef(
           1e3
         );
       } else {
-        newCamera = new THREE11.PerspectiveCamera(fov, viewport.aspect, 0.1, 1e3);
+        newCamera = new THREE5.PerspectiveCamera(fov, viewport.aspect, 0.1, 1e3);
       }
       newCamera.position.copy(initialPosition.current);
       newCamera.lookAt(initialTarget.current.x, initialTarget.current.y, initialTarget.current.z);
@@ -2034,8 +2087,8 @@ var Camera3D = forwardRef(
         }
       },
       getViewBounds: () => {
-        const min = new THREE11.Vector3(-10, -10, -10);
-        const max = new THREE11.Vector3(10, 10, 10);
+        const min = new THREE5.Vector3(-10, -10, -10);
+        const max = new THREE5.Vector3(10, 10, 10);
         return { min, max };
       }
     }));
@@ -2077,7 +2130,7 @@ var AssetLoader = class {
     __publicField(this, "textureCache");
     __publicField(this, "loadingPromises");
     this.objLoader = new OBJLoader();
-    this.textureLoader = new THREE11.TextureLoader();
+    this.textureLoader = new THREE5.TextureLoader();
     this.modelCache = /* @__PURE__ */ new Map();
     this.textureCache = /* @__PURE__ */ new Map();
     this.loadingPromises = /* @__PURE__ */ new Map();
@@ -2151,7 +2204,7 @@ var AssetLoader = class {
       return this.loadingPromises.get(`texture:${url}`);
     }
     const loadPromise = this.textureLoader.loadAsync(url).then((texture) => {
-      texture.colorSpace = THREE11.SRGBColorSpace;
+      texture.colorSpace = THREE5.SRGBColorSpace;
       this.textureCache.set(url, texture);
       this.loadingPromises.delete(`texture:${url}`);
       return texture;
@@ -2225,7 +2278,7 @@ var AssetLoader = class {
     });
     this.modelCache.forEach((model) => {
       model.scene.traverse((child) => {
-        if (child instanceof THREE11.Mesh) {
+        if (child instanceof THREE5.Mesh) {
           child.geometry.dispose();
           if (Array.isArray(child.material)) {
             child.material.forEach((m) => m.dispose());
@@ -2275,21 +2328,21 @@ function useThree5(options = {}) {
   const [isReady, setIsReady] = useState(false);
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
   const initialCameraPosition = useMemo(
-    () => new THREE11.Vector3(...opts.cameraPosition),
+    () => new THREE5.Vector3(...opts.cameraPosition),
     []
   );
   useEffect(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const { clientWidth, clientHeight } = container;
-    const scene = new THREE11.Scene();
-    scene.background = new THREE11.Color(opts.backgroundColor);
+    const scene = new THREE5.Scene();
+    scene.background = new THREE5.Color(opts.backgroundColor);
     sceneRef.current = scene;
     let camera;
     const aspect = clientWidth / clientHeight;
     if (opts.cameraMode === "isometric") {
       const size = 10;
-      camera = new THREE11.OrthographicCamera(
+      camera = new THREE5.OrthographicCamera(
         -size * aspect,
         size * aspect,
         size,
@@ -2298,11 +2351,11 @@ function useThree5(options = {}) {
         1e3
       );
     } else {
-      camera = new THREE11.PerspectiveCamera(45, aspect, 0.1, 1e3);
+      camera = new THREE5.PerspectiveCamera(45, aspect, 0.1, 1e3);
     }
     camera.position.copy(initialCameraPosition);
     cameraRef.current = camera;
-    const renderer = new THREE11.WebGLRenderer({
+    const renderer = new THREE5.WebGLRenderer({
       antialias: true,
       alpha: true,
       canvas: canvasRef.current || void 0
@@ -2310,7 +2363,7 @@ function useThree5(options = {}) {
     renderer.setSize(clientWidth, clientHeight);
     renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
     renderer.shadowMap.enabled = opts.shadows;
-    renderer.shadowMap.type = THREE11.PCFSoftShadowMap;
+    renderer.shadowMap.type = THREE5.PCFSoftShadowMap;
     rendererRef.current = renderer;
     const controls = new OrbitControls$1(camera, renderer.domElement);
     controls.enableDamping = true;
@@ -2319,16 +2372,16 @@ function useThree5(options = {}) {
     controls.maxDistance = 100;
     controls.maxPolarAngle = Math.PI / 2 - 0.1;
     controlsRef.current = controls;
-    const ambientLight = new THREE11.AmbientLight(16777215, 0.6);
+    const ambientLight = new THREE5.AmbientLight(16777215, 0.6);
     scene.add(ambientLight);
-    const directionalLight = new THREE11.DirectionalLight(16777215, 0.8);
+    const directionalLight = new THREE5.DirectionalLight(16777215, 0.8);
     directionalLight.position.set(10, 20, 10);
     directionalLight.castShadow = opts.shadows;
     directionalLight.shadow.mapSize.width = 2048;
     directionalLight.shadow.mapSize.height = 2048;
     scene.add(directionalLight);
     if (opts.showGrid) {
-      const gridHelper = new THREE11.GridHelper(
+      const gridHelper = new THREE5.GridHelper(
         opts.gridSize,
         opts.gridSize,
         4473924,
@@ -2346,10 +2399,10 @@ function useThree5(options = {}) {
     const handleResize = () => {
       const { clientWidth: width, clientHeight: height } = container;
       setDimensions({ width, height });
-      if (camera instanceof THREE11.PerspectiveCamera) {
+      if (camera instanceof THREE5.PerspectiveCamera) {
         camera.aspect = width / height;
         camera.updateProjectionMatrix();
-      } else if (camera instanceof THREE11.OrthographicCamera) {
+      } else if (camera instanceof THREE5.OrthographicCamera) {
         const aspect2 = width / height;
         const size = 10;
         camera.left = -size * aspect2;
@@ -2380,7 +2433,7 @@ function useThree5(options = {}) {
     let newCamera;
     if (opts.cameraMode === "isometric") {
       const size = 10;
-      newCamera = new THREE11.OrthographicCamera(
+      newCamera = new THREE5.OrthographicCamera(
         -size * aspect,
         size * aspect,
         size,
@@ -2389,7 +2442,7 @@ function useThree5(options = {}) {
         1e3
       );
     } else {
-      newCamera = new THREE11.PerspectiveCamera(45, aspect, 0.1, 1e3);
+      newCamera = new THREE5.PerspectiveCamera(45, aspect, 0.1, 1e3);
     }
     newCamera.position.copy(currentPos);
     cameraRef.current = newCamera;
@@ -2719,8 +2772,8 @@ function useSceneGraph() {
 }
 function useRaycaster(options) {
   const { camera, canvas, cellSize = 1, offsetX = 0, offsetZ = 0 } = options;
-  const raycaster = useRef(new THREE11.Raycaster());
-  const mouse = useRef(new THREE11.Vector2());
+  const raycaster = useRef(new THREE5.Raycaster());
+  const mouse = useRef(new THREE5.Vector2());
   const clientToNDC = useCallback(
     (clientX, clientY) => {
       if (!canvas) {
@@ -2790,8 +2843,8 @@ function useRaycaster(options) {
       const ndc = clientToNDC(clientX, clientY);
       mouse.current.set(ndc.x, ndc.y);
       raycaster.current.setFromCamera(mouse.current, camera);
-      const plane = new THREE11.Plane(new THREE11.Vector3(0, 1, 0), 0);
-      const target = new THREE11.Vector3();
+      const plane = new THREE5.Plane(new THREE5.Vector3(0, 1, 0), 0);
+      const target = new THREE5.Vector3();
       const intersection = raycaster.current.ray.intersectPlane(plane, target);
       if (intersection) {
         const gridX = Math.round((target.x - offsetX) / cellSize);
@@ -2829,7 +2882,7 @@ function useRaycaster(options) {
         return {
           gridX: gridCoords.x,
           gridZ: gridCoords.z,
-          worldPosition: new THREE11.Vector3(
+          worldPosition: new THREE5.Vector3(
             gridCoords.x * cellSize + offsetX,
             0,
             gridCoords.z * cellSize + offsetZ
@@ -2859,7 +2912,7 @@ var DEFAULT_CONFIG = {
 };
 function gridToWorld(gridX, gridZ, config = DEFAULT_CONFIG) {
   const opts = { ...DEFAULT_CONFIG, ...config };
-  return new THREE11.Vector3(
+  return new THREE5.Vector3(
     gridX * opts.cellSize + opts.offsetX,
     opts.elevation,
     gridZ * opts.cellSize + opts.offsetZ
@@ -2873,17 +2926,17 @@ function worldToGrid(worldX, worldZ, config = DEFAULT_CONFIG) {
   };
 }
 function raycastToPlane(camera, mouseX, mouseY, planeY = 0) {
-  const raycaster = new THREE11.Raycaster();
-  const mouse = new THREE11.Vector2(mouseX, mouseY);
+  const raycaster = new THREE5.Raycaster();
+  const mouse = new THREE5.Vector2(mouseX, mouseY);
   raycaster.setFromCamera(mouse, camera);
-  const plane = new THREE11.Plane(new THREE11.Vector3(0, 1, 0), -planeY);
-  const target = new THREE11.Vector3();
+  const plane = new THREE5.Plane(new THREE5.Vector3(0, 1, 0), -planeY);
+  const target = new THREE5.Vector3();
   const intersection = raycaster.ray.intersectPlane(plane, target);
   return intersection ? target : null;
 }
 function raycastToObjects(camera, mouseX, mouseY, objects) {
-  const raycaster = new THREE11.Raycaster();
-  const mouse = new THREE11.Vector2(mouseX, mouseY);
+  const raycaster = new THREE5.Raycaster();
+  const mouse = new THREE5.Vector2(mouseX, mouseY);
   raycaster.setFromCamera(mouse, camera);
   const intersects = raycaster.intersectObjects(objects, true);
   return intersects.length > 0 ? intersects[0] : null;
@@ -2935,14 +2988,14 @@ function getCellsInRadius(centerX, centerZ, radius) {
   return cells;
 }
 function createGridHighlight(color = 16776960, opacity = 0.3) {
-  const geometry = new THREE11.PlaneGeometry(0.95, 0.95);
-  const material = new THREE11.MeshBasicMaterial({
+  const geometry = new THREE5.PlaneGeometry(0.95, 0.95);
+  const material = new THREE5.MeshBasicMaterial({
     color,
     transparent: true,
     opacity,
-    side: THREE11.DoubleSide
+    side: THREE5.DoubleSide
   });
-  const mesh = new THREE11.Mesh(geometry, material);
+  const mesh = new THREE5.Mesh(geometry, material);
   mesh.rotation.x = -Math.PI / 2;
   mesh.position.y = 0.01;
   return mesh;
@@ -2955,31 +3008,31 @@ function normalizeMouseCoordinates(clientX, clientY, element) {
   };
 }
 function isInFrustum(position, camera, padding = 0) {
-  const frustum = new THREE11.Frustum();
-  const projScreenMatrix = new THREE11.Matrix4();
+  const frustum = new THREE5.Frustum();
+  const projScreenMatrix = new THREE5.Matrix4();
   projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
   frustum.setFromProjectionMatrix(projScreenMatrix);
-  const sphere = new THREE11.Sphere(position, padding);
+  const sphere = new THREE5.Sphere(position, padding);
   return frustum.intersectsSphere(sphere);
 }
 function filterByFrustum(positions, camera, padding = 0) {
-  const frustum = new THREE11.Frustum();
-  const projScreenMatrix = new THREE11.Matrix4();
+  const frustum = new THREE5.Frustum();
+  const projScreenMatrix = new THREE5.Matrix4();
   projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
   frustum.setFromProjectionMatrix(projScreenMatrix);
   return positions.filter((position) => {
-    const sphere = new THREE11.Sphere(position, padding);
+    const sphere = new THREE5.Sphere(position, padding);
     return frustum.intersectsSphere(sphere);
   });
 }
 function getVisibleIndices(positions, camera, padding = 0) {
-  const frustum = new THREE11.Frustum();
-  const projScreenMatrix = new THREE11.Matrix4();
+  const frustum = new THREE5.Frustum();
+  const projScreenMatrix = new THREE5.Matrix4();
   const visible = /* @__PURE__ */ new Set();
   projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
   frustum.setFromProjectionMatrix(projScreenMatrix);
   positions.forEach((position, index) => {
-    const sphere = new THREE11.Sphere(position, padding);
+    const sphere = new THREE5.Sphere(position, padding);
     if (frustum.intersectsSphere(sphere)) {
       visible.add(index);
     }
@@ -3003,7 +3056,7 @@ function updateInstanceLOD(instancedMesh, positions, camera, lodDistances) {
   return lodIndices;
 }
 function cullInstancedMesh(instancedMesh, positions, visibleIndices) {
-  const dummy = new THREE11.Object3D();
+  const dummy = new THREE5.Object3D();
   let visibleCount = 0;
   positions.forEach((position, index) => {
     if (visibleIndices.has(index)) {
@@ -5786,12 +5839,12 @@ function useAvl3DConfig() {
 }
 function CameraController({ targetPosition, targetLookAt, animated }) {
   const { camera } = useThree();
-  const targetPosVec = useRef(new THREE11.Vector3(...targetPosition));
-  const targetLookVec = useRef(new THREE11.Vector3(...targetLookAt));
+  const targetPosVec = useRef(new THREE5.Vector3(...targetPosition));
+  const targetLookVec = useRef(new THREE5.Vector3(...targetLookAt));
   const isAnimating = useRef(false);
   useEffect(() => {
-    const newTarget = new THREE11.Vector3(...targetPosition);
-    const newLookAt = new THREE11.Vector3(...targetLookAt);
+    const newTarget = new THREE5.Vector3(...targetPosition);
+    const newLookAt = new THREE5.Vector3(...targetLookAt);
     if (!newTarget.equals(targetPosVec.current) || !newLookAt.equals(targetLookVec.current)) {
       targetPosVec.current.copy(newTarget);
       targetLookVec.current.copy(newLookAt);
@@ -5806,9 +5859,9 @@ function CameraController({ targetPosition, targetLookAt, animated }) {
   useFrame((_, delta) => {
     if (!isAnimating.current) return;
     const speed = 3;
-    camera.position.x = THREE11.MathUtils.damp(camera.position.x, targetPosVec.current.x, speed, delta);
-    camera.position.y = THREE11.MathUtils.damp(camera.position.y, targetPosVec.current.y, speed, delta);
-    camera.position.z = THREE11.MathUtils.damp(camera.position.z, targetPosVec.current.z, speed, delta);
+    camera.position.x = THREE5.MathUtils.damp(camera.position.x, targetPosVec.current.x, speed, delta);
+    camera.position.y = THREE5.MathUtils.damp(camera.position.y, targetPosVec.current.y, speed, delta);
+    camera.position.z = THREE5.MathUtils.damp(camera.position.z, targetPosVec.current.z, speed, delta);
     camera.lookAt(targetLookVec.current);
     const dist = camera.position.distanceTo(targetPosVec.current);
     if (dist < 0.05) {
@@ -5823,7 +5876,7 @@ function SceneFade({ animating, children }) {
   useFrame((_, delta) => {
     if (!groupRef.current) return;
     const target = animating ? 0 : 1;
-    opacityRef.current = THREE11.MathUtils.damp(opacityRef.current, target, 5, delta);
+    opacityRef.current = THREE5.MathUtils.damp(opacityRef.current, target, 5, delta);
     groupRef.current.visible = opacityRef.current > 0.05;
     const s = 0.9 + opacityRef.current * 0.1;
     groupRef.current.scale.setScalar(s);