feat: add model hierarchy panel

components/ModelViewer.tsx

@@ -2,7 +2,7 @@
 
 import { Component, useEffect, useState } from 'react'
 import type { ComponentType, ReactNode } from 'react'
-import type { ModelStats } from './SceneViewer'
+import type { ModelHierarchyNode, ModelStats } from './SceneViewer'
 
 interface ModelViewerProps {
   url: string
@@ -28,6 +28,95 @@ function PreviewFallback({ message }: { message?: string }) {
   )
 }
 
+function formatTransformValue(value: number) {
+  return Number.isInteger(value) ? String(value) : value.toFixed(4).replace(/0+$/, '').replace(/\.$/, '')
+}
+
+function formatTransform(values: [number, number, number]) {
+  return `[${values.map(formatTransformValue).join(', ')}]`
+}
+
+function countHierarchyNodes(node: ModelHierarchyNode): number {
+  return 1 + node.children.reduce((count, child) => count + countHierarchyNodes(child), 0)
+}
+
+function HierarchyTree({
+  node,
+  depth = 0,
+}: {
+  node: ModelHierarchyNode
+  depth?: number
+}) {
+  const hasChildren = node.children.length > 0
+
+  return (
+    <div>
+      <div
+        className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 py-1 text-xs"
+        style={{ paddingLeft: `${depth * 14}px` }}
+      >
+        <div className="min-w-0">
+          <div className="flex min-w-0 items-center gap-1.5">
+            <span className="w-3 shrink-0 text-gray-500">{hasChildren ? 'v' : '-'}</span>
+            <span className="truncate font-semibold text-gray-200">{node.name}</span>
+            <span className="shrink-0 text-[10px] text-gray-500">{node.type}</span>
+          </div>
+          <div className="ml-4 mt-0.5 flex flex-wrap gap-x-4 gap-y-1 font-mono text-[10px] text-gray-600">
+            <span>pos {formatTransform(node.position)}</span>
+            <span>rot {formatTransform(node.rotation)}</span>
+          </div>
+        </div>
+        <span className={`rounded-full border px-2 py-0.5 text-[10px] ${
+          node.visible
+            ? 'border-white/10 bg-white/5 text-gray-400'
+            : 'border-red-500/20 bg-red-500/10 text-red-300'
+        }`}
+        >
+          {node.visible ? 'Visible' : 'Hidden'}
+        </span>
+      </div>
+      {hasChildren && (
+        <div className="border-l border-white/10">
+          {node.children.map((child) => (
+            <HierarchyTree key={child.id} node={child} depth={depth + 1} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function HierarchyPanel({
+  hierarchy,
+  onClose,
+}: {
+  hierarchy: ModelHierarchyNode
+  onClose: () => void
+}) {
+  const nodeCount = countHierarchyNodes(hierarchy)
+
+  return (
+    <div className="absolute inset-y-3 right-3 z-30 flex w-[min(22rem,calc(100%-1.5rem))] flex-col overflow-hidden rounded-xl border border-white/15 bg-black-900/90 text-gray-300 shadow-2xl backdrop-blur">
+      <div className="flex items-center justify-between border-b border-white/10 px-3 py-2">
+        <div>
+          <p className="text-xs font-semibold text-gray-100">Hierarchy</p>
+          <p className="text-[10px] text-gray-600">{nodeCount} nodes</p>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="rounded-full border border-white/10 px-2 py-1 text-xs text-gray-400 transition hover:bg-white/10 hover:text-gray-100"
+        >
+          Close
+        </button>
+      </div>
+      <div className="flex-1 overflow-auto px-3 py-2">
+        <HierarchyTree node={hierarchy} />
+      </div>
+    </div>
+  )
+}
+
 class PreviewErrorBoundary extends Component<
   { children: ReactNode },
   { message: string | null }
@@ -54,11 +143,14 @@ class PreviewErrorBoundary extends Component<
 export default function ModelViewer({ url, assetUrls, filename, size }: ModelViewerProps) {
   const canPreview = filename.toLowerCase().endsWith('.gltf')
   const [stats, setStats] = useState<ModelStats | null>(null)
+  const [hierarchy, setHierarchy] = useState<ModelHierarchyNode | null>(null)
+  const [hierarchyOpen, setHierarchyOpen] = useState(false)
   const [sceneError, setSceneError] = useState<string | null>(null)
   const [Scene, setScene] = useState<ComponentType<{
     url: string
     assetUrls: Record<string, string>
     onStatsReady: (stats: ModelStats) => void
+    onHierarchyReady: (hierarchy: ModelHierarchyNode) => void
   }> | null>(null)
 
   useEffect(() => {
@@ -67,6 +159,8 @@ export default function ModelViewer({ url, assetUrls, filename, size }: ModelVie
     let cancel = false
     setSceneError(null)
     setStats(null)
+    setHierarchy(null)
+    setHierarchyOpen(false)
 
     import('./SceneViewer')
       .then((mod) => {
@@ -108,38 +202,56 @@ export default function ModelViewer({ url, assetUrls, filename, size }: ModelVie
         </span>
       </div>
       {stats && (
-        <div className="absolute top-3 right-3 z-10 flex w-44 flex-col gap-1.5 rounded-lg border border-white/10 bg-black-900/75 p-2 text-xs text-gray-300 backdrop-blur">
-          <span className="flex justify-between gap-3">
-            <span className="text-gray-500">Draw calls</span>
-            <span className="font-mono text-gray-200">{stats.drawCalls}</span>
-          </span>
-          <span className="flex justify-between gap-3">
-            <span className="text-gray-500">Children</span>
-            <span className="font-mono text-gray-200">{stats.childObjects}</span>
-          </span>
-          <span className="flex justify-between gap-3">
-            <span className="text-gray-500">Meshes</span>
-            <span className="font-mono text-gray-200">{stats.meshes}</span>
-          </span>
-          <span className="flex justify-between gap-3">
-            <span className="text-gray-500">Triangles</span>
-            <span className="font-mono text-gray-200">{stats.triangles.toLocaleString('fr-FR')}</span>
-          </span>
-          <span className="flex justify-between gap-3">
-            <span className="text-gray-500">Materials</span>
-            <span className="font-mono text-gray-200">{stats.materials}</span>
-          </span>
-          <span className="flex justify-between gap-3">
-            <span className="text-gray-500">Textures</span>
-            <span className="font-mono text-gray-200">{stats.textures}</span>
-          </span>
+        <div className="absolute top-3 right-3 z-20 flex w-44 flex-col gap-2">
+          <div className="flex flex-col gap-1.5 rounded-lg border border-white/10 bg-black-900/75 p-2 text-xs text-gray-300 backdrop-blur">
+            <span className="flex justify-between gap-3">
+              <span className="text-gray-500">Draw calls</span>
+              <span className="font-mono text-gray-200">{stats.drawCalls}</span>
+            </span>
+            <span className="flex justify-between gap-3">
+              <span className="text-gray-500">Children</span>
+              <span className="font-mono text-gray-200">{stats.childObjects}</span>
+            </span>
+            <span className="flex justify-between gap-3">
+              <span className="text-gray-500">Meshes</span>
+              <span className="font-mono text-gray-200">{stats.meshes}</span>
+            </span>
+            <span className="flex justify-between gap-3">
+              <span className="text-gray-500">Triangles</span>
+              <span className="font-mono text-gray-200">{stats.triangles.toLocaleString('fr-FR')}</span>
+            </span>
+            <span className="flex justify-between gap-3">
+              <span className="text-gray-500">Materials</span>
+              <span className="font-mono text-gray-200">{stats.materials}</span>
+            </span>
+            <span className="flex justify-between gap-3">
+              <span className="text-gray-500">Textures</span>
+              <span className="font-mono text-gray-200">{stats.textures}</span>
+            </span>
+          </div>
+          <button
+            type="button"
+            disabled={!hierarchy}
+            onClick={() => setHierarchyOpen((open) => !open)}
+            className="rounded-lg border border-white/10 bg-black-900/75 px-3 py-1.5 text-xs font-medium text-gray-300 backdrop-blur transition hover:bg-white/10 hover:text-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            Hierarchy
+          </button>
         </div>
       )}
+      {hierarchy && hierarchyOpen && (
+        <HierarchyPanel hierarchy={hierarchy} onClose={() => setHierarchyOpen(false)} />
+      )}
       {sceneError ? (
         <PreviewFallback message={sceneError} />
       ) : (
         <PreviewErrorBoundary key={url}>
-          <Scene url={url} assetUrls={assetUrls} onStatsReady={setStats} />
+          <Scene
+            url={url}
+            assetUrls={assetUrls}
+            onStatsReady={setStats}
+            onHierarchyReady={setHierarchy}
+          />
         </PreviewErrorBoundary>
       )}
     </div>

components/SceneViewer.tsx

@@ -18,6 +18,16 @@ export interface ModelStats {
   triangles: number
 }
 
+export interface ModelHierarchyNode {
+  children: ModelHierarchyNode[]
+  id: string
+  name: string
+  position: [number, number, number]
+  rotation: [number, number, number]
+  type: string
+  visible: boolean
+}
+
 interface OpacityMapEntry {
   target: string
   url: string
@@ -207,6 +217,30 @@ function getModelStats(scene: Object3D, assetUrls: Record<string, string>): Mode
   }
 }
 
+function roundTransformValue(value: number) {
+  return Number(value.toFixed(4))
+}
+
+function getObjectHierarchy(object: Object3D): ModelHierarchyNode {
+  return {
+    children: object.children.map(getObjectHierarchy),
+    id: object.uuid,
+    name: object.name || object.type,
+    position: [
+      roundTransformValue(object.position.x),
+      roundTransformValue(object.position.y),
+      roundTransformValue(object.position.z),
+    ],
+    rotation: [
+      roundTransformValue(object.rotation.x),
+      roundTransformValue(object.rotation.y),
+      roundTransformValue(object.rotation.z),
+    ],
+    type: object.type,
+    visible: object.visible,
+  }
+}
+
 function pickOpacityMap(
   mesh: Mesh,
   material: Material,
@@ -234,10 +268,12 @@ function Model({
   url,
   assetUrls,
   onStatsReady,
+  onHierarchyReady,
 }: {
   url: string
   assetUrls: Record<string, string>
   onStatsReady: (stats: ModelStats) => void
+  onHierarchyReady: (hierarchy: ModelHierarchyNode) => void
 }) {
   const { scene } = useLoader(GLTFLoader, url, (loader) => {
     loader.manager.setURLModifier((requestedUrl) => resolveAssetUrl(requestedUrl, assetUrls))
@@ -247,7 +283,8 @@ function Model({
 
   useEffect(() => {
     onStatsReady(getModelStats(scene, assetUrls))
-  }, [assetUrls, onStatsReady, scene])
+    onHierarchyReady(getObjectHierarchy(scene))
+  }, [assetUrls, onHierarchyReady, onStatsReady, scene])
 
   useEffect(() => {
     if (opacityMapEntries.length === 0) return
@@ -270,16 +307,23 @@ export default function SceneViewer({
   url,
   assetUrls,
   onStatsReady,
+  onHierarchyReady,
 }: {
   url: string
   assetUrls: Record<string, string>
   onStatsReady: (stats: ModelStats) => void
+  onHierarchyReady: (hierarchy: ModelHierarchyNode) => void
 }) {
   return (
     <Canvas dpr={[1, 2]} camera={{ fov: 50 }}>
       <Suspense fallback={null}>
         <Stage environment="city" intensity={0.6} adjustCamera={1.2}>
-          <Model url={url} assetUrls={assetUrls} onStatsReady={onStatsReady} />
+          <Model
+            url={url}
+            assetUrls={assetUrls}
+            onStatsReady={onStatsReady}
+            onHierarchyReady={onHierarchyReady}
+          />
         </Stage>
       </Suspense>
       <OrbitControls makeDefault autoRotate autoRotateSpeed={0.5} />