Tom Boullay
90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import type { ModelStats } from './SceneViewer'
|
|
|
|
interface ModelViewerProps {
|
|
url: string
|
|
assetUrls: Record<string, string>
|
|
filename: string
|
|
size: string
|
|
}
|
|
|
|
export default function ModelViewer({ url, assetUrls, filename, size }: ModelViewerProps) {
|
|
const canPreview = filename.toLowerCase().endsWith('.gltf')
|
|
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
|
|
|
|
let cancel = false
|
|
|
|
import('./SceneViewer').then((mod) => {
|
|
if (!cancel) setScene(() => mod.default)
|
|
})
|
|
|
|
return () => { cancel = true }
|
|
}, [canPreview])
|
|
|
|
if (!canPreview) {
|
|
return (
|
|
<div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden flex items-center justify-center">
|
|
<p className="text-sm text-gray-400 px-6 text-center">
|
|
La preview 3D locale n'est pas disponible pour les dossiers <span className="font-mono">model.gltf</span> avec fichiers associes.
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!Scene) {
|
|
return (
|
|
<div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden flex items-center justify-center">
|
|
<div className="w-6 h-6 border-2 border-gray-500 border-t-gray-300 rounded-full animate-spin" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden relative">
|
|
<div className="absolute top-3 left-3 z-10 flex items-center gap-2">
|
|
<span className="text-xs text-gray-400 font-mono bg-black-900/60 px-2 py-1 rounded">
|
|
{filename}
|
|
</span>
|
|
<span className="text-xs text-gray-500 bg-black-900/60 px-2 py-1 rounded">
|
|
{size}
|
|
</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">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>
|
|
)
|
|
}
|