36 lines
No EOL
1.2 KiB
TypeScript
36 lines
No EOL
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { Canvas } from '@react-three/fiber';
|
|
import { OrbitControls, Stage } from '@react-three/drei';
|
|
import { Suspense } from 'react';
|
|
import { EffectComposer, Bloom, Noise, Vignette } from '@react-three/postprocessing';
|
|
import { useAssetLoader } from '@/hooks/useAssetLoader';
|
|
import { Model } from './Model';
|
|
|
|
export default function ShowcaseCanvas() {
|
|
const { asset, loading, error } = useAssetLoader('/assets.json');
|
|
|
|
if (loading || error) return null;
|
|
|
|
return (
|
|
<div className="h-[500px] w-full border border-zinc-800 rounded-xl overflow-hidden bg-black">
|
|
<Canvas dpr={[1, 2]} shadows camera={{ fov: 45 }}>
|
|
<color attach="background" args={['#050505']} />
|
|
|
|
<Suspense fallback={null}>
|
|
<Stage intensity={0.5} environment="city">
|
|
{asset && <Model url={asset.modelUrl} />}
|
|
</Stage>
|
|
</Suspense>
|
|
|
|
<EffectComposer disableNormalPass>
|
|
<Bloom luminanceThreshold={1} mipmapBlur intensity={1.5} />
|
|
<Noise opacity={0.05} />
|
|
<Vignette eskil={false} offset={0.1} darkness={1.1} />
|
|
</EffectComposer>
|
|
|
|
<OrbitControls makeDefault />
|
|
</Canvas>
|
|
</div>
|
|
);
|
|
} |