Tom Boullay
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { Suspense } from 'react'
|
|
import { Canvas } from '@react-three/fiber'
|
|
import { Stage, OrbitControls, useGLTF } from '@react-three/drei'
|
|
|
|
function Model({ url }: { url: string }) {
|
|
const { scene } = useGLTF(url)
|
|
return <primitive object={scene} />
|
|
}
|
|
|
|
function Loader() {
|
|
return (
|
|
<div className="absolute inset-0 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>
|
|
)
|
|
}
|
|
|
|
interface ModelViewerProps {
|
|
url: string
|
|
filename: string
|
|
size: string
|
|
}
|
|
|
|
export default function ModelViewer({ url, filename, size }: ModelViewerProps) {
|
|
return (
|
|
<div className="w-full h-[450px] bg-black-800 border border-black-700 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>
|
|
<Canvas shadows dpr={[1, 2]} camera={{ fov: 50 }}>
|
|
<Suspense fallback={null}>
|
|
<Stage environment="city" intensity={0.6} adjustCamera={1.2}>
|
|
<Model url={url} />
|
|
</Stage>
|
|
</Suspense>
|
|
<OrbitControls makeDefault autoRotate autoRotateSpeed={0.5} />
|
|
</Canvas>
|
|
</div>
|
|
)
|
|
} |