diff --git a/src/backend/app/projects/project_routes.py b/src/backend/app/projects/project_routes.py
index 3745d93e..69bd9a7f 100644
--- a/src/backend/app/projects/project_routes.py
+++ b/src/backend/app/projects/project_routes.py
@@ -24,9 +24,11 @@
     Response,
     UploadFile,
 )
+from fastapi.concurrency import run_in_threadpool
 from fastapi.responses import StreamingResponse
 from geojson_pydantic import FeatureCollection
 from loguru import logger as log
+from minio.error import S3Error
 from psycopg import Connection
 from psycopg.rows import dict_row
 from stream_zip import NO_COMPRESSION_64, stream_zip
@@ -1913,6 +1915,185 @@ async def head_odm_assets(
     )
 
 
+# ---------------------------------------------------------------------------
+# 3D Tiles proxy
+#
+# 3D Tiles consist of a root ``tileset.json`` plus a tree of individual tile
+# binaries (``.b3dm``, ``.glb``, …) referenced via relative paths.  Presigning
+# every tile would be impractical (hundreds of files, expiry windows, mutated
+# URLs in tileset.json), so we stream them through the backend instead.  All
+# authentication and access control happens here; S3 stays private.
+#
+# Layout in S3:  ``projects/{project_id}/3d-tiles/...``
+# ---------------------------------------------------------------------------
+
+# Cache lifetime for proxied tiles.  Tiles are content-addressed (they don't
+# change once written for a given pipeline run) so 1 hour is conservative.
+# ETag-based revalidation handles changes after expiry.
+_TILE_CACHE_MAX_AGE = 3600
+
+_TILE_CONTENT_TYPES: dict[str, str] = {
+    ".b3dm": "application/octet-stream",
+    ".i3dm": "application/octet-stream",
+    ".cmpt": "application/octet-stream",
+    ".pnts": "application/octet-stream",
+    ".glb": "model/gltf-binary",
+    ".gltf": "model/gltf+json",
+    ".json": "application/json",
+    ".bin": "application/octet-stream",
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".ktx2": "image/ktx2",
+    ".webp": "image/webp",
+}
+
+
+def _tile_content_type(file_path: str) -> str:
+    suffix = f".{file_path.rsplit('.', 1)[-1].lower()}" if "." in file_path else ""
+    return _TILE_CONTENT_TYPES.get(suffix, "application/octet-stream")
+
+
+def _validate_tile_path(file_path: str) -> str:
+    """Validate and normalise a tile sub-path.
+
+    Rejects empty paths, absolute paths, parent traversal (raw or URL-encoded -
+    FastAPI URL-decodes path params already, so a single ``..`` check suffices),
+    backslashes (Windows-style), and any control characters that could be used
+    to inject CR/LF into S3 keys.
+    """
+    if not file_path:
+        raise HTTPException(
+            status_code=HTTPStatus.BAD_REQUEST, detail="Empty tile path."
+        )
+    if file_path.startswith("/") or "\\" in file_path:
+        raise HTTPException(
+            status_code=HTTPStatus.BAD_REQUEST, detail="Invalid tile path."
+        )
+    # Split on '/' and reject any '..' segment.  Substring check would also
+    # match legitimate filenames like ``foo..bar`` so we go segment-wise.
+    for segment in file_path.split("/"):
+        if segment in {"", ".", ".."}:
+            raise HTTPException(
+                status_code=HTTPStatus.BAD_REQUEST, detail="Invalid tile path."
+            )
+    if any(ord(c) < 0x20 for c in file_path):
+        raise HTTPException(
+            status_code=HTTPStatus.BAD_REQUEST, detail="Invalid tile path."
+        )
+    return file_path
+
+
+def _build_tile_response_headers(stat) -> dict[str, str]:
+    """Common cache + integrity headers for tile responses (HEAD and GET)."""
+    headers = {
+        "Cache-Control": f"public, max-age={_TILE_CACHE_MAX_AGE}",
+        "Content-Length": str(stat.size),
+    }
+    if stat.etag:
+        # MinIO surfaces the raw S3 ETag (already wrapped in quotes when
+        # multi-part).  Strip surrounding whitespace just in case.
+        headers["ETag"] = stat.etag.strip('"')
+    if stat.last_modified:
+        headers["Last-Modified"] = stat.last_modified.strftime(
+            "%a, %d %b %Y %H:%M:%S GMT"
+        )
+    return headers
+
+
+async def _stat_3d_tile(project_id: uuid.UUID, file_path: str):
+    """Stat a 3D-tile object.  404 on miss, propagates other errors as 502."""
+    object_key = f"projects/{project_id}/3d-tiles/{file_path}"
+    try:
+        return await run_in_threadpool(
+            s3_client().stat_object, settings.S3_BUCKET_NAME, object_key
+        ), object_key
+    except S3Error as exc:
+        if exc.code in {"NoSuchKey", "NoSuchBucket"}:
+            raise HTTPException(
+                status_code=HTTPStatus.NOT_FOUND,
+                detail=f"3D tile not found: {file_path}",
+            )
+        log.exception(f"S3 error fetching 3D tile {object_key}: {exc}")
+        raise HTTPException(
+            status_code=HTTPStatus.BAD_GATEWAY, detail="Object store error."
+        )
+
+
+@router.head("/{project_id}/3d-tiles/{file_path:path}", tags=["3D Model"])
+async def head_3d_tile(
+    project_id: uuid.UUID,
+    file_path: str,
+    project: Annotated[
+        project_schemas.DbProject, Depends(project_deps.get_project_by_id)
+    ],
+):
+    """Check whether a 3D tile exists without streaming its content.
+
+    Used by the frontend before initialising TilesRenderer so the placeholder
+    can be shown immediately when tiles haven't been generated yet.
+    """
+    file_path = _validate_tile_path(file_path)
+    stat, _ = await _stat_3d_tile(project_id, file_path)
+    return Response(
+        media_type=_tile_content_type(file_path),
+        headers=_build_tile_response_headers(stat),
+    )
+
+
+@router.get("/{project_id}/3d-tiles/{file_path:path}", tags=["3D Model"])
+async def stream_3d_tile(
+    request: Request,
+    project_id: uuid.UUID,
+    file_path: str,
+    project: Annotated[
+        project_schemas.DbProject, Depends(project_deps.get_project_by_id)
+    ],
+):
+    """Stream a single 3D Tiles asset (tileset.json or a tile file) from S3.
+
+    TilesRenderer fetches ``tileset.json`` then resolves all tile paths
+    relative to it.  This endpoint proxies every such request through the
+    backend so the private S3 bucket is never exposed directly.
+
+    The response carries ``Cache-Control: public, max-age=3600`` and the
+    object's S3 ETag so the browser can cache aggressively and revalidate
+    cheaply via ``If-None-Match`` on cache expiry.
+    """
+    file_path = _validate_tile_path(file_path)
+    stat, object_key = await _stat_3d_tile(project_id, file_path)
+
+    response_headers = _build_tile_response_headers(stat)
+
+    # Conditional GET: if the client already has the current version, return
+    # 304 immediately and skip the S3 download entirely.
+    if_none_match = request.headers.get("if-none-match")
+    if if_none_match and response_headers.get("ETag"):
+        client_etags = {tag.strip().strip('"') for tag in if_none_match.split(",")}
+        if response_headers["ETag"] in client_etags or "*" in client_etags:
+            return Response(
+                status_code=HTTPStatus.NOT_MODIFIED, headers=response_headers
+            )
+
+    def generate():
+        response = s3_client().get_object(settings.S3_BUCKET_NAME, object_key)
+        try:
+            while True:
+                chunk = response.read(65536)
+                if not chunk:
+                    break
+                yield chunk
+        finally:
+            response.close()
+            response.release_conn()
+
+    return StreamingResponse(
+        generate(),
+        media_type=_tile_content_type(file_path),
+        headers=response_headers,
+    )
+
+
 # Endpoint not used in production but useful to keep around just for testing the
 # queue
 @router.post("/test/arq_task")
diff --git a/src/frontend/package.json b/src/frontend/package.json
index d9b6e9d1..122fbbc8 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -12,6 +12,7 @@
     "start": "vite"
   },
   "dependencies": {
+    "3d-tiles-renderer": "^0.4.24",
     "@cyntler/react-doc-viewer": "^1.17.0",
     "@geomatico/maplibre-cog-protocol": "^0.3.1",
     "@hotosm/gcp-editor": "workspace:*",
@@ -75,6 +76,7 @@
     "redux-saga": "^1.3.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
+    "three": "^0.184.0",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
@@ -86,6 +88,7 @@
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@types/react-transition-group": "^4.4.12",
+    "@types/three": "^0.184.1",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.3.4",
@@ -102,7 +105,8 @@
     "prettier-plugin-tailwindcss": "^0.5.14",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.9.2",
-    "vite": "^5.4.11"
+    "vite": "^5.4.11",
+    "vite-plugin-static-copy": "^2.3.2"
   },
   "peerDependencies": {
     "@awesome.me/webawesome": "3.2.1"
diff --git a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/DroneImageProcessingWorkflow/ImageReview.tsx b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/DroneImageProcessingWorkflow/ImageReview.tsx
index e5488de7..18cd6c30 100644
--- a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/DroneImageProcessingWorkflow/ImageReview.tsx
+++ b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/DroneImageProcessingWorkflow/ImageReview.tsx
@@ -1395,7 +1395,7 @@ ${safeReason && ["rejected", "unmatched", "invalid_exif", "duplicate"].includes(
               </div>
             )}
 
-            {/* Rubber-band selection rectangle — updated via ref to avoid re-renders */}
+            {/* Rubber-band selection rectangle - updated via ref to avoid re-renders */}
             <div
               ref={boxOverlayRef}
               style={{
diff --git a/src/frontend/src/components/IndividualProject/MapSection/index.tsx b/src/frontend/src/components/IndividualProject/MapSection/index.tsx
index 2cea8fb4..351fa8ab 100644
--- a/src/frontend/src/components/IndividualProject/MapSection/index.tsx
+++ b/src/frontend/src/components/IndividualProject/MapSection/index.tsx
@@ -200,7 +200,7 @@ const MapSection = ({ projectData }: { projectData: Record<string, any> }) => {
       );
       return getBbox(tasksCollectiveGeojson as FeatureCollection);
     }
-    // No tasks yet — fall back to the project outline bbox
+    // No tasks yet - fall back to the project outline bbox
     return projectData?.outline?.properties?.bbox ?? null;
   }, [tasksData, projectData?.outline]);
 
diff --git a/src/frontend/src/routes/appRoutes.ts b/src/frontend/src/routes/appRoutes.ts
index 99ecd52f..36b3d40f 100644
--- a/src/frontend/src/routes/appRoutes.ts
+++ b/src/frontend/src/routes/appRoutes.ts
@@ -16,6 +16,7 @@ const UpdateUserProfile = lazy(() => import("@Views/UpdateUserProfile"));
 const RegulatorsApprovalPage = lazy(() => import("@Views/RegulatorsApprovalPage"));
 const Tutorials = lazy(() => import("@Views/Tutorial"));
 const ImportPage = lazy(() => import("@Views/Import"));
+const View3DModel = lazy(() => import("@Views/View3DModel"));
 
 const appRoutes: IRoute[] = [
   ...userRoutes,
@@ -97,6 +98,12 @@ const appRoutes: IRoute[] = [
     component: ImportPage,
     authenticated: true,
   },
+  {
+    path: "/projects/:id/3d-model",
+    name: "3D Model Viewer",
+    component: View3DModel,
+    authenticated: false,
+  },
 ];
 
 export default appRoutes;
diff --git a/src/frontend/src/views/IndividualProject/index.tsx b/src/frontend/src/views/IndividualProject/index.tsx
index 84799808..8e132d05 100644
--- a/src/frontend/src/views/IndividualProject/index.tsx
+++ b/src/frontend/src/views/IndividualProject/index.tsx
@@ -237,6 +237,17 @@ const IndividualProject = () => {
             >
               GCP Editor
             </Button>
+            {projectData?.image_processing_status === "SUCCESS" && (
+              <Button
+                variant="ghost"
+                className="naxatw-border naxatw-border-[#D73F3F] naxatw-text-[0.875rem] naxatw-text-[#D73F3F]"
+                leftIcon="view_in_ar"
+                iconClassname="naxatw-text-[1.125rem]"
+                onClick={() => navigate(`/projects/${projectData?.id || id}/3d-model`)}
+              >
+                View 3D Model
+              </Button>
+            )}
             <div className="naxatw-relative">
               <Button
                 variant="ghost"
diff --git a/src/frontend/src/views/View3DModel/index.tsx b/src/frontend/src/views/View3DModel/index.tsx
new file mode 100644
index 00000000..9f89e05e
--- /dev/null
+++ b/src/frontend/src/views/View3DModel/index.tsx
@@ -0,0 +1,970 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import maplibregl, { type CustomLayerInterface, type CustomRenderMethodInput } from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+import * as THREE from "three";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";
+import { KTX2Loader } from "three/addons/loaders/KTX2Loader.js";
+import { TilesRenderer } from "3d-tiles-renderer";
+import centroid from "@turf/centroid";
+import { useGetProjectsDetailQuery } from "@Api/projects";
+import hasErrorBoundary from "@Utils/hasErrorBoundary";
+import { getRuntimeConfig } from "@/runtimeConfig";
+
+const API_URL = getRuntimeConfig("VITE_API_URL", "/api").replace(/\/+$/, "");
+
+// DRACO/KTX2 decoder assets are copied from three/examples/jsm/libs into
+// public/three-libs/ at build time by vite-plugin-static-copy.  Self-hosted
+// so the viewer doesn't break if a third-party CDN goes down.
+const DRACO_DECODER_PATH = "/three-libs/draco/";
+const KTX2_TRANSCODER_PATH = "/three-libs/basis/";
+
+// Threshold for fatal "render aborted" - TilesRenderer fires load-error per
+// tile, and transient single-tile failures shouldn't blank the whole view.
+const MAX_TILE_ERRORS_BEFORE_FAIL = 5;
+const MODEL_DIAGNOSTIC_TILE_LIMIT = 3;
+const TILE_CACHE_MAX_BYTES = 1024 * 1024 * 1024;
+const TILE_CACHE_MIN_BYTES = 768 * 1024 * 1024;
+const TILE_MAX_TILES_PROCESSED = 1000;
+const TILE_ERROR_TARGET = 8;
+const EMPTY_PARENT_GEOMETRIC_ERROR = 1_000_000_000;
+const DEFAULT_MODEL_ALTITUDE_OFFSET_METERS = 0;
+const PREFETCH_ALL_RENDERABLE_TILES = true;
+const MAX_PREFETCH_RENDERABLE_TILES = 3000;
+
+type ModelState = "idle" | "loading" | "loaded" | "error" | "unavailable";
+
+function log3dTilesDiagnostic(label: string, data?: unknown) {
+  // eslint-disable-next-line no-console
+  console.info(`[3D tiles] ${label}`, data ?? "");
+}
+
+function numericStat(stats: Record<string, unknown> | undefined, key: string): number | null {
+  const value = stats?.[key];
+  return typeof value === "number" ? value : null;
+}
+
+function matrixFromArray(matrix: Iterable<number>): THREE.Matrix4 {
+  return new THREE.Matrix4().fromArray(Array.from(matrix));
+}
+
+function getConfiguredModelAltitudeOffsetMeters() {
+  if (typeof window === "undefined") return DEFAULT_MODEL_ALTITUDE_OFFSET_METERS;
+  const rawValue = new URLSearchParams(window.location.search).get("modelAltOffset");
+  if (rawValue === null) return DEFAULT_MODEL_ALTITUDE_OFFSET_METERS;
+  const value = Number(rawValue);
+  return Number.isFinite(value) ? value : DEFAULT_MODEL_ALTITUDE_OFFSET_METERS;
+}
+
+function vectorToArray(vector: THREE.Vector3) {
+  return vector.toArray().map((value) => Number(value.toFixed(6)));
+}
+
+function summarizeBoundingBox(box: unknown) {
+  if (!Array.isArray(box) || box.length !== 12 || box.some((value) => typeof value !== "number")) {
+    return null;
+  }
+
+  const center = new THREE.Vector3(box[0], box[1], box[2]);
+  const axisX = new THREE.Vector3(box[3], box[4], box[5]);
+  const axisY = new THREE.Vector3(box[6], box[7], box[8]);
+  const axisZ = new THREE.Vector3(box[9], box[10], box[11]);
+  const extent = new THREE.Vector3(
+    Math.abs(axisX.x) + Math.abs(axisY.x) + Math.abs(axisZ.x),
+    Math.abs(axisX.y) + Math.abs(axisY.y) + Math.abs(axisZ.y),
+    Math.abs(axisX.z) + Math.abs(axisY.z) + Math.abs(axisZ.z),
+  );
+  const min = center.clone().sub(extent);
+  const max = center.clone().add(extent);
+
+  return {
+    center: vectorToArray(center),
+    halfAxisLengths: [axisX.length(), axisY.length(), axisZ.length()],
+    localAabbMinMeters: vectorToArray(min),
+    localAabbMaxMeters: vectorToArray(max),
+    localZRangeMeters: [min.z, max.z],
+    approximateRadius: Math.sqrt(axisX.lengthSq() + axisY.lengthSq() + axisZ.lengthSq()),
+  };
+}
+
+function summarizeBox3(box: THREE.Box3) {
+  if (box.isEmpty()) return null;
+  const center = new THREE.Vector3();
+  const size = new THREE.Vector3();
+  box.getCenter(center);
+  box.getSize(size);
+  return {
+    min: vectorToArray(box.min),
+    max: vectorToArray(box.max),
+    center: vectorToArray(center),
+    size: vectorToArray(size),
+  };
+}
+
+function expandBoxByTransformedCorners(
+  target: THREE.Box3,
+  source: THREE.Box3,
+  matrix: THREE.Matrix4,
+) {
+  for (const x of [source.min.x, source.max.x]) {
+    for (const y of [source.min.y, source.max.y]) {
+      for (const z of [source.min.z, source.max.z]) {
+        target.expandByPoint(new THREE.Vector3(x, y, z).applyMatrix4(matrix));
+      }
+    }
+  }
+}
+
+function getTilesetSiteBounds(tiles: TilesRenderer, ecefToSiteTransform: THREE.Matrix4) {
+  const obbBox = new THREE.Box3();
+  const obbMatrix = new THREE.Matrix4();
+  if (!tiles.getOrientedBoundingBox(obbBox, obbMatrix)) return null;
+
+  const siteBounds = new THREE.Box3();
+  const obbToSite = ecefToSiteTransform.clone().multiply(obbMatrix);
+  expandBoxByTransformedCorners(siteBounds, obbBox, obbToSite);
+  return siteBounds;
+}
+
+function getEastNorthUp(lng: number, lat: number) {
+  const lngRad = (lng * Math.PI) / 180;
+  const latRad = (lat * Math.PI) / 180;
+  const east = new THREE.Vector3(-Math.sin(lngRad), Math.cos(lngRad), 0).normalize();
+  const north = new THREE.Vector3(
+    -Math.sin(latRad) * Math.cos(lngRad),
+    -Math.sin(latRad) * Math.sin(lngRad),
+    Math.cos(latRad),
+  ).normalize();
+  const up = new THREE.Vector3(
+    Math.cos(latRad) * Math.cos(lngRad),
+    Math.cos(latRad) * Math.sin(lngRad),
+    Math.sin(latRad),
+  ).normalize();
+  return { east, north, up };
+}
+
+function axisDirections(matrix: THREE.Matrix4) {
+  return {
+    x: vectorToArray(new THREE.Vector3(1, 0, 0).transformDirection(matrix)),
+    y: vectorToArray(new THREE.Vector3(0, 1, 0).transformDirection(matrix)),
+    z: vectorToArray(new THREE.Vector3(0, 0, 1).transformDirection(matrix)),
+  };
+}
+
+function getUpCorrectionMatrix(gltfUpAxis: unknown) {
+  const axis = typeof gltfUpAxis === "string" ? gltfUpAxis.toLowerCase() : "y";
+  if (axis === "x") {
+    return new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
+  }
+  if (axis === "y") {
+    return new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2);
+  }
+  return new THREE.Matrix4();
+}
+
+function forceRendererContentZUp(tiles: TilesRenderer) {
+  const internalTiles = tiles as unknown as { _upRotationMatrix?: THREE.Matrix4 };
+  internalTiles._upRotationMatrix?.identity();
+}
+
+function configureTilesRendererForPhotogrammetry(tiles: TilesRenderer) {
+  const internalTiles = tiles as unknown as {
+    errorTarget?: number;
+    maxTilesProcessed?: number;
+    optimizedLoadStrategy?: boolean;
+    loadSiblings?: boolean;
+    displayActiveTiles?: boolean;
+    lruCache?: {
+      minBytesSize?: number;
+      maxBytesSize?: number;
+    };
+  };
+
+  internalTiles.errorTarget = TILE_ERROR_TARGET;
+  internalTiles.maxTilesProcessed = TILE_MAX_TILES_PROCESSED;
+  internalTiles.optimizedLoadStrategy = true;
+  internalTiles.loadSiblings = true;
+  internalTiles.displayActiveTiles = true;
+  if (internalTiles.lruCache) {
+    internalTiles.lruCache.minBytesSize = TILE_CACHE_MIN_BYTES;
+    internalTiles.lruCache.maxBytesSize = TILE_CACHE_MAX_BYTES;
+  }
+}
+
+function prefetchRenderableTiles(tiles: TilesRenderer) {
+  if (!PREFETCH_ALL_RENDERABLE_TILES) {
+    return { enabled: false };
+  }
+
+  let renderableTiles = 0;
+  let requestedTiles = 0;
+  let alreadyLoadingOrLoaded = 0;
+  let skippedByLimit = 0;
+
+  const internalTiles = tiles as unknown as {
+    requestTileContents?: (tile: unknown) => unknown;
+    lruCache?: { markUsed?: (tile: unknown) => void };
+  };
+
+  tiles.traverse((tile: unknown) => {
+    const record = tile as Record<string, any> | null;
+    if (!record?.internal?.hasRenderableContent) return false;
+
+    renderableTiles += 1;
+    if (record.internal.loadingState !== 0) {
+      alreadyLoadingOrLoaded += 1;
+      return false;
+    }
+
+    if (requestedTiles >= MAX_PREFETCH_RENDERABLE_TILES) {
+      skippedByLimit += 1;
+      return false;
+    }
+
+    internalTiles.lruCache?.markUsed?.(record);
+    const request = internalTiles.requestTileContents?.(record);
+    if (request) {
+      requestedTiles += 1;
+    }
+
+    return false;
+  }, null);
+
+  return {
+    enabled: true,
+    renderableTiles,
+    requestedTiles,
+    alreadyLoadingOrLoaded,
+    skippedByLimit,
+    maxPrefetchRenderableTiles: MAX_PREFETCH_RENDERABLE_TILES,
+  };
+}
+
+function normalizeTilesetGeometricErrors(root: unknown) {
+  let adjustedRenderableParents = 0;
+  let forcedEmptyParents = 0;
+  const samples: Array<{
+    reason: string;
+    original: number | null;
+    adjusted: number;
+    maxRenderableChild?: number;
+  }> = [];
+
+  function visit(tile: unknown): number | null {
+    const record = tile as Record<string, any> | null;
+    if (!record) return null;
+
+    const children = Array.isArray(record.children) ? record.children : [];
+    const hasChildren = children.length > 0;
+    const hasRenderableContent = !!record.content || !!record.contents;
+    const childRenderableErrors = hasChildren
+      ? children.map(visit).filter((value: number | null): value is number => value !== null)
+      : [];
+    const maxRenderableChild = childRenderableErrors.length
+      ? Math.max(...childRenderableErrors)
+      : null;
+    const original = typeof record.geometricError === "number" ? record.geometricError : null;
+
+    if (
+      !hasRenderableContent &&
+      hasChildren &&
+      (original === null || original < EMPTY_PARENT_GEOMETRIC_ERROR)
+    ) {
+      record.geometricError = EMPTY_PARENT_GEOMETRIC_ERROR;
+      forcedEmptyParents += 1;
+      if (samples.length < 5) {
+        samples.push({
+          reason: "empty-parent-forced-refine",
+          original,
+          adjusted: record.geometricError,
+        });
+      }
+      return maxRenderableChild;
+    }
+
+    if (
+      hasRenderableContent &&
+      original !== null &&
+      maxRenderableChild !== null &&
+      original < maxRenderableChild
+    ) {
+      record.geometricError = Number((maxRenderableChild * 1.01).toFixed(6));
+      adjustedRenderableParents += 1;
+      if (samples.length < 5) {
+        samples.push({
+          reason: "renderable-parent-child-error-order",
+          original,
+          adjusted: record.geometricError,
+          maxRenderableChild,
+        });
+      }
+    }
+
+    if (hasRenderableContent) {
+      return typeof record.geometricError === "number" ? record.geometricError : maxRenderableChild;
+    }
+
+    return maxRenderableChild;
+  }
+
+  visit(root);
+  return { adjustedRenderableParents, forcedEmptyParents, samples };
+}
+
+function summarizeRootTransform(
+  transform: unknown,
+  lng: number,
+  lat: number,
+  center: THREE.Vector3,
+) {
+  if (
+    !Array.isArray(transform) ||
+    transform.length !== 16 ||
+    transform.some((value) => typeof value !== "number")
+  ) {
+    return null;
+  }
+
+  const { east, north, up } = getEastNorthUp(lng, lat);
+  const columns = {
+    x: new THREE.Vector3(transform[0], transform[1], transform[2]),
+    y: new THREE.Vector3(transform[4], transform[5], transform[6]),
+    z: new THREE.Vector3(transform[8], transform[9], transform[10]),
+  };
+  const translation = new THREE.Vector3(transform[12], transform[13], transform[14]);
+  const normalized = {
+    x: columns.x.clone().normalize(),
+    y: columns.y.clone().normalize(),
+    z: columns.z.clone().normalize(),
+  };
+  const upDots = {
+    x: normalized.x.dot(up),
+    y: normalized.y.dot(up),
+    z: normalized.z.dot(up),
+  };
+  const inferredUpAxis = Object.entries(upDots).reduce((best, current) =>
+    Math.abs(current[1]) > Math.abs(best[1]) ? current : best,
+  )[0];
+
+  return {
+    translationEcef: vectorToArray(translation),
+    translationLngLatAlt: ecefToLngLatAlt(translation.x, translation.y, translation.z),
+    centerOffsetFromTranslationMeters: Number(center.distanceTo(translation).toFixed(3)),
+    basisLengths: {
+      x: Number(columns.x.length().toFixed(6)),
+      y: Number(columns.y.length().toFixed(6)),
+      z: Number(columns.z.length().toFixed(6)),
+    },
+    basisDotProducts: {
+      xy: Number(normalized.x.dot(normalized.y).toFixed(6)),
+      xz: Number(normalized.x.dot(normalized.z).toFixed(6)),
+      yz: Number(normalized.y.dot(normalized.z).toFixed(6)),
+    },
+    basisAlignmentWithEastNorthUp: {
+      x: {
+        east: Number(normalized.x.dot(east).toFixed(6)),
+        north: Number(normalized.x.dot(north).toFixed(6)),
+        up: Number(upDots.x.toFixed(6)),
+      },
+      y: {
+        east: Number(normalized.y.dot(east).toFixed(6)),
+        north: Number(normalized.y.dot(north).toFixed(6)),
+        up: Number(upDots.y.toFixed(6)),
+      },
+      z: {
+        east: Number(normalized.z.dot(east).toFixed(6)),
+        north: Number(normalized.z.dot(north).toFixed(6)),
+        up: Number(upDots.z.toFixed(6)),
+      },
+    },
+    determinant: Number(columns.x.dot(columns.y.clone().cross(columns.z)).toFixed(6)),
+    inferredTilesetLocalUpAxis: inferredUpAxis,
+  };
+}
+
+function summarizeTilesetContent(root: unknown) {
+  let nodes = 0;
+  let contentNodes = 0;
+  let maxDepth = 0;
+  const extensions = new Set<string>();
+
+  function visit(tile: unknown, depth: number) {
+    const record = tile as Record<string, any> | null;
+    if (!record) return;
+    nodes += 1;
+    maxDepth = Math.max(maxDepth, depth);
+    if (record.content || record.contents) contentNodes += 1;
+    if (record.content?.uri) {
+      const match = String(record.content.uri).match(/\.([a-z0-9]+)$/i);
+      if (match) extensions.add(match[1].toLowerCase());
+    }
+    if (Array.isArray(record.children)) {
+      record.children.forEach((child) => visit(child, depth + 1));
+    }
+  }
+
+  visit(root, 0);
+  return { nodes, contentNodes, maxDepth, contentExtensions: Array.from(extensions).sort() };
+}
+
+function summarizeTileStreaming(tiles: TilesRenderer | null) {
+  if (!tiles) return null;
+  const tileInternals = tiles as unknown as {
+    queuedTiles?: unknown[];
+    stats?: Record<string, unknown>;
+  };
+  const stats = tileInternals.stats;
+  return {
+    stats: {
+      queued: numericStat(stats, "queued"),
+      downloading: numericStat(stats, "downloading"),
+      parsing: numericStat(stats, "parsing"),
+      loaded: numericStat(stats, "loaded"),
+      failed: numericStat(stats, "failed"),
+      inFrustum: numericStat(stats, "inFrustum"),
+      used: numericStat(stats, "used"),
+      active: numericStat(stats, "active"),
+      visible: numericStat(stats, "visible"),
+      tilesProcessed: numericStat(stats, "tilesProcessed"),
+      traversed: numericStat(stats, "traversed"),
+    },
+    queuedTiles: tileInternals.queuedTiles?.length,
+  };
+}
+
+// 3D Tiles store geometry in ECEF (Earth-Centred Earth-Fixed). This converts
+// the tileset bounding-sphere centre to geographic coordinates so we can place
+// the Mercator transform and jump the map camera to the right location.
+function ecefToLngLatAlt(x: number, y: number, z: number) {
+  const a = 6378137.0;
+  const e2 = 6.69437999014e-3;
+  const b = a * Math.sqrt(1 - e2);
+  const ep2 = (a * a - b * b) / (b * b);
+  const p = Math.sqrt(x * x + y * y);
+  const th = Math.atan2(a * z, b * p);
+  const lon = Math.atan2(y, x);
+  const lat = Math.atan2(
+    z + ep2 * b * Math.pow(Math.sin(th), 3),
+    p - e2 * a * Math.pow(Math.cos(th), 3),
+  );
+  const n = a / Math.sqrt(1 - e2 * Math.sin(lat) * Math.sin(lat));
+  const alt = p / Math.cos(lat) - n;
+  return { lng: (lon * 180) / Math.PI, lat: (lat * 180) / Math.PI, alt };
+}
+
+function summarizeLoadedModelScene(
+  scene: THREE.Object3D | undefined,
+  tile: Record<string, any> | undefined,
+  tilesGroup: THREE.Group,
+  siteToMapTransform: THREE.Matrix4,
+) {
+  if (!scene) return null;
+
+  let meshCount = 0;
+  let texturedMeshCount = 0;
+  scene.traverse((object) => {
+    const mesh = object as THREE.Mesh;
+    if (!mesh.isMesh) return;
+    meshCount += 1;
+    const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+    if (materials.some((material) => material && "map" in material && material.map)) {
+      texturedMeshCount += 1;
+    }
+  });
+
+  scene.updateMatrixWorld(true);
+  const sceneParentIsTilesGroup = scene.parent === tilesGroup;
+  const sceneBox = new THREE.Box3().setFromObject(scene);
+  const siteBox = sceneParentIsTilesGroup
+    ? sceneBox
+    : sceneBox.clone().applyMatrix4(tilesGroup.matrix);
+  const sceneToMap = siteToMapTransform.clone().multiply(tilesGroup.matrix).multiply(scene.matrix);
+
+  return {
+    url: tile?.content?.uri,
+    tileRefine: tile?.refine,
+    tileGeometricError: tile?.geometricError,
+    meshCount,
+    texturedMeshCount,
+    sceneParentIsTilesGroup,
+    sceneBoxBeforeTilesGroup: summarizeBox3(sceneBox),
+    sceneBoxAfterTilesGroupMeters: summarizeBox3(siteBox),
+    sceneLocalAxisDirectionsInMapSpace: axisDirections(sceneToMap),
+  };
+}
+
+const View3DModel = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<maplibregl.Map | null>(null);
+  // Set when the tileset finishes loading; used by the re-centre button to
+  // fly back to the model after the user has panned/zoomed away.
+  const modelLocationRef = useRef<{ lng: number; lat: number } | null>(null);
+  const [modelState, setModelState] = useState<ModelState>("idle");
+
+  const handleRecenter = useCallback(() => {
+    if (!mapRef.current || !modelLocationRef.current) return;
+    mapRef.current.flyTo({
+      center: [modelLocationRef.current.lng, modelLocationRef.current.lat],
+      zoom: 18,
+      pitch: 60,
+      bearing: 0,
+    });
+  }, []);
+
+  const { data: projectData, isFetching } = useGetProjectsDetailQuery(id as string);
+
+  useEffect(() => {
+    if (!mapContainerRef.current || isFetching || !projectData) return;
+    if (mapRef.current) return;
+
+    // Use the project UUID from the API response - route param may be a slug.
+    const projectId = (projectData as Record<string, any>).id as string;
+    const tilesetUrl = `${API_URL}/projects/${projectId}/3d-tiles/tileset.json`;
+    const token = localStorage.getItem("token");
+    const authHeaders: Record<string, string> = {};
+    if (token) authHeaders["Access-token"] = token;
+
+    const projectCentroid = (projectData as Record<string, any>).outline
+      ? centroid((projectData as Record<string, any>).outline).geometry.coordinates
+      : [0, 0];
+    const [initLng, initLat] = projectCentroid as [number, number];
+
+    const map = new maplibregl.Map({
+      container: mapContainerRef.current,
+      style: "https://tiles.openfreemap.org/styles/bright",
+      zoom: 14,
+      center: [initLng, initLat],
+      pitch: 60,
+      maxPitch: 80,
+      antialias: true,
+    });
+    mapRef.current = map;
+
+    // Resources shared across onAdd / render via closure.  Tracked at the
+    // effect-scope level so cleanup can dispose them all.
+    let camera: THREE.PerspectiveCamera | null = null;
+    let scene: THREE.Scene | null = null;
+    let renderer: THREE.WebGLRenderer | null = null;
+    let tilesCamera: THREE.PerspectiveCamera | null = null;
+    let tiles: TilesRenderer | null = null;
+    let dracoLoader: DRACOLoader | null = null;
+    let ktx2Loader: KTX2Loader | null = null;
+    let localTransform: THREE.Matrix4 | null = null;
+    let cancelled = false;
+    let tileErrorCount = 0;
+    let modelDiagnosticCount = 0;
+    let tilesLoadEndLogged = false;
+    const headAbort = new AbortController();
+
+    function buildLocalTransform(lng: number, lat: number, alt: number): THREE.Matrix4 {
+      const mc = maplibregl.MercatorCoordinate.fromLngLat([lng, lat], alt);
+      const scale = mc.meterInMercatorCoordinateUnits();
+      const rotX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2);
+      return new THREE.Matrix4()
+        .makeTranslation(mc.x, mc.y, mc.z ?? 0)
+        .scale(new THREE.Vector3(scale, -scale, scale))
+        .multiply(rotX);
+    }
+
+    function initTiles(
+      url: string,
+      sceneInst: THREE.Scene,
+      cameraInst: THREE.PerspectiveCamera,
+      rendererInst: THREE.WebGLRenderer,
+    ) {
+      const gltfLoader = new GLTFLoader();
+
+      dracoLoader = new DRACOLoader();
+      dracoLoader.setDecoderPath(DRACO_DECODER_PATH);
+      gltfLoader.setDRACOLoader(dracoLoader);
+
+      ktx2Loader = new KTX2Loader();
+      ktx2Loader.setTranscoderPath(KTX2_TRANSCODER_PATH);
+      ktx2Loader.detectSupport(rendererInst);
+      gltfLoader.setKTX2Loader(ktx2Loader);
+
+      tiles = new TilesRenderer(url);
+      tiles.group.name = "tiles";
+      configureTilesRendererForPhotogrammetry(tiles);
+      // Forward the JWT so the backend proxy can enforce auth when enabled.
+      if (token) tiles.fetchOptions = { headers: { ...authHeaders } };
+      sceneInst.add(tiles.group);
+      tiles.setCamera(cameraInst);
+      tiles.setResolutionFromRenderer(cameraInst, rendererInst);
+      tiles.manager.addHandler(/\.(gltf|glb)$/g, gltfLoader);
+
+      let handled = false;
+      const onLoadTileset = (event: any) => {
+        if (handled || !tiles) return;
+        handled = true;
+        tiles.removeEventListener("load-tileset", onLoadTileset);
+
+        const sphere = new THREE.Sphere();
+        tiles.getBoundingSphere(sphere);
+        const centre = sphere.center.clone();
+        const { lng, lat, alt } = ecefToLngLatAlt(centre.x, centre.y, centre.z);
+        const root = tiles.root;
+        const rootBox = (root?.boundingVolume as Record<string, unknown> | undefined)?.box;
+        const geometricErrorNormalization = normalizeTilesetGeometricErrors(root);
+        const configuredAltitudeOffsetMeters = getConfiguredModelAltitudeOffsetMeters();
+
+        if (cancelled) return;
+        modelLocationRef.current = { lng, lat };
+        map.jumpTo({ center: [lng, lat], zoom: 18, pitch: 60 });
+        localTransform = buildLocalTransform(lng, lat, alt + configuredAltitudeOffsetMeters);
+
+        let m: number[] = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+        if (root && (root as Record<string, any>).transform) {
+          m = (root as Record<string, any>).transform as number[];
+        }
+        const rotMat3 = new THREE.Matrix3().set(
+          m[0],
+          m[1],
+          m[2],
+          m[8],
+          m[9],
+          m[10],
+          -m[4],
+          -m[5],
+          -m[6],
+        );
+        const finalMatrix = new THREE.Matrix4()
+          .setFromMatrix3(rotMat3)
+          .multiply(new THREE.Matrix4().makeTranslation(-centre.x, -centre.y, -centre.z));
+
+        tiles.group.matrix.copy(finalMatrix);
+        tiles.group.matrixAutoUpdate = false;
+        tiles.group.updateMatrixWorld(true);
+        const siteBounds = getTilesetSiteBounds(tiles, finalMatrix);
+
+        const tilesetJson = event?.tileset as Record<string, any> | undefined;
+        const asset = tilesetJson?.asset as Record<string, unknown> | undefined;
+        const rootRecord = root as unknown as Record<string, unknown> | null;
+        const rootTransform = Array.isArray(rootRecord?.transform)
+          ? (rootRecord.transform as number[])
+          : m;
+        const rootTransformMatrix = matrixFromArray(rootTransform);
+        const rootTransformSummary = summarizeRootTransform(rootTransform, lng, lat, centre);
+        const declaredGltfUpAxis =
+          typeof asset?.gltfUpAxis === "string" ? asset.gltfUpAxis.toLowerCase() : null;
+        const forceZUpContent =
+          rootTransformSummary?.inferredTilesetLocalUpAxis === "z" &&
+          (!declaredGltfUpAxis || declaredGltfUpAxis === "y");
+        if (forceZUpContent) {
+          forceRendererContentZUp(tiles);
+        }
+
+        const sourceToMapNoCorrection = localTransform
+          .clone()
+          .multiply(finalMatrix)
+          .multiply(rootTransformMatrix);
+        const sourceToMapWithDefaultCorrection = sourceToMapNoCorrection
+          .clone()
+          .multiply(getUpCorrectionMatrix(asset?.gltfUpAxis));
+        const sourceToMapWithActiveCorrection = forceZUpContent
+          ? sourceToMapNoCorrection.clone()
+          : sourceToMapWithDefaultCorrection;
+        const tilePrefetch = prefetchRenderableTiles(tiles);
+
+        log3dTilesDiagnostic("alignment", {
+          tilesetUrl: url,
+          asset: {
+            version: asset?.version,
+            tilesetVersion: asset?.tilesetVersion,
+            gltfUpAxis: asset?.gltfUpAxis ?? null,
+            rendererDefaultWhenMissing: "y",
+          },
+          rendererGltfUpAxisHandling: {
+            forcedZUpContent: forceZUpContent,
+            reason: forceZUpContent
+              ? "Root transform says local Z is vertical, so skip 3d-tiles-renderer's default Y-up glTF correction for ODM/obj2tiles B3DM content."
+              : "Using 3d-tiles-renderer's declared/default glTF up-axis correction.",
+          },
+          geographicCenter: { lng, lat, alt },
+          ecefSphereCenter: vectorToArray(centre),
+          ecefSphereCenterLength: Number(centre.length().toFixed(3)),
+          sphereRadiusMeters: Number(sphere.radius.toFixed(3)),
+          rootBoundingBox: summarizeBoundingBox(rootBox),
+          surfacePlacement: {
+            configuredAltitudeOffsetMeters,
+            siteBoundsMeters: siteBounds ? summarizeBox3(siteBounds) : null,
+            lowestPointAltitudeMeters:
+              siteBounds === null
+                ? null
+                : Number((alt + configuredAltitudeOffsetMeters + siteBounds.min.z).toFixed(3)),
+            highestPointAltitudeMeters:
+              siteBounds === null
+                ? null
+                : Number((alt + configuredAltitudeOffsetMeters + siteBounds.max.z).toFixed(3)),
+            offsetToPutLowestBoundOnMapSurfaceMeters:
+              siteBounds === null ? null : Number((-alt - siteBounds.min.z).toFixed(3)),
+          },
+          rootTransform: rootTransformSummary,
+          content: summarizeTilesetContent(root),
+          geometricErrorNormalization,
+          rendererTileOptions: {
+            errorTarget: TILE_ERROR_TARGET,
+            maxTilesProcessed: TILE_MAX_TILES_PROCESSED,
+            optimizedLoadStrategy: true,
+            loadSiblings: true,
+            cacheMinBytes: TILE_CACHE_MIN_BYTES,
+            cacheMaxBytes: TILE_CACHE_MAX_BYTES,
+          },
+          tilePrefetch,
+          sourceAxisDirectionsIfContentIsAlreadyZUp: axisDirections(sourceToMapNoCorrection),
+          sourceAxisDirectionsWithDefaultRendererCorrection: axisDirections(
+            sourceToMapWithDefaultCorrection,
+          ),
+          activeSourceAxisDirections: axisDirections(sourceToMapWithActiveCorrection),
+        });
+
+        setModelState("loaded");
+      };
+      tiles.addEventListener("load-tileset", onLoadTileset);
+      tiles.addEventListener("needs-update", () => {
+        map.triggerRepaint();
+      });
+      tiles.addEventListener("load-model", (event: any) => {
+        if (modelDiagnosticCount >= MODEL_DIAGNOSTIC_TILE_LIMIT || !tiles || !localTransform)
+          return;
+        modelDiagnosticCount += 1;
+        log3dTilesDiagnostic(
+          "model-content",
+          summarizeLoadedModelScene(event?.scene, event?.tile, tiles.group, localTransform),
+        );
+      });
+      tiles.addEventListener("tiles-load-end", () => {
+        if (tilesLoadEndLogged) return;
+        tilesLoadEndLogged = true;
+        log3dTilesDiagnostic("streaming-complete", summarizeTileStreaming(tiles));
+      });
+
+      // Seed localTransform with a placeholder so render() will call
+      // tiles.update() - which is what actually triggers the tileset.json
+      // fetch.  onLoadTileset replaces this with the real georeferencing.
+      localTransform = buildLocalTransform(0, 0, 0);
+
+      // load-error fires per failed asset.  Failing on the tileset itself is
+      // fatal; sporadic tile failures aren't (TilesRenderer retries cheaply
+      // on the next update).  Only flip to 'error' once a threshold is hit.
+      tiles.addEventListener("load-error", (event: any) => {
+        const url: string | undefined = event?.url;
+        const isTileset = !!url && url.endsWith("tileset.json");
+        log3dTilesDiagnostic("load-error", {
+          url,
+          isTileset,
+          error: event?.error,
+          stats: summarizeTileStreaming(tiles),
+        });
+        if (isTileset) {
+          // eslint-disable-next-line no-console
+          console.error("Failed to load tileset.json", event?.error);
+          if (!cancelled) setModelState("error");
+          return;
+        }
+        tileErrorCount += 1;
+        if (tileErrorCount >= MAX_TILE_ERRORS_BEFORE_FAIL && !cancelled) {
+          // eslint-disable-next-line no-console
+          console.error(`Aborting after ${tileErrorCount} tile load errors`);
+          setModelState("error");
+        }
+      });
+    }
+
+    const customLayer: CustomLayerInterface = {
+      id: "3d-tiles",
+      type: "custom",
+      renderingMode: "3d",
+      onAdd(mapArg, gl) {
+        camera = new THREE.PerspectiveCamera();
+        scene = new THREE.Scene();
+        scene.add(new THREE.AmbientLight(0xffffff, 3));
+
+        renderer = new THREE.WebGLRenderer({
+          canvas: mapArg.getCanvas(),
+          context: gl as WebGLRenderingContext,
+          antialias: true,
+        });
+        renderer.autoClear = false;
+
+        tilesCamera = new THREE.PerspectiveCamera();
+        initTiles(tilesetUrl, scene, tilesCamera, renderer);
+      },
+      // maplibre-gl v4: render(gl, matrix, options). The second argument is
+      // transform.customLayerMatrix(), i.e. the matrix for Mercator custom
+      // layer coordinates. options.modelViewProjectionMatrix uses MapLibre's
+      // internal world-space coordinates and must not be mixed with
+      // MercatorCoordinate.fromLngLat output.
+      render(_gl, matrix, options: CustomRenderMethodInput) {
+        if (!camera || !renderer || !scene || !localTransform || !tilesCamera) return;
+
+        camera.projectionMatrix.fromArray(Array.from(matrix as Iterable<number>));
+        camera.projectionMatrix.multiply(localTransform);
+
+        const P = matrixFromArray(options.projectionMatrix as Iterable<number>);
+        const V = new THREE.Matrix4().multiplyMatrices(P.clone().invert(), camera.projectionMatrix);
+
+        tilesCamera.projectionMatrix.copy(P);
+        tilesCamera.matrixWorldInverse.copy(V);
+        tilesCamera.matrixWorld.copy(V).invert();
+
+        renderer.resetState();
+        renderer.render(scene, camera);
+        tiles?.update();
+        map.triggerRepaint();
+      },
+    };
+
+    // HEAD check first: show placeholder immediately if tiles haven't been
+    // generated yet, without waiting for TilesRenderer to attempt a full load.
+    fetch(tilesetUrl, {
+      method: "HEAD",
+      headers: authHeaders,
+      signal: headAbort.signal,
+    })
+      .then((res) => {
+        if (cancelled) return;
+        if (res.status === 404) {
+          setModelState("unavailable");
+          return;
+        }
+        if (!res.ok) {
+          log3dTilesDiagnostic("HEAD failed", { status: res.status, statusText: res.statusText });
+          setModelState("error");
+          return;
+        }
+        setModelState("loading");
+        // style.load may have already fired by the time the HEAD resolves
+        if (map.isStyleLoaded()) {
+          if (!cancelled) map.addLayer(customLayer);
+        } else {
+          map.once("style.load", () => {
+            if (!cancelled) map.addLayer(customLayer);
+          });
+        }
+      })
+      .catch((err) => {
+        if (cancelled || err.name === "AbortError") return;
+        // eslint-disable-next-line no-console
+        console.error("3D tile HEAD probe failed", err);
+        setModelState("error");
+      });
+
+    return () => {
+      cancelled = true;
+      headAbort.abort();
+      // Tiles owns its WebGL geometries/textures and disposes them via the
+      // tile-manager when the renderer is removed from the scene.
+      tiles?.dispose();
+      tiles = null;
+      // KTX2/DRACO loaders own worker pools that must be torn down.
+      ktx2Loader?.dispose();
+      dracoLoader?.dispose();
+      ktx2Loader = null;
+      dracoLoader = null;
+      // Three.js renderer holds the GL context; map.remove() will too, but
+      // disposing here releases shaders/buffers explicitly.
+      renderer?.dispose();
+      renderer = null;
+      scene = null;
+      camera = null;
+      tilesCamera = null;
+      localTransform = null;
+      modelLocationRef.current = null;
+      map.remove();
+      mapRef.current = null;
+    };
+  }, [projectData, isFetching]);
+
+  const projectName = (projectData as Record<string, any>)?.name as string | undefined;
+
+  return (
+    <div className="naxatw-relative naxatw-flex naxatw-h-screen naxatw-flex-col">
+      <div className="naxatw-flex naxatw-items-center naxatw-gap-3 naxatw-border-b naxatw-bg-white naxatw-px-6 naxatw-py-3">
+        <button
+          type="button"
+          aria-label="Back to project"
+          className="material-icons naxatw-cursor-pointer naxatw-text-[#D73F3F] hover:naxatw-opacity-75"
+          onClick={() => navigate(`/projects/${id}`)}
+        >
+          arrow_back
+        </button>
+        <span className="naxatw-text-base naxatw-font-semibold naxatw-text-gray-800">
+          {projectName ? `${projectName} - 3D Model` : "3D Model Viewer"}
+        </span>
+      </div>
+
+      <div className="naxatw-relative naxatw-flex-1">
+        <div ref={mapContainerRef} className="naxatw-h-full naxatw-w-full" />
+
+        {modelState === "loaded" && (
+          <button
+            type="button"
+            aria-label="Re-centre on 3D model"
+            title="Re-centre on 3D model"
+            className="naxatw-absolute naxatw-right-4 naxatw-top-4 naxatw-z-10 naxatw-flex naxatw-h-10 naxatw-w-10 naxatw-cursor-pointer naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-bg-white naxatw-shadow-lg hover:naxatw-bg-gray-50"
+            onClick={handleRecenter}
+          >
+            <span className="material-icons naxatw-text-[#D73F3F]">center_focus_strong</span>
+          </button>
+        )}
+
+        {isFetching && (
+          <div className="naxatw-absolute naxatw-inset-0 naxatw-flex naxatw-items-center naxatw-justify-center naxatw-bg-white/70">
+            <span className="naxatw-text-sm naxatw-text-gray-600">Loading project…</span>
+          </div>
+        )}
+
+        {!isFetching && modelState === "loading" && (
+          <div className="naxatw-pointer-events-none naxatw-absolute naxatw-bottom-8 naxatw-left-1/2 naxatw-z-10 -naxatw-translate-x-1/2 naxatw-rounded naxatw-bg-white/90 naxatw-px-4 naxatw-py-2 naxatw-text-sm naxatw-text-gray-700 naxatw-shadow">
+            Loading 3D model…
+          </div>
+        )}
+
+        {!isFetching && modelState === "unavailable" && (
+          <div className="naxatw-absolute naxatw-inset-0 naxatw-flex naxatw-items-center naxatw-justify-center">
+            <div className="naxatw-rounded-lg naxatw-bg-white naxatw-p-8 naxatw-text-center naxatw-shadow-xl">
+              <span className="material-icons naxatw-mb-3 naxatw-block naxatw-text-4xl naxatw-text-gray-400">
+                view_in_ar
+              </span>
+              <p className="naxatw-text-base naxatw-font-semibold naxatw-text-gray-700">
+                3D model not yet generated
+              </p>
+              <p className="naxatw-mt-1 naxatw-text-sm naxatw-text-gray-500">
+                The 3D model will be available after it&apos;s been post-processed.
+              </p>
+            </div>
+          </div>
+        )}
+
+        {!isFetching && modelState === "error" && (
+          <div className="naxatw-absolute naxatw-inset-0 naxatw-flex naxatw-items-center naxatw-justify-center">
+            <div className="naxatw-rounded-lg naxatw-bg-white naxatw-p-8 naxatw-text-center naxatw-shadow-xl">
+              <span className="material-icons naxatw-mb-3 naxatw-block naxatw-text-4xl naxatw-text-red-500">
+                error_outline
+              </span>
+              <p className="naxatw-text-base naxatw-font-semibold naxatw-text-gray-700">
+                Failed to load 3D model
+              </p>
+              <p className="naxatw-mt-1 naxatw-text-sm naxatw-text-gray-500">
+                Try refreshing the page. If the problem persists, check the project&apos;s 3D tiles
+                in S3.
+              </p>
+            </div>
+          </div>
+        )}
+
+        {!isFetching && modelState === "loaded" && (
+          <div className="naxatw-pointer-events-none naxatw-absolute naxatw-bottom-8 naxatw-left-1/2 naxatw-z-10 -naxatw-translate-x-1/2 naxatw-rounded naxatw-bg-white/90 naxatw-px-4 naxatw-py-2 naxatw-text-sm naxatw-text-gray-600 naxatw-shadow">
+            Drag to pan · Scroll to zoom · Right-click drag to rotate
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default hasErrorBoundary(View3DModel);
diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
index 0ccd4b18..b3b64649 100644
--- a/src/frontend/vite.config.ts
+++ b/src/frontend/vite.config.ts
@@ -1,6 +1,7 @@
 import react from "@vitejs/plugin-react";
 import { domToCodePlugin } from "dom-to-code/vite";
 import { defineConfig } from "vite";
+import { viteStaticCopy } from "vite-plugin-static-copy";
 
 export default defineConfig({
   base: "/",
@@ -11,6 +12,20 @@ export default defineConfig({
           mode: "react",
         })
       : undefined,
+    // Self-host the DRACO and KTX2 decoders shipped with three.js so the 3D
+    // model viewer doesn't depend on an external CDN at runtime.
+    viteStaticCopy({
+      targets: [
+        {
+          src: "node_modules/three/examples/jsm/libs/draco/*",
+          dest: "three-libs/draco",
+        },
+        {
+          src: "node_modules/three/examples/jsm/libs/basis/*",
+          dest: "three-libs/basis",
+        },
+      ],
+    }),
   ],
   optimizeDeps: {
     esbuildOptions: {
diff --git a/src/pnpm-lock.yaml b/src/pnpm-lock.yaml
index deda1a0e..0938062f 100644
--- a/src/pnpm-lock.yaml
+++ b/src/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   frontend:
     dependencies:
+      3d-tiles-renderer:
+        specifier: ^0.4.24
+        version: 0.4.24(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(three@0.184.0)
       '@awesome.me/webawesome':
         specifier: 3.2.1
         version: 3.2.1(@floating-ui/utils@0.2.11)(@types/react@19.2.14)
@@ -200,6 +203,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.19)
+      three:
+        specifier: ^0.184.0
+        version: 0.184.0
       uuid:
         specifier: ^9.0.1
         version: 9.0.1
@@ -228,6 +234,9 @@ importers:
       '@types/react-transition-group':
         specifier: ^4.4.12
         version: 4.4.12(@types/react@19.2.14)
+      '@types/three':
+        specifier: ^0.184.1
+        version: 0.184.1
       '@typescript-eslint/eslint-plugin':
         specifier: ^5.62.0
         version: 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.2.0)(typescript@5.9.3))(eslint@8.2.0)(typescript@5.9.3)
@@ -279,6 +288,9 @@ importers:
       vite:
         specifier: ^5.4.11
         version: 5.4.21(@types/node@22.19.15)
+      vite-plugin-static-copy:
+        specifier: ^2.3.2
+        version: 2.3.2(vite@5.4.21(@types/node@22.19.15))
 
   gcp-editor:
     dependencies:
@@ -328,6 +340,29 @@ importers:
 
 packages:
 
+  3d-tiles-renderer@0.4.24:
+    resolution: {integrity: sha512-1n21vaWoV5e+N6rTfK1nv0Bsgu9ptbY6d9ICHnT6W1llloIhUGmGzx5/JH+B7t9XggjL0aJASn0Z5sFOXXvYjw==}
+    peerDependencies:
+      '@babylonjs/core': '>=8.0.0'
+      '@babylonjs/loaders': '>=8.0.0'
+      '@react-three/fiber': ^8.17.9 || ^9.0.0
+      react: ^18.3.1 || ^19.0.0
+      react-dom: ^18.3.1 || ^19.0.0
+      three: '>=0.167.0'
+    peerDependenciesMeta:
+      '@babylonjs/core':
+        optional: true
+      '@babylonjs/loaders':
+        optional: true
+      '@react-three/fiber':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      three:
+        optional: true
+
   '@alloc/quick-lru@5.2.0':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
@@ -972,6 +1007,9 @@ packages:
     peerDependencies:
       preact: '>=10.13.0'
 
+  '@dimforge/rapier3d-compat@0.12.0':
+    resolution: {integrity: sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==}
+
   '@emotion/is-prop-valid@1.4.0':
     resolution: {integrity: sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==}
 
@@ -2103,6 +2141,9 @@ packages:
   '@turf/truncate@5.1.5':
     resolution: {integrity: sha512-WjWGsRE6o1vUqULGb/O7O1eK6B4Eu6R/RBZWnF0rH0Os6WVel6tHktkeJdlKwz9WElIEO12wDIu6uKd54t7DDQ==}
 
+  '@tweenjs/tween.js@23.1.3':
+    resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -2179,12 +2220,18 @@ packages:
   '@types/semver@7.7.1':
     resolution: {integrity: sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==}
 
+  '@types/stats.js@0.17.4':
+    resolution: {integrity: sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==}
+
   '@types/stylis@4.2.7':
     resolution: {integrity: sha512-VgDNokpBoKF+wrdvhAAfS55OMQpL6QRglwTwNC3kIgBrzZxA4WsFj+2eLfEA/uMUDzBcEhYmjSbwQakn/i3ajA==}
 
   '@types/supercluster@7.1.3':
     resolution: {integrity: sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==}
 
+  '@types/three@0.184.1':
+    resolution: {integrity: sha512-6q4VdiqVsrTRqmk62/BnlcAvIrnDM0zf2ZDVKI5kZiniWrSaOHaQzmbp+BNzoggc/8tgW412pL//wZIxu2PPTA==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -2194,6 +2241,9 @@ packages:
   '@types/w3c-web-usb@1.0.13':
     resolution: {integrity: sha512-N2nSl3Xsx8mRHZBvMSdNGtzMyeleTvtlEw+ujujgXalPqOjIA6UtrqcB6OzyUjkTbDm3J7P1RNK1lgoO7jxtsw==}
 
+  '@types/webxr@0.5.24':
+    resolution: {integrity: sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==}
+
   '@typescript-eslint/eslint-plugin@5.62.0':
     resolution: {integrity: sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2390,6 +2440,7 @@ packages:
   '@xmldom/xmldom@0.9.8':
     resolution: {integrity: sha512-p96FSY54r+WJ50FIOsCOjyj/wavs8921hG5+kVMmZgKcvIKxMXHTrjNJvRgWa/zuX3B6t2lijLNFaOyuxUH+2A==}
     engines: {node: '>=14.6'}
+    deprecated: this version has critical issues, please update to the latest version
 
   '@yume-chan/adb-credential-web@2.1.0':
     resolution: {integrity: sha512-ps5XWt+xxm6Mi9eF80ePprPJ/uRFMhfR437betQE8hixrjdZpkZgMlqZU6GlnuebMi0djrbP8GWB49jJekJVYA==}
@@ -3117,6 +3168,9 @@ packages:
       picomatch:
         optional: true
 
+  fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+
   file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -3169,6 +3223,10 @@ packages:
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
+  fs-extra@11.3.5:
+    resolution: {integrity: sha512-eKpRKAovdpZtR1WopLHxlBWvAgPny3c4gX1G5Jhwmmw4XJj0ifSD5qB5TOo8hmA0wlRKDAOAhEE1yVPgs6Fgcg==}
+    engines: {node: '>=14.14'}
+
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -3276,6 +3334,9 @@ packages:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
 
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
@@ -3537,6 +3598,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  jsonfile@6.2.1:
+    resolution: {integrity: sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==}
+
   jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
@@ -3660,6 +3724,9 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  meshoptimizer@1.1.1:
+    resolution: {integrity: sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -3797,6 +3864,10 @@ packages:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
+  p-map@7.0.4:
+    resolution: {integrity: sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==}
+    engines: {node: '>=18'}
+
   p-queue@8.1.1:
     resolution: {integrity: sha512-aNZ+VfjobsWryoiPnEApGGmf5WmNsCo9xu8dfaYamG5qaLP7ClhLN6NgsFe6SwJ2UbLEBK5dv9x8Mn5+RVhMWQ==}
     engines: {node: '>=18'}
@@ -4546,6 +4617,9 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  three@0.184.0:
+    resolution: {integrity: sha512-wtTRjG92pM5eUg/KuUnHsqSAlPM296brTOcLgMRqEeylYTh/CdtvKUvCyyCQTzFuStieWxvZb8mVTMvdPyUpxg==}
+
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -4684,6 +4758,10 @@ packages:
     resolution: {integrity: sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ==}
     engines: {node: '>=4'}
 
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
   unplugin@0.10.2:
     resolution: {integrity: sha512-6rk7GUa4ICYjae5PrAllvcDeuT8pA9+j5J5EkxbMFaV+SalHhxZ7X2dohMzu6C3XzsMT+6jwR/+pwPNR3uK9MA==}
 
@@ -4739,6 +4817,12 @@ packages:
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
 
+  vite-plugin-static-copy@2.3.2:
+    resolution: {integrity: sha512-iwrrf+JupY4b9stBttRWzGHzZbeMjAHBhkrn67MNACXJVjEMRpCI10Q3AkxdBkl45IHaTfw/CNVevzQhP7yTwg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0
+
   vite@5.4.21:
     resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -4880,6 +4964,12 @@ packages:
 
 snapshots:
 
+  3d-tiles-renderer@0.4.24(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(three@0.184.0):
+    optionalDependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      three: 0.184.0
+
   '@alloc/quick-lru@5.2.0': {}
 
   '@asamuzakjp/css-color@5.0.1':
@@ -5710,6 +5800,8 @@ snapshots:
     dependencies:
       preact: 10.29.0
 
+  '@dimforge/rapier3d-compat@0.12.0': {}
+
   '@emotion/is-prop-valid@1.4.0':
     dependencies:
       '@emotion/memoize': 0.9.0
@@ -6741,6 +6833,8 @@ snapshots:
       '@turf/helpers': 5.1.5
       '@turf/meta': 5.2.0
 
+  '@tweenjs/tween.js@23.1.3': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.29.2
@@ -6821,18 +6915,31 @@ snapshots:
 
   '@types/semver@7.7.1': {}
 
+  '@types/stats.js@0.17.4': {}
+
   '@types/stylis@4.2.7': {}
 
   '@types/supercluster@7.1.3':
     dependencies:
       '@types/geojson': 7946.0.16
 
+  '@types/three@0.184.1':
+    dependencies:
+      '@dimforge/rapier3d-compat': 0.12.0
+      '@tweenjs/tween.js': 23.1.3
+      '@types/stats.js': 0.17.4
+      '@types/webxr': 0.5.24
+      fflate: 0.8.2
+      meshoptimizer: 1.1.1
+
   '@types/trusted-types@2.0.7': {}
 
   '@types/use-sync-external-store@0.0.6': {}
 
   '@types/w3c-web-usb@1.0.13': {}
 
+  '@types/webxr@0.5.24': {}
+
   '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.2.0)(typescript@5.9.3))(eslint@8.2.0)(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -8022,6 +8129,8 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.4
 
+  fflate@0.8.2: {}
+
   file-entry-cache@6.0.1:
     dependencies:
       flat-cache: 3.2.0
@@ -8067,6 +8176,12 @@ snapshots:
   fs-constants@1.0.0:
     optional: true
 
+  fs-extra@11.3.5:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.1
+      universalify: 2.0.1
+
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.3:
@@ -8191,6 +8306,8 @@ snapshots:
 
   gopd@1.2.0: {}
 
+  graceful-fs@4.2.11: {}
+
   graphemer@1.4.0: {}
 
   grid-index@1.1.0: {}
@@ -8443,6 +8560,12 @@ snapshots:
 
   json5@2.2.3: {}
 
+  jsonfile@6.2.1:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
   jsx-ast-utils@3.3.5:
     dependencies:
       array-includes: 3.1.9
@@ -8612,6 +8735,8 @@ snapshots:
 
   merge2@1.4.1: {}
 
+  meshoptimizer@1.1.1: {}
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -8754,6 +8879,8 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
+  p-map@7.0.4: {}
+
   p-queue@8.1.1:
     dependencies:
       eventemitter3: 5.0.4
@@ -9531,6 +9658,8 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  three@0.184.0: {}
+
   tiny-invariant@1.3.3: {}
 
   tinybench@2.9.0: {}
@@ -9666,6 +9795,8 @@ snapshots:
 
   unicode-property-aliases-ecmascript@2.2.0: {}
 
+  universalify@2.0.1: {}
+
   unplugin@0.10.2:
     dependencies:
       acorn: 8.16.0
@@ -9730,6 +9861,15 @@ snapshots:
       - supports-color
       - terser
 
+  vite-plugin-static-copy@2.3.2(vite@5.4.21(@types/node@22.19.15)):
+    dependencies:
+      chokidar: 3.6.0
+      fast-glob: 3.3.3
+      fs-extra: 11.3.5
+      p-map: 7.0.4
+      picocolors: 1.1.1
+      vite: 5.4.21(@types/node@22.19.15)
+
   vite@5.4.21(@types/node@22.19.15):
     dependencies:
       esbuild: 0.21.5