new

components/three/Models.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { useGLTF } from '@react-three/drei';
+
+export function Model({ url }: { url: string }) {
+  const { scene } = useGLTF(url);
+  return <primitive object={scene} />;
+}

components/three/ShowcaseCanvas.tsx

@@ -0,0 +1,36 @@
+'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>
+  );
+}

hooks/useAssetLoader.ts

@@ -0,0 +1,24 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export function useAssetLoader(url: string) {
+  const [asset, setAsset] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+        setAsset(data);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError(true);
+        setLoading(false);
+      });
+  }, [url]);
+
+  return { asset, loading, error };
+}

package.json

@@ -9,9 +9,14 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.6.1",
+    "@react-three/postprocessing": "^3.0.4",
+    "@types/three": "^0.184.1",
     "next": "16.2.7",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "three": "^0.184.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

public/assets.json

@@ -0,0 +1,7 @@
+{
+  "id": "nike-shoe-001",
+  "name": "Nike Shoe",
+  "modelUrl": "/models/shoe.glb",
+  "category": "Footwear",
+  "price": 120.00
+}