feat: add model stats helper to viewer

components/ModelViewer.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+import type { ModelStats } from './SceneViewer'
 
 interface ModelViewerProps {
   url: string
@@ -11,7 +12,12 @@ interface ModelViewerProps {
 
 export default function ModelViewer({ url, assetUrls, filename, size }: ModelViewerProps) {
   const canPreview = filename.toLowerCase().endsWith('.gltf')
-  const [Scene, setScene] = useState<React.ComponentType<{ url: string; assetUrls: Record<string, string> }> | null>(null)
+  const [stats, setStats] = useState<ModelStats | null>(null)
+  const [Scene, setScene] = useState<React.ComponentType<{
+    url: string
+    assetUrls: Record<string, string>
+    onStatsReady: (stats: ModelStats) => void
+  }> | null>(null)
 
   useEffect(() => {
     if (!canPreview) return
@@ -53,7 +59,31 @@ export default function ModelViewer({ url, assetUrls, filename, size }: ModelVie
           {size}
         </span>
       </div>
-      <Scene url={url} assetUrls={assetUrls} />
+      {stats && (
+        <div className="absolute bottom-3 left-3 right-3 z-10 grid grid-cols-2 gap-2 rounded-lg border border-white/10 bg-black-900/75 p-2 text-xs text-gray-300 backdrop-blur sm:left-auto sm:right-3 sm:w-64">
+          <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">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>
+      )}
+      <Scene url={url} assetUrls={assetUrls} onStatsReady={setStats} />
     </div>
   )
 }