ProductShowcase

1"use client"
2 
3import * as React from "react"
4import { useFrame } from "@react-three/fiber"
5import { ContactShadows, Float, OrbitControls } from "@react-three/drei"
6import * as THREE from "three"
7 
8import { SceneContainer } from "@/components/threecn/scene-container"
9import {
10  useShadcnTheme,
11  type ThemeMode,
12} from "@/components/hooks/use-shadcn-theme"
13 
14type ShowcaseProps = {
15  color?: string
16  metalness: number
17  roughness: number
18  theme: ThemeMode
19}
20 
21function Showcase({ color, metalness, roughness, theme }: ShowcaseProps) {
22  const groupRef = React.useRef<THREE.Group>(null)
23  const { primaryColor, accentColor, mutedColor, foregroundColor } =
24    useShadcnTheme(theme)
25 
26  const productColor = React.useMemo(
27    () => (color ? new THREE.Color(color) : primaryColor),
28    [color, primaryColor]
29  )
30 
31  useFrame((_, delta) => {
32    if (groupRef.current) groupRef.current.rotation.y += delta * 0.25
33  })
34 
35  return (
36    <group position={[0, -0.6, 0]}>
37      {/* circular pedestal */}
38      <mesh position={[0, -0.15, 0]} receiveShadow>
39        <cylinderGeometry args={[1.7, 1.85, 0.3, 64]} />
40        <meshStandardMaterial color={accentColor} metalness={0.4} roughness={0.6} />
41      </mesh>
42      <mesh position={[0, 0.01, 0]} receiveShadow>
43        <cylinderGeometry args={[1.55, 1.55, 0.04, 64]} />
44        <meshStandardMaterial color={mutedColor} metalness={0.2} roughness={0.8} />
45      </mesh>
46 
47      {/* the "product": a small composed object */}
48      <Float speed={2} rotationIntensity={0.2} floatIntensity={0.4}>
49        <group ref={groupRef} position={[0, 1.05, 0]}>
50          <mesh castShadow>
51            <torusKnotGeometry args={[0.55, 0.19, 160, 24]} />
52            <meshStandardMaterial
53              color={productColor}
54              emissive={productColor}
55              emissiveIntensity={0.22}
56              metalness={metalness}
57              roughness={roughness}
58            />
59          </mesh>
60          <mesh castShadow position={[0, 0, 0]}>
61            <icosahedronGeometry args={[0.34, 0]} />
62            <meshStandardMaterial
63              color={foregroundColor}
64              metalness={0.9}
65              roughness={0.1}
66            />
67          </mesh>
68        </group>
69      </Float>
70 
71      <ContactShadows
72        position={[0, -0.28, 0]}
73        opacity={0.45}
74        scale={7}
75        blur={2.6}
76        far={4}
77        resolution={512}
78        color="#000000"
79      />
80    </group>
81  )
82}
83 
84export type ProductShowcaseProps = {
85// … truncated