Tom Boullay
40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { Suspense } from 'react'
|
|
import { Canvas } from '@react-three/fiber'
|
|
import { Stage, OrbitControls } from '@react-three/drei'
|
|
import { useLoader } from '@react-three/fiber'
|
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
|
|
|
|
function resolveAssetUrl(requestedUrl: string, assetUrls: Record<string, string>) {
|
|
if (requestedUrl.startsWith('blob:') || requestedUrl.startsWith('data:')) {
|
|
return requestedUrl
|
|
}
|
|
|
|
const cleanUrl = decodeURIComponent(requestedUrl.split(/[?#]/)[0] || '')
|
|
const filename = cleanUrl.split(/[\\/]/).pop()?.toLowerCase()
|
|
|
|
return filename ? assetUrls[filename] || requestedUrl : requestedUrl
|
|
}
|
|
|
|
function Model({ url, assetUrls }: { url: string; assetUrls: Record<string, string> }) {
|
|
const { scene } = useLoader(GLTFLoader, url, (loader) => {
|
|
loader.manager.setURLModifier((requestedUrl) => resolveAssetUrl(requestedUrl, assetUrls))
|
|
})
|
|
|
|
return <primitive object={scene} />
|
|
}
|
|
|
|
export default function SceneViewer({ url, assetUrls }: { url: string; assetUrls: Record<string, string> }) {
|
|
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} />
|
|
</Stage>
|
|
</Suspense>
|
|
<OrbitControls makeDefault autoRotate autoRotateSpeed={0.5} />
|
|
</Canvas>
|
|
)
|
|
}
|