@nice2dev/ui-3d 1.3.14 → 1.3.16

package/dist/esm/model/useModelViewer.js

@@ -1,657 +1,629 @@
-import { resolveCssColor, getInputEngine } from '@nice2dev/ui';
-import { useRef, useState, useEffect, useCallback } from 'react';
-import * as THREE from 'three';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
-import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader.js';
-import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
-import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
-import { PLYLoader } from 'three/examples/jsm/loaders/PLYLoader.js';
-import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
-import { useNiceTranslation } from '../core/i18n.js';
-import { createFrameClock, SOFT_SHADOW_MAP } from '../core/threeCompat.js';
-
-/**
- * useModelViewer — lightweight hook for the view-only 3D model viewer.
- *
- * Unlike useModelEditor this hook provides NO editing — just loading,
- * orbit/pan/zoom navigation, optional WASD first-person camera,
- * gamepad support, VR mode, annotations and measurement tools.
- *
- * Designed for ERP real-estate / rental-space visualisation and
- * product presentation.
- */
-/* ═══════════════════════════════════════════
-   Quality presets
-   ═══════════════════════════════════════════ */
+import { resolveCssColor, getInputEngine } from "@nice2dev/ui";
+import { useRef, useState, useEffect, useCallback } from "react";
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { ColladaLoader } from "three/examples/jsm/loaders/ColladaLoader.js";
+import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
+import { PLYLoader } from "three/examples/jsm/loaders/PLYLoader.js";
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
+import { useNiceTranslation } from "../core/i18n.js";
+import { createFrameClock, SOFT_SHADOW_MAP } from "../core/threeCompat.js";
 const QUALITY_MAP = {
-    low: { pixelRatio: 0.75, shadowMapSize: 512, antialias: false },
-    medium: { pixelRatio: 1, shadowMapSize: 1024, antialias: true },
-    high: { pixelRatio: 1, shadowMapSize: 2048, antialias: true },
-    ultra: { pixelRatio: 2, shadowMapSize: 4096, antialias: true },
+  low: { pixelRatio: 0.75, shadowMapSize: 512, antialias: false },
+  medium: { pixelRatio: 1, shadowMapSize: 1024, antialias: true },
+  high: { pixelRatio: 1, shadowMapSize: 2048, antialias: true },
+  ultra: { pixelRatio: 2, shadowMapSize: 4096, antialias: true }
 };
 const TONE_MAP = {
-    linear: THREE.LinearToneMapping,
-    reinhard: THREE.ReinhardToneMapping,
-    cineon: THREE.CineonToneMapping,
-    aces: THREE.ACESFilmicToneMapping,
-    agx: THREE.AgXToneMapping,
+  linear: THREE.LinearToneMapping,
+  reinhard: THREE.ReinhardToneMapping,
+  cineon: THREE.CineonToneMapping,
+  aces: THREE.ACESFilmicToneMapping,
+  agx: THREE.AgXToneMapping
 };
-/* ═══════════════════════════════════════════
-   Hook
-   ═══════════════════════════════════════════ */
 function useModelViewer(props = {}) {
-    var _a;
-    const { t } = useNiceTranslation();
-    const { src, format, navigationMode: initNavMode = 'orbit', quality = 'high', autoRotateSpeed: initAutoRotate = 0, backgroundColor = 'var(--nice-bg, #1a1a2e)', showGrid: initShowGrid = true, shadows = true, gamepad = false, cameraPresets: _cameraPresets = [], annotations: _annotations = [], hotspots: _hotspots = [], floorPlans: _floorPlans = [], onHotspotClick: _onHotspotClick, onAnnotationClick: _onAnnotationClick, onLoadProgress, onLoad, onError, clippingPlanes = [], measureMode: initMeasureMode = false, measurements: _measurements = [], onMeasure: _onMeasure, minDistance = 0.1, maxDistance = 1000, fov = 50, vr: _vr = false, walkSpeed = 5, ambientIntensity = 0.5, directionalIntensity = 0.8, antiAlias = true, toneMapping = 'aces', exposure = 1, } = props;
-    /* ── refs ── */
-    const mountRef = useRef(null);
-    const rendererRef = useRef(null);
-    const sceneRef = useRef(new THREE.Scene());
-    const cameraRef = useRef(new THREE.PerspectiveCamera(fov, 1, 0.01, 10000));
-    const orbitRef = useRef(null);
-    // Created once: useRef's argument runs on every render, and three r183 warns per Clock.
-    const clockRef = useRef(null);
-    (_a = clockRef.current) !== null && _a !== void 0 ? _a : (clockRef.current = createFrameClock());
-    const mixerRef = useRef(null);
-    const rafRef = useRef(0);
-    const rootRef = useRef(null);
-    const gridRef = useRef(null);
-    const clipsRef = useRef([]);
-    const keysRef = useRef(new Set());
-    useRef(null);
-    const disposeRef = useRef(false);
-    /* ── state ── */
-    const [loading, setLoading] = useState(false);
-    const [loadProgress, setLoadProgress] = useState(0);
-    const [error, setError] = useState(null);
-    const [navMode, setNavMode] = useState(initNavMode);
-    const [projection, setProjection] = useState('perspective');
-    const [wireframe, setWireframe] = useState(false);
-    const [gridVisible, setGridVisible] = useState(initShowGrid);
-    const [autoRotate, setAutoRotate] = useState(initAutoRotate);
-    const [polyCount, setPolyCount] = useState(0);
-    const [meshCount, setMeshCount] = useState(0);
-    const [animNames, setAnimNames] = useState([]);
-    const [activeAnimIdx, setActiveAnimIdx] = useState(-1);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [animTime, setAnimTime] = useState(0);
-    const [animDuration, setAnimDuration] = useState(0);
-    const [animSpeed, setAnimSpeed] = useState(1);
-    const [isFullscreen, setIsFullscreen] = useState(false);
-    const [activeFloorPlanId, setActiveFloorPlanId] = useState(null);
-    const [annotationsVisible, setAnnotationsVisible] = useState(true);
-    const [clippingEnabled, setClippingEnabled] = useState(clippingPlanes.length > 0);
-    const [clippingPosition, setClippingPosition] = useState(0);
-    const [clippingAxis, setClippingAxis] = useState('y');
-    const [measureModeActive, setMeasureModeActive] = useState(initMeasureMode);
-    const [dimensions, setDimensions] = useState(null);
-    const [statusText, setStatusText] = useState('Ready');
-    /* ── scene setup ── */
-    useEffect(() => {
-        var _a;
-        const mount = mountRef.current;
-        if (!mount) {
-            return;
-        }
-        disposeRef.current = false;
-        const q = QUALITY_MAP[quality];
-        const renderer = new THREE.WebGLRenderer({
-            antialias: q.antialias && antiAlias,
-            alpha: backgroundColor === 'transparent',
-            preserveDrawingBuffer: true,
-        });
-        renderer.setPixelRatio(Math.min(window.devicePixelRatio, q.pixelRatio));
-        renderer.setSize(mount.clientWidth, mount.clientHeight);
-        renderer.toneMapping = (_a = TONE_MAP[toneMapping]) !== null && _a !== void 0 ? _a : THREE.ACESFilmicToneMapping;
-        renderer.toneMappingExposure = exposure;
-        renderer.outputColorSpace = THREE.SRGBColorSpace;
-        if (shadows) {
-            renderer.shadowMap.enabled = true;
-            renderer.shadowMap.type = SOFT_SHADOW_MAP;
-        }
-        mount.appendChild(renderer.domElement);
-        rendererRef.current = renderer;
-        const scene = sceneRef.current;
-        if (backgroundColor !== 'transparent') {
-            // The default is a var() token, which THREE.Color cannot parse (it warns and paints
-            // white); resolve it against the viewer first.
-            scene.background = new THREE.Color(resolveCssColor(backgroundColor, mount));
-        }
-        // Lights
-        const amb = new THREE.AmbientLight(0xffffff, ambientIntensity);
-        scene.add(amb);
-        const dir = new THREE.DirectionalLight(0xffffff, directionalIntensity);
-        dir.position.set(5, 10, 7);
-        if (shadows) {
-            dir.castShadow = true;
-            dir.shadow.mapSize.setScalar(q.shadowMapSize);
-        }
-        scene.add(dir);
-        const hemi = new THREE.HemisphereLight(0xaaccff, 0x445522, 0.3);
-        scene.add(hemi);
-        // Grid
-        const grid = new THREE.GridHelper(50, 50, 0x444444, 0x333333);
-        grid.visible = initShowGrid;
-        scene.add(grid);
-        gridRef.current = grid;
-        // Camera
-        const camera = cameraRef.current;
-        camera.position.set(5, 4, 8);
-        camera.lookAt(0, 0, 0);
-        // OrbitControls
-        const orbit = new OrbitControls(camera, renderer.domElement);
-        orbit.enableDamping = true;
-        orbit.dampingFactor = 0.08;
-        orbit.minDistance = minDistance;
-        orbit.maxDistance = maxDistance;
-        orbit.autoRotate = initAutoRotate > 0;
-        orbit.autoRotateSpeed = initAutoRotate;
-        orbitRef.current = orbit;
-        // Resize observer
-        const ro = new ResizeObserver(() => {
-            if (!mount || disposeRef.current) {
-                return;
-            }
-            const w = mount.clientWidth;
-            const h = mount.clientHeight;
-            camera.aspect = w / h;
-            camera.updateProjectionMatrix();
-            renderer.setSize(w, h);
-        });
-        ro.observe(mount);
-        // Animation loop
-        const animate = () => {
-            var _a, _b, _c, _d, _e, _f;
-            if (disposeRef.current) {
-                return;
-            }
-            rafRef.current = requestAnimationFrame(animate);
-            const dt = (_b = (_a = clockRef.current) === null || _a === void 0 ? void 0 : _a.getDelta()) !== null && _b !== void 0 ? _b : 0;
-            // Gamepad FPS-style nav
-            if (gamepad && navMode === 'fps') {
-                // The pads the input engine read this frame (1.3.0: the engine is the only pad reader).
-                const gp = (_c = getInputEngine().gamepadSnapshot[0]) !== null && _c !== void 0 ? _c : null;
-                if (gp) {
-                    const lx = (_d = gp.axes[0]) !== null && _d !== void 0 ? _d : 0;
-                    const ly = (_e = gp.axes[1]) !== null && _e !== void 0 ? _e : 0;
-                    const rx = (_f = gp.axes[2]) !== null && _f !== void 0 ? _f : 0;
-                    const fwd = new THREE.Vector3();
-                    camera.getWorldDirection(fwd);
-                    fwd.y = 0;
-                    fwd.normalize();
-                    const right = new THREE.Vector3().crossVectors(fwd, camera.up).normalize();
-                    camera.position.addScaledVector(fwd, -ly * walkSpeed * dt);
-                    camera.position.addScaledVector(right, lx * walkSpeed * dt);
-                    orbit.target.addScaledVector(fwd, -ly * walkSpeed * dt);
-                    orbit.target.addScaledVector(right, lx * walkSpeed * dt);
-                    camera.rotateY(-rx * 2 * dt);
-                }
-            }
-            // Keyboard WASD
-            if (navMode === 'fps' || navMode === 'walkthrough') {
-                const fwd = new THREE.Vector3();
-                camera.getWorldDirection(fwd);
-                fwd.y = 0;
-                fwd.normalize();
-                const right = new THREE.Vector3().crossVectors(fwd, camera.up).normalize();
-                const speed = walkSpeed * dt;
-                if (keysRef.current.has('w') || keysRef.current.has('arrowup')) {
-                    camera.position.addScaledVector(fwd, speed);
-                    orbit.target.addScaledVector(fwd, speed);
-                }
-                if (keysRef.current.has('s') || keysRef.current.has('arrowdown')) {
-                    camera.position.addScaledVector(fwd, -speed);
-                    orbit.target.addScaledVector(fwd, -speed);
-                }
-                if (keysRef.current.has('a') || keysRef.current.has('arrowleft')) {
-                    camera.position.addScaledVector(right, -speed);
-                    orbit.target.addScaledVector(right, -speed);
-                }
-                if (keysRef.current.has('d') || keysRef.current.has('arrowright')) {
-                    camera.position.addScaledVector(right, speed);
-                    orbit.target.addScaledVector(right, speed);
-                }
-                if (keysRef.current.has('q')) {
-                    camera.position.y += speed;
-                    orbit.target.y += speed;
-                }
-                if (keysRef.current.has('e')) {
-                    camera.position.y -= speed;
-                    orbit.target.y -= speed;
-                }
-            }
-            if (mixerRef.current) {
-                mixerRef.current.update(dt);
-            }
-            orbit.update();
-            renderer.render(scene, camera);
-        };
-        animate();
-        // Keyboard listeners
-        const onKeyDown = (e) => keysRef.current.add(e.key.toLowerCase());
-        const onKeyUp = (e) => keysRef.current.delete(e.key.toLowerCase());
-        mount.addEventListener('keydown', onKeyDown);
-        mount.addEventListener('keyup', onKeyUp);
-        // Fullscreen
-        const onFSChange = () => setIsFullscreen(!!document.fullscreenElement);
-        document.addEventListener('fullscreenchange', onFSChange);
-        return () => {
-            disposeRef.current = true;
-            cancelAnimationFrame(rafRef.current);
-            ro.disconnect();
-            orbit.dispose();
-            renderer.dispose();
-            mount.removeEventListener('keydown', onKeyDown);
-            mount.removeEventListener('keyup', onKeyUp);
-            document.removeEventListener('fullscreenchange', onFSChange);
-            if (mount.contains(renderer.domElement)) {
-                mount.removeChild(renderer.domElement);
-            }
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    /* ── update grid visibility ── */
-    useEffect(() => {
-        if (gridRef.current) {
-            gridRef.current.visible = gridVisible;
-        }
-    }, [gridVisible]);
-    /* ── update auto-rotate ── */
-    useEffect(() => {
-        if (orbitRef.current) {
-            orbitRef.current.autoRotate = autoRotate > 0;
-            orbitRef.current.autoRotateSpeed = autoRotate;
-        }
-    }, [autoRotate]);
-    /* ── wireframe toggle ── */
-    useEffect(() => {
-        if (!rootRef.current) {
-            return;
-        }
-        rootRef.current.traverse((c) => {
-            if (c.isMesh) {
-                const mat = c.material;
-                const mats = Array.isArray(mat) ? mat : [mat];
-                mats.forEach((m) => {
-                    if ('wireframe' in m) {
-                        m.wireframe = wireframe;
-                    }
-                });
-            }
+  const { t } = useNiceTranslation();
+  const {
+    src,
+    format,
+    navigationMode: initNavMode = "orbit",
+    quality = "high",
+    autoRotateSpeed: initAutoRotate = 0,
+    backgroundColor = "var(--nice-bg, #1a1a2e)",
+    showGrid: initShowGrid = true,
+    shadows = true,
+    gamepad = false,
+    cameraPresets: _cameraPresets = [],
+    annotations: _annotations = [],
+    hotspots: _hotspots = [],
+    floorPlans: _floorPlans = [],
+    onHotspotClick: _onHotspotClick,
+    onAnnotationClick: _onAnnotationClick,
+    onLoadProgress,
+    onLoad,
+    onError,
+    clippingPlanes = [],
+    measureMode: initMeasureMode = false,
+    measurements: _measurements = [],
+    onMeasure: _onMeasure,
+    minDistance = 0.1,
+    maxDistance = 1e3,
+    fov = 50,
+    vr: _vr = false,
+    walkSpeed = 5,
+    ambientIntensity = 0.5,
+    directionalIntensity = 0.8,
+    antiAlias = true,
+    toneMapping = "aces",
+    exposure = 1
+  } = props;
+  const mountRef = useRef(null);
+  const rendererRef = useRef(null);
+  const sceneRef = useRef(new THREE.Scene());
+  const cameraRef = useRef(new THREE.PerspectiveCamera(fov, 1, 0.01, 1e4));
+  const orbitRef = useRef(null);
+  const clockRef = useRef(null);
+  clockRef.current ?? (clockRef.current = createFrameClock());
+  const mixerRef = useRef(null);
+  const rafRef = useRef(0);
+  const rootRef = useRef(null);
+  const gridRef = useRef(null);
+  const clipsRef = useRef([]);
+  const keysRef = useRef(/* @__PURE__ */ new Set());
+  useRef(null);
+  const disposeRef = useRef(false);
+  const [loading, setLoading] = useState(false);
+  const [loadProgress, setLoadProgress] = useState(0);
+  const [error, setError] = useState(null);
+  const [navMode, setNavMode] = useState(initNavMode);
+  const [projection, setProjection] = useState("perspective");
+  const [wireframe, setWireframe] = useState(false);
+  const [gridVisible, setGridVisible] = useState(initShowGrid);
+  const [autoRotate, setAutoRotate] = useState(initAutoRotate);
+  const [polyCount, setPolyCount] = useState(0);
+  const [meshCount, setMeshCount] = useState(0);
+  const [animNames, setAnimNames] = useState([]);
+  const [activeAnimIdx, setActiveAnimIdx] = useState(-1);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [animTime, setAnimTime] = useState(0);
+  const [animDuration, setAnimDuration] = useState(0);
+  const [animSpeed, setAnimSpeed] = useState(1);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [activeFloorPlanId, setActiveFloorPlanId] = useState(null);
+  const [annotationsVisible, setAnnotationsVisible] = useState(true);
+  const [clippingEnabled, setClippingEnabled] = useState(clippingPlanes.length > 0);
+  const [clippingPosition, setClippingPosition] = useState(0);
+  const [clippingAxis, setClippingAxis] = useState("y");
+  const [measureModeActive, setMeasureModeActive] = useState(initMeasureMode);
+  const [dimensions, setDimensions] = useState(null);
+  const [statusText, setStatusText] = useState("Ready");
+  useEffect(() => {
+    const mount = mountRef.current;
+    if (!mount) {
+      return;
+    }
+    disposeRef.current = false;
+    const q = QUALITY_MAP[quality];
+    const renderer = new THREE.WebGLRenderer({
+      antialias: q.antialias && antiAlias,
+      alpha: backgroundColor === "transparent",
+      preserveDrawingBuffer: true
+    });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, q.pixelRatio));
+    renderer.setSize(mount.clientWidth, mount.clientHeight);
+    renderer.toneMapping = TONE_MAP[toneMapping] ?? THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = exposure;
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    if (shadows) {
+      renderer.shadowMap.enabled = true;
+      renderer.shadowMap.type = SOFT_SHADOW_MAP;
+    }
+    mount.appendChild(renderer.domElement);
+    rendererRef.current = renderer;
+    const scene = sceneRef.current;
+    if (backgroundColor !== "transparent") {
+      scene.background = new THREE.Color(resolveCssColor(backgroundColor, mount));
+    }
+    const amb = new THREE.AmbientLight(16777215, ambientIntensity);
+    scene.add(amb);
+    const dir = new THREE.DirectionalLight(16777215, directionalIntensity);
+    dir.position.set(5, 10, 7);
+    if (shadows) {
+      dir.castShadow = true;
+      dir.shadow.mapSize.setScalar(q.shadowMapSize);
+    }
+    scene.add(dir);
+    const hemi = new THREE.HemisphereLight(11193599, 4478242, 0.3);
+    scene.add(hemi);
+    const grid = new THREE.GridHelper(50, 50, 4473924, 3355443);
+    grid.visible = initShowGrid;
+    scene.add(grid);
+    gridRef.current = grid;
+    const camera = cameraRef.current;
+    camera.position.set(5, 4, 8);
+    camera.lookAt(0, 0, 0);
+    const orbit = new OrbitControls(camera, renderer.domElement);
+    orbit.enableDamping = true;
+    orbit.dampingFactor = 0.08;
+    orbit.minDistance = minDistance;
+    orbit.maxDistance = maxDistance;
+    orbit.autoRotate = initAutoRotate > 0;
+    orbit.autoRotateSpeed = initAutoRotate;
+    orbitRef.current = orbit;
+    const ro = new ResizeObserver(() => {
+      if (!mount || disposeRef.current) {
+        return;
+      }
+      const w = mount.clientWidth;
+      const h = mount.clientHeight;
+      camera.aspect = w / h;
+      camera.updateProjectionMatrix();
+      renderer.setSize(w, h);
+    });
+    ro.observe(mount);
+    const animate = () => {
+      if (disposeRef.current) {
+        return;
+      }
+      rafRef.current = requestAnimationFrame(animate);
+      const dt = clockRef.current?.getDelta() ?? 0;
+      if (gamepad && navMode === "fps") {
+        const gp = getInputEngine().gamepadSnapshot[0] ?? null;
+        if (gp) {
+          const lx = gp.axes[0] ?? 0;
+          const ly = gp.axes[1] ?? 0;
+          const rx = gp.axes[2] ?? 0;
+          const fwd = new THREE.Vector3();
+          camera.getWorldDirection(fwd);
+          fwd.y = 0;
+          fwd.normalize();
+          const right = new THREE.Vector3().crossVectors(fwd, camera.up).normalize();
+          camera.position.addScaledVector(fwd, -ly * walkSpeed * dt);
+          camera.position.addScaledVector(right, lx * walkSpeed * dt);
+          orbit.target.addScaledVector(fwd, -ly * walkSpeed * dt);
+          orbit.target.addScaledVector(right, lx * walkSpeed * dt);
+          camera.rotateY(-rx * 2 * dt);
+        }
+      }
+      if (navMode === "fps" || navMode === "walkthrough") {
+        const fwd = new THREE.Vector3();
+        camera.getWorldDirection(fwd);
+        fwd.y = 0;
+        fwd.normalize();
+        const right = new THREE.Vector3().crossVectors(fwd, camera.up).normalize();
+        const speed = walkSpeed * dt;
+        if (keysRef.current.has("w") || keysRef.current.has("arrowup")) {
+          camera.position.addScaledVector(fwd, speed);
+          orbit.target.addScaledVector(fwd, speed);
+        }
+        if (keysRef.current.has("s") || keysRef.current.has("arrowdown")) {
+          camera.position.addScaledVector(fwd, -speed);
+          orbit.target.addScaledVector(fwd, -speed);
+        }
+        if (keysRef.current.has("a") || keysRef.current.has("arrowleft")) {
+          camera.position.addScaledVector(right, -speed);
+          orbit.target.addScaledVector(right, -speed);
+        }
+        if (keysRef.current.has("d") || keysRef.current.has("arrowright")) {
+          camera.position.addScaledVector(right, speed);
+          orbit.target.addScaledVector(right, speed);
+        }
+        if (keysRef.current.has("q")) {
+          camera.position.y += speed;
+          orbit.target.y += speed;
+        }
+        if (keysRef.current.has("e")) {
+          camera.position.y -= speed;
+          orbit.target.y -= speed;
+        }
+      }
+      if (mixerRef.current) {
+        mixerRef.current.update(dt);
+      }
+      orbit.update();
+      renderer.render(scene, camera);
+    };
+    animate();
+    const onKeyDown = (e) => keysRef.current.add(e.key.toLowerCase());
+    const onKeyUp = (e) => keysRef.current.delete(e.key.toLowerCase());
+    mount.addEventListener("keydown", onKeyDown);
+    mount.addEventListener("keyup", onKeyUp);
+    const onFSChange = () => setIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener("fullscreenchange", onFSChange);
+    return () => {
+      disposeRef.current = true;
+      cancelAnimationFrame(rafRef.current);
+      ro.disconnect();
+      orbit.dispose();
+      renderer.dispose();
+      mount.removeEventListener("keydown", onKeyDown);
+      mount.removeEventListener("keyup", onKeyUp);
+      document.removeEventListener("fullscreenchange", onFSChange);
+      if (mount.contains(renderer.domElement)) {
+        mount.removeChild(renderer.domElement);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (gridRef.current) {
+      gridRef.current.visible = gridVisible;
+    }
+  }, [gridVisible]);
+  useEffect(() => {
+    if (orbitRef.current) {
+      orbitRef.current.autoRotate = autoRotate > 0;
+      orbitRef.current.autoRotateSpeed = autoRotate;
+    }
+  }, [autoRotate]);
+  useEffect(() => {
+    if (!rootRef.current) {
+      return;
+    }
+    rootRef.current.traverse((c) => {
+      if (c.isMesh) {
+        const mat = c.material;
+        const mats = Array.isArray(mat) ? mat : [mat];
+        mats.forEach((m) => {
+          if ("wireframe" in m) {
+            m.wireframe = wireframe;
+          }
         });
-    }, [wireframe]);
-    /* ── clipping ── */
-    useEffect(() => {
-        const renderer = rendererRef.current;
-        if (!renderer) {
-            return;
-        }
-        if (clippingEnabled) {
-            const normal = new THREE.Vector3(clippingAxis === 'x' ? 1 : 0, clippingAxis === 'y' ? 1 : 0, clippingAxis === 'z' ? 1 : 0);
-            const plane = new THREE.Plane(normal, -clippingPosition);
-            renderer.clippingPlanes = [plane];
-        }
-        else {
-            renderer.clippingPlanes = [];
-        }
-    }, [clippingEnabled, clippingPosition, clippingAxis]);
-    /* ── counting helpers ── */
-    const countScene = useCallback(() => {
-        let tris = 0;
-        let meshes = 0;
-        sceneRef.current.traverse((c) => {
+      }
+    });
+  }, [wireframe]);
+  useEffect(() => {
+    const renderer = rendererRef.current;
+    if (!renderer) {
+      return;
+    }
+    if (clippingEnabled) {
+      const normal = new THREE.Vector3(
+        clippingAxis === "x" ? 1 : 0,
+        clippingAxis === "y" ? 1 : 0,
+        clippingAxis === "z" ? 1 : 0
+      );
+      const plane = new THREE.Plane(normal, -clippingPosition);
+      renderer.clippingPlanes = [plane];
+    } else {
+      renderer.clippingPlanes = [];
+    }
+  }, [clippingEnabled, clippingPosition, clippingAxis]);
+  const countScene = useCallback(() => {
+    let tris = 0;
+    let meshes = 0;
+    sceneRef.current.traverse((c) => {
+      if (c.isMesh) {
+        meshes++;
+        const geo = c.geometry;
+        if (geo.index) {
+          tris += geo.index.count / 3;
+        } else if (geo.attributes.position) {
+          tris += geo.attributes.position.count / 3;
+        }
+      }
+    });
+    setPolyCount(Math.round(tris));
+    setMeshCount(meshes);
+  }, []);
+  const detectFormat = useCallback((url, hint) => {
+    if (hint) {
+      return hint;
+    }
+    const ext = url.split(".").pop()?.split("?")[0]?.toLowerCase() ?? "";
+    return ext;
+  }, []);
+  const loadModel = useCallback(
+    async (url, fmt) => {
+      setLoading(true);
+      setLoadProgress(0);
+      setError(null);
+      setStatusText(t("useModelViewer.loading", "Loading…"));
+      const detectedFmt = detectFormat(url, fmt);
+      const onProgress = (e) => {
+        if (e.lengthComputable) {
+          const p = e.loaded / e.total;
+          setLoadProgress(p);
+          onLoadProgress?.(p);
+        }
+      };
+      try {
+        let obj = null;
+        let clips = [];
+        if (detectedFmt === "fbx") {
+          const loader = new FBXLoader();
+          const group = await loader.loadAsync(url, onProgress);
+          clips = group.animations ?? [];
+          obj = group;
+        } else if (detectedFmt === "glb" || detectedFmt === "gltf") {
+          const loader = new GLTFLoader();
+          const gltf = await loader.loadAsync(url, onProgress);
+          clips = gltf.animations ?? [];
+          obj = gltf.scene;
+        } else if (detectedFmt === "obj") {
+          const loader = new OBJLoader();
+          obj = await loader.loadAsync(url, onProgress);
+        } else if (detectedFmt === "dae") {
+          const loader = new ColladaLoader();
+          const result = await loader.loadAsync(url, onProgress);
+          if (result) {
+            clips = result.scene.animations ?? [];
+            obj = result.scene;
+          }
+        } else if (detectedFmt === "stl") {
+          const loader = new STLLoader();
+          const geo = await loader.loadAsync(url, onProgress);
+          const mat = new THREE.MeshStandardMaterial({
+            color: 11184810,
+            metalness: 0.3,
+            roughness: 0.6
+          });
+          const mesh = new THREE.Mesh(geo, mat);
+          mesh.castShadow = true;
+          mesh.receiveShadow = true;
+          obj = mesh;
+        } else if (detectedFmt === "ply") {
+          const loader = new PLYLoader();
+          const geo = await loader.loadAsync(url, onProgress);
+          geo.computeVertexNormals();
+          const mat = new THREE.MeshStandardMaterial({
+            color: 11184810,
+            vertexColors: !!geo.attributes.color
+          });
+          obj = new THREE.Mesh(geo, mat);
+        } else {
+          throw new Error(`Unsupported format: ${detectedFmt}`);
+        }
+        if (obj) {
+          if (rootRef.current) {
+            sceneRef.current.remove(rootRef.current);
+          }
+          obj.traverse((c) => {
             if (c.isMesh) {
-                meshes++;
-                const geo = c.geometry;
-                if (geo.index) {
-                    tris += geo.index.count / 3;
-                }
-                else if (geo.attributes.position) {
-                    tris += geo.attributes.position.count / 3;
-                }
-            }
-        });
-        setPolyCount(Math.round(tris));
-        setMeshCount(meshes);
-    }, []);
-    /* ── detect format from URL ── */
-    const detectFormat = useCallback((url, hint) => {
-        var _a, _b, _c;
-        if (hint) {
-            return hint;
-        }
-        const ext = (_c = (_b = (_a = url.split('.').pop()) === null || _a === void 0 ? void 0 : _a.split('?')[0]) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== null && _c !== void 0 ? _c : '';
-        return ext;
-    }, []);
-    /* ── load model ── */
-    const loadModel = useCallback(async (url, fmt) => {
-        var _a, _b, _c;
-        setLoading(true);
-        setLoadProgress(0);
-        setError(null);
-        setStatusText(t('useModelViewer.loading', 'Loading…'));
-        const detectedFmt = detectFormat(url, fmt);
-        const onProgress = (e) => {
-            if (e.lengthComputable) {
-                const p = e.loaded / e.total;
-                setLoadProgress(p);
-                onLoadProgress === null || onLoadProgress === void 0 ? void 0 : onLoadProgress(p);
-            }
-        };
-        try {
-            let obj = null;
-            let clips = [];
-            if (detectedFmt === 'fbx') {
-                const loader = new FBXLoader();
-                const group = await loader.loadAsync(url, onProgress);
-                clips = (_a = group.animations) !== null && _a !== void 0 ? _a : [];
-                obj = group;
-            }
-            else if (detectedFmt === 'glb' || detectedFmt === 'gltf') {
-                const loader = new GLTFLoader();
-                const gltf = await loader.loadAsync(url, onProgress);
-                clips = (_b = gltf.animations) !== null && _b !== void 0 ? _b : [];
-                obj = gltf.scene;
-            }
-            else if (detectedFmt === 'obj') {
-                const loader = new OBJLoader();
-                obj = await loader.loadAsync(url, onProgress);
-            }
-            else if (detectedFmt === 'dae') {
-                const loader = new ColladaLoader();
-                const result = await loader.loadAsync(url, onProgress);
-                if (result) {
-                    clips = (_c = result.scene.animations) !== null && _c !== void 0 ? _c : [];
-                    obj = result.scene;
-                }
+              c.castShadow = true;
+              c.receiveShadow = true;
             }
-            else if (detectedFmt === 'stl') {
-                const loader = new STLLoader();
-                const geo = await loader.loadAsync(url, onProgress);
-                const mat = new THREE.MeshStandardMaterial({
-                    color: 0xaaaaaa,
-                    metalness: 0.3,
-                    roughness: 0.6,
-                });
-                const mesh = new THREE.Mesh(geo, mat);
-                mesh.castShadow = true;
-                mesh.receiveShadow = true;
-                obj = mesh;
+          });
+          const box = new THREE.Box3().setFromObject(obj);
+          const size = box.getSize(new THREE.Vector3());
+          const maxDim = Math.max(size.x, size.y, size.z);
+          if (maxDim > 0) {
+            const target = 5;
+            if (maxDim > target * 2 || maxDim < target * 0.1) {
+              const scale = target / maxDim;
+              obj.scale.multiplyScalar(scale);
             }
-            else if (detectedFmt === 'ply') {
-                const loader = new PLYLoader();
-                const geo = await loader.loadAsync(url, onProgress);
-                geo.computeVertexNormals();
-                const mat = new THREE.MeshStandardMaterial({
-                    color: 0xaaaaaa,
-                    vertexColors: !!geo.attributes.color,
-                });
-                obj = new THREE.Mesh(geo, mat);
-            }
-            else {
-                throw new Error(`Unsupported format: ${detectedFmt}`);
-            }
-            if (obj) {
-                // Remove previous model
-                if (rootRef.current) {
-                    sceneRef.current.remove(rootRef.current);
-                }
-                // Enable shadows
-                obj.traverse((c) => {
-                    if (c.isMesh) {
-                        c.castShadow = true;
-                        c.receiveShadow = true;
-                    }
-                });
-                // Auto-scale to normalized size
-                const box = new THREE.Box3().setFromObject(obj);
-                const size = box.getSize(new THREE.Vector3());
-                const maxDim = Math.max(size.x, size.y, size.z);
-                if (maxDim > 0) {
-                    const target = 5;
-                    if (maxDim > target * 2 || maxDim < target * 0.1) {
-                        const scale = target / maxDim;
-                        obj.scale.multiplyScalar(scale);
-                    }
-                }
-                // Center model
-                const box2 = new THREE.Box3().setFromObject(obj);
-                const center = box2.getCenter(new THREE.Vector3());
-                obj.position.sub(center);
-                obj.position.y += box2.getSize(new THREE.Vector3()).y / 2;
-                sceneRef.current.add(obj);
-                rootRef.current = obj;
-                // Update dimensions
-                const finalBox = new THREE.Box3().setFromObject(obj);
-                const s = finalBox.getSize(new THREE.Vector3());
-                setDimensions({
-                    width: +s.x.toFixed(2),
-                    height: +s.y.toFixed(2),
-                    depth: +s.z.toFixed(2),
-                });
-                // Animations
-                clipsRef.current = clips;
-                setAnimNames(clips.map((c, i) => c.name || `Clip ${i + 1}`));
-                if (clips.length > 0) {
-                    const mixer = new THREE.AnimationMixer(obj);
-                    mixerRef.current = mixer;
-                }
-                countScene();
-                setStatusText(t('useModelViewer.loadedTrisMeshes', 'Loaded – {polyCount} tris, {meshCount} meshes')
-                    .replace('{polyCount}', String(polyCount))
-                    .replace('{meshCount}', String(meshCount)));
-                onLoad === null || onLoad === void 0 ? void 0 : onLoad();
-            }
-        }
-        catch (err) {
-            const msg = err instanceof Error ? err.message : String(err);
-            setError(msg);
-            setStatusText(t('useModelViewer.error', 'Error: {msg}').replace('{msg}', String(msg)));
-            onError === null || onError === void 0 ? void 0 : onError(err instanceof Error ? err : new Error(msg));
-        }
-        finally {
-            setLoading(false);
-            setLoadProgress(1);
-        }
-    }, [countScene, detectFormat, onLoad, onError, onLoadProgress, polyCount, meshCount, t]);
-    /* ── auto-load from src ── */
-    useEffect(() => {
-        if (src) {
-            loadModel(src, format);
-        }
-    }, [src, format, loadModel]);
-    /* ── loadFile from disk ── */
-    const loadFile = useCallback(async (file) => {
-        var _a;
-        const url = URL.createObjectURL(file);
-        const ext = (_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-        try {
-            await loadModel(url, ext);
-        }
-        finally {
-            URL.revokeObjectURL(url);
-        }
-    }, [loadModel]);
-    /* ── loadUrl ── */
-    const loadUrl = useCallback(async (url, fmt) => {
-        await loadModel(url, fmt);
-    }, [loadModel]);
-    /* ── animation controls ── */
-    const playAnimation = useCallback((index) => {
-        if (!mixerRef.current || index < 0 || index >= clipsRef.current.length) {
-            return;
-        }
-        mixerRef.current.stopAllAction();
-        const clip = clipsRef.current[index];
-        const action = mixerRef.current.clipAction(clip);
-        action.reset().play();
-        setActiveAnimIdx(index);
-        setIsPlaying(true);
-        setAnimDuration(clip.duration);
-    }, []);
-    const togglePlay = useCallback(() => {
-        if (!mixerRef.current) {
-            return;
-        }
-        if (isPlaying) {
-            mixerRef.current.timeScale = 0;
-            setIsPlaying(false);
-        }
-        else {
-            mixerRef.current.timeScale = animSpeed;
-            setIsPlaying(true);
-            if (activeAnimIdx < 0 && clipsRef.current.length > 0) {
-                playAnimation(0);
-            }
-        }
-    }, [isPlaying, animSpeed, activeAnimIdx, playAnimation]);
-    const seekAnim = useCallback((t) => {
-        if (mixerRef.current) {
-            mixerRef.current.setTime(t);
-        }
-        setAnimTime(t);
-    }, []);
-    /* ── camera presets ── */
-    const goToPreset = useCallback((preset) => {
-        const cam = cameraRef.current;
-        const orbit = orbitRef.current;
-        if (!orbit) {
-            return;
-        }
-        cam.position.set(...preset.position);
-        orbit.target.set(...preset.target);
-        if (preset.fov) {
-            cam.fov = preset.fov;
-        }
-        cam.updateProjectionMatrix();
-        orbit.update();
-    }, []);
-    const resetCamera = useCallback(() => {
-        const cam = cameraRef.current;
-        cam.position.set(5, 4, 8);
-        if (orbitRef.current) {
-            orbitRef.current.target.set(0, 0, 0);
-            orbitRef.current.update();
-        }
-    }, []);
-    const zoomToFit = useCallback(() => {
-        if (!rootRef.current) {
-            return;
-        }
-        const box = new THREE.Box3().setFromObject(rootRef.current);
-        const center = box.getCenter(new THREE.Vector3());
-        const size = box.getSize(new THREE.Vector3());
-        const maxDim = Math.max(size.x, size.y, size.z);
-        const cam = cameraRef.current;
-        const dist = maxDim / (2 * Math.tan((cam.fov * Math.PI) / 360));
-        cam.position.copy(center).add(new THREE.Vector3(0, 0, dist * 1.5));
-        if (orbitRef.current) {
-            orbitRef.current.target.copy(center);
-            orbitRef.current.update();
-        }
-    }, []);
-    /* ── screenshot ── */
-    const screenshot = useCallback((width, height) => {
-        const renderer = rendererRef.current;
-        if (!renderer) {
-            return '';
-        }
-        if (width && height) {
-            renderer.setSize(width, height);
-            cameraRef.current.aspect = width / height;
-            cameraRef.current.updateProjectionMatrix();
-        }
-        renderer.render(sceneRef.current, cameraRef.current);
-        const url = renderer.domElement.toDataURL('image/png');
-        if (width && height && mountRef.current) {
-            const w = mountRef.current.clientWidth;
-            const h = mountRef.current.clientHeight;
-            renderer.setSize(w, h);
-            cameraRef.current.aspect = w / h;
-            cameraRef.current.updateProjectionMatrix();
-        }
-        return url;
-    }, []);
-    /* ── fullscreen ── */
-    const toggleFullscreen = useCallback(() => {
-        if (!mountRef.current) {
-            return;
-        }
-        if (document.fullscreenElement) {
-            document.exitFullscreen();
-        }
-        else {
-            mountRef.current.requestFullscreen();
-        }
-    }, []);
-    /* ── dispose ── */
-    const dispose = useCallback(() => {
-        var _a;
-        disposeRef.current = true;
-        cancelAnimationFrame(rafRef.current);
-        (_a = rendererRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
-    }, []);
-    /* ── finalise status text ── */
-    useEffect(() => {
-        if (!loading && !error && polyCount > 0) {
-            setStatusText(t('useModelViewer.trianglesMeshesAnimationS', '{polyCount} triangles · {meshCount} meshes · {animNames} animation(s)')
-                .replace('{polyCount}', String(polyCount.toLocaleString()))
-                .replace('{meshCount}', String(meshCount))
-                .replace('{animNames}', String(animNames.length)));
-        }
-    }, [loading, error, polyCount, meshCount, animNames.length, t]);
-    return {
-        mountRef,
-        loading,
-        loadProgress,
-        error,
-        navigationMode: navMode,
-        setNavigationMode: setNavMode,
-        projection,
-        setProjection,
-        wireframe,
-        setWireframe,
-        showGrid: gridVisible,
-        setShowGrid: setGridVisible,
-        autoRotateSpeed: autoRotate,
-        setAutoRotateSpeed: setAutoRotate,
-        polyCount,
-        meshCount,
-        animations: animNames,
-        activeAnimIdx,
-        playAnimation,
-        togglePlay,
-        isPlaying,
-        animTime,
-        animDuration,
-        seekAnim,
-        animSpeed,
-        setAnimSpeed,
-        goToPreset,
-        resetCamera,
-        zoomToFit,
-        screenshot,
-        toggleFullscreen,
-        isFullscreen,
-        loadFile,
-        loadUrl,
-        activeFloorPlanId,
-        setActiveFloorPlanId,
-        annotationsVisible,
-        setAnnotationsVisible,
-        measureMode: measureModeActive,
-        setMeasureMode: setMeasureModeActive,
-        clippingEnabled,
-        setClippingEnabled,
-        clippingPosition,
-        setClippingPosition,
-        clippingAxis,
-        setClippingAxis,
-        dimensions,
-        statusText,
-        dispose,
-    };
+          }
+          const box2 = new THREE.Box3().setFromObject(obj);
+          const center = box2.getCenter(new THREE.Vector3());
+          obj.position.sub(center);
+          obj.position.y += box2.getSize(new THREE.Vector3()).y / 2;
+          sceneRef.current.add(obj);
+          rootRef.current = obj;
+          const finalBox = new THREE.Box3().setFromObject(obj);
+          const s = finalBox.getSize(new THREE.Vector3());
+          setDimensions({
+            width: +s.x.toFixed(2),
+            height: +s.y.toFixed(2),
+            depth: +s.z.toFixed(2)
+          });
+          clipsRef.current = clips;
+          setAnimNames(clips.map((c, i) => c.name || `Clip ${i + 1}`));
+          if (clips.length > 0) {
+            const mixer = new THREE.AnimationMixer(obj);
+            mixerRef.current = mixer;
+          }
+          countScene();
+          setStatusText(
+            t("useModelViewer.loadedTrisMeshes", "Loaded – {polyCount} tris, {meshCount} meshes").replace("{polyCount}", String(polyCount)).replace("{meshCount}", String(meshCount))
+          );
+          onLoad?.();
+        }
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        setError(msg);
+        setStatusText(t("useModelViewer.error", "Error: {msg}").replace("{msg}", String(msg)));
+        onError?.(err instanceof Error ? err : new Error(msg));
+      } finally {
+        setLoading(false);
+        setLoadProgress(1);
+      }
+    },
+    [countScene, detectFormat, onLoad, onError, onLoadProgress, polyCount, meshCount, t]
+  );
+  useEffect(() => {
+    if (src) {
+      loadModel(src, format);
+    }
+  }, [src, format, loadModel]);
+  const loadFile = useCallback(
+    async (file) => {
+      const url = URL.createObjectURL(file);
+      const ext = file.name.split(".").pop()?.toLowerCase();
+      try {
+        await loadModel(url, ext);
+      } finally {
+        URL.revokeObjectURL(url);
+      }
+    },
+    [loadModel]
+  );
+  const loadUrl = useCallback(
+    async (url, fmt) => {
+      await loadModel(url, fmt);
+    },
+    [loadModel]
+  );
+  const playAnimation = useCallback((index) => {
+    if (!mixerRef.current || index < 0 || index >= clipsRef.current.length) {
+      return;
+    }
+    mixerRef.current.stopAllAction();
+    const clip = clipsRef.current[index];
+    const action = mixerRef.current.clipAction(clip);
+    action.reset().play();
+    setActiveAnimIdx(index);
+    setIsPlaying(true);
+    setAnimDuration(clip.duration);
+  }, []);
+  const togglePlay = useCallback(() => {
+    if (!mixerRef.current) {
+      return;
+    }
+    if (isPlaying) {
+      mixerRef.current.timeScale = 0;
+      setIsPlaying(false);
+    } else {
+      mixerRef.current.timeScale = animSpeed;
+      setIsPlaying(true);
+      if (activeAnimIdx < 0 && clipsRef.current.length > 0) {
+        playAnimation(0);
+      }
+    }
+  }, [isPlaying, animSpeed, activeAnimIdx, playAnimation]);
+  const seekAnim = useCallback((t2) => {
+    if (mixerRef.current) {
+      mixerRef.current.setTime(t2);
+    }
+    setAnimTime(t2);
+  }, []);
+  const goToPreset = useCallback((preset) => {
+    const cam = cameraRef.current;
+    const orbit = orbitRef.current;
+    if (!orbit) {
+      return;
+    }
+    cam.position.set(...preset.position);
+    orbit.target.set(...preset.target);
+    if (preset.fov) {
+      cam.fov = preset.fov;
+    }
+    cam.updateProjectionMatrix();
+    orbit.update();
+  }, []);
+  const resetCamera = useCallback(() => {
+    const cam = cameraRef.current;
+    cam.position.set(5, 4, 8);
+    if (orbitRef.current) {
+      orbitRef.current.target.set(0, 0, 0);
+      orbitRef.current.update();
+    }
+  }, []);
+  const zoomToFit = useCallback(() => {
+    if (!rootRef.current) {
+      return;
+    }
+    const box = new THREE.Box3().setFromObject(rootRef.current);
+    const center = box.getCenter(new THREE.Vector3());
+    const size = box.getSize(new THREE.Vector3());
+    const maxDim = Math.max(size.x, size.y, size.z);
+    const cam = cameraRef.current;
+    const dist = maxDim / (2 * Math.tan(cam.fov * Math.PI / 360));
+    cam.position.copy(center).add(new THREE.Vector3(0, 0, dist * 1.5));
+    if (orbitRef.current) {
+      orbitRef.current.target.copy(center);
+      orbitRef.current.update();
+    }
+  }, []);
+  const screenshot = useCallback((width, height) => {
+    const renderer = rendererRef.current;
+    if (!renderer) {
+      return "";
+    }
+    if (width && height) {
+      renderer.setSize(width, height);
+      cameraRef.current.aspect = width / height;
+      cameraRef.current.updateProjectionMatrix();
+    }
+    renderer.render(sceneRef.current, cameraRef.current);
+    const url = renderer.domElement.toDataURL("image/png");
+    if (width && height && mountRef.current) {
+      const w = mountRef.current.clientWidth;
+      const h = mountRef.current.clientHeight;
+      renderer.setSize(w, h);
+      cameraRef.current.aspect = w / h;
+      cameraRef.current.updateProjectionMatrix();
+    }
+    return url;
+  }, []);
+  const toggleFullscreen = useCallback(() => {
+    if (!mountRef.current) {
+      return;
+    }
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      mountRef.current.requestFullscreen();
+    }
+  }, []);
+  const dispose = useCallback(() => {
+    disposeRef.current = true;
+    cancelAnimationFrame(rafRef.current);
+    rendererRef.current?.dispose();
+  }, []);
+  useEffect(() => {
+    if (!loading && !error && polyCount > 0) {
+      setStatusText(
+        t(
+          "useModelViewer.trianglesMeshesAnimationS",
+          "{polyCount} triangles · {meshCount} meshes · {animNames} animation(s)"
+        ).replace("{polyCount}", String(polyCount.toLocaleString())).replace("{meshCount}", String(meshCount)).replace("{animNames}", String(animNames.length))
+      );
+    }
+  }, [loading, error, polyCount, meshCount, animNames.length, t]);
+  return {
+    mountRef,
+    loading,
+    loadProgress,
+    error,
+    navigationMode: navMode,
+    setNavigationMode: setNavMode,
+    projection,
+    setProjection,
+    wireframe,
+    setWireframe,
+    showGrid: gridVisible,
+    setShowGrid: setGridVisible,
+    autoRotateSpeed: autoRotate,
+    setAutoRotateSpeed: setAutoRotate,
+    polyCount,
+    meshCount,
+    animations: animNames,
+    activeAnimIdx,
+    playAnimation,
+    togglePlay,
+    isPlaying,
+    animTime,
+    animDuration,
+    seekAnim,
+    animSpeed,
+    setAnimSpeed,
+    goToPreset,
+    resetCamera,
+    zoomToFit,
+    screenshot,
+    toggleFullscreen,
+    isFullscreen,
+    loadFile,
+    loadUrl,
+    activeFloorPlanId,
+    setActiveFloorPlanId,
+    annotationsVisible,
+    setAnnotationsVisible,
+    measureMode: measureModeActive,
+    setMeasureMode: setMeasureModeActive,
+    clippingEnabled,
+    setClippingEnabled,
+    clippingPosition,
+    setClippingPosition,
+    clippingAxis,
+    setClippingAxis,
+    dimensions,
+    statusText,
+    dispose
+  };
 }
-
-export { useModelViewer };
+export {
+  useModelViewer
+};