diff --git a/components/ModelViewer.tsx b/components/ModelViewer.tsx
index 0b379c3..808881a 100644
--- a/components/ModelViewer.tsx
+++ b/components/ModelViewer.tsx
@@ -2,7 +2,7 @@
import { Component, useEffect, useState } from 'react'
import type { ComponentType, ReactNode } from 'react'
-import type { ModelHierarchyNode, ModelStats } from './SceneViewer'
+import type { ModelHierarchyNode, ModelStats, SceneViewerProps } from '@/lib/client-types'
interface ModelViewerProps {
url: string
@@ -11,6 +11,21 @@ interface ModelViewerProps {
size: string
}
+const VIEWER_FRAME_CLASS = 'w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden'
+const CENTERED_VIEWER_FRAME_CLASS = `${VIEWER_FRAME_CLASS} flex items-center justify-center`
+
+const MODEL_STAT_ROWS = [
+ { label: 'Draw calls', getValue: (stats: ModelStats) => stats.drawCalls },
+ { label: 'Children', getValue: (stats: ModelStats) => stats.childObjects },
+ { label: 'Meshes', getValue: (stats: ModelStats) => stats.meshes },
+ { label: 'Triangles', getValue: (stats: ModelStats) => stats.triangles.toLocaleString('fr-FR') },
+ { label: 'Materials', getValue: (stats: ModelStats) => stats.materials },
+ { label: 'Textures', getValue: (stats: ModelStats) => stats.textures },
+] satisfies Array<{
+ label: string
+ getValue: (stats: ModelStats) => number | string
+}>
+
function getPreviewErrorMessage(error: unknown) {
return error instanceof Error ? error.message : 'Erreur preview inconnue'
}
@@ -117,6 +132,19 @@ function HierarchyPanel({
)
}
+function ModelStatsPanel({ stats }: { stats: ModelStats }) {
+ return (
+
+ {MODEL_STAT_ROWS.map(({ label, getValue }) => (
+
+ {label}
+ {getValue(stats)}
+
+ ))}
+
+ )
+}
+
class PreviewErrorBoundary extends Component<
{ children: ReactNode },
{ message: string | null }
@@ -146,12 +174,7 @@ export default function ModelViewer({ url, assetUrls, filename, size }: ModelVie
const [hierarchy, setHierarchy] = useState(null)
const [hierarchyOpen, setHierarchyOpen] = useState(false)
const [sceneError, setSceneError] = useState(null)
- const [Scene, setScene] = useState
- onStatsReady: (stats: ModelStats) => void
- onHierarchyReady: (hierarchy: ModelHierarchyNode) => void
- }> | null>(null)
+ const [Scene, setScene] = useState | null>(null)
useEffect(() => {
if (!canPreview) return
@@ -175,7 +198,7 @@ export default function ModelViewer({ url, assetUrls, filename, size }: ModelVie
if (!canPreview) {
return (
-
+
La preview 3D locale n'est pas disponible pour les dossiers model.gltf avec fichiers associes.
@@ -185,14 +208,14 @@ export default function ModelViewer({ url, assetUrls, filename, size }: ModelVie
if (!Scene) {
return (
-
+
)
}
return (
-
+
{filename}
@@ -203,32 +226,7 @@ export default function ModelViewer({ url, assetUrls, filename, size }: ModelVie
{stats && (
-
-
- Draw calls
- {stats.drawCalls}
-
-
- Children
- {stats.childObjects}
-
-
- Meshes
- {stats.meshes}
-
-
- Triangles
- {stats.triangles.toLocaleString('fr-FR')}
-
-
- Materials
- {stats.materials}
-
-
- Textures
- {stats.textures}
-
-
+