ProductViewer

1"use client"
2 
3import * as React from "react"
4import { useFrame } from "@react-three/fiber"
5import { OrbitControls, RoundedBox } from "@react-three/drei"
6import * as THREE from "three"
7 
8import {
9  SceneContainer,
10  type SceneContainerProps,
11} from "@/components/threecn/scene-container"
12import {
13  useShadcnTheme,
14  type ThemeMode,
15} from "@/components/hooks/use-shadcn-theme"
16 
17type ProductProps = {
18  autoRotate: boolean
19  autoRotateSpeed: number
20  metalness: number
21  roughness: number
22  theme: ThemeMode
23}
24 
25function Product({
26  autoRotate,
27  autoRotateSpeed,
28  metalness,
29  roughness,
30  theme,
31}: ProductProps) {
32  const groupRef = React.useRef<THREE.Group>(null)
33  const matRef = React.useRef<THREE.MeshStandardMaterial>(null)
34  const [hovered, setHovered] = React.useState(false)
35  const { primaryColor, accentColor, foregroundColor } = useShadcnTheme(theme)
36 
37  useFrame((_, delta) => {
38    if (!groupRef.current || !autoRotate) return
39    const target = hovered ? 0.15 : 1
40    groupRef.current.rotation.y += delta * 0.4 * autoRotateSpeed * target
41    groupRef.current.rotation.x = THREE.MathUtils.lerp(
42      groupRef.current.rotation.x,
43      hovered ? 0.1 : 0.25,
44      0.05
45    )
46  })
47 
48  return (
49    <group
50      ref={groupRef}
51      onPointerOver={(e) => {
52        e.stopPropagation()
53        setHovered(true)
54      }}
55      onPointerOut={() => setHovered(false)}
56    >
57      <RoundedBox args={[2.2, 2.2, 2.2]} radius={0.28} smoothness={6} castShadow>
58        <meshStandardMaterial
59          ref={matRef}
60          color={accentColor}
61          emissive={primaryColor}
62          emissiveIntensity={hovered ? 0.55 : 0.3}
63          metalness={metalness}
64          roughness={roughness}
65        />
66      </RoundedBox>
67      {/* subtle inner accent edge */}
68      <RoundedBox args={[2.24, 2.24, 2.24]} radius={0.3} smoothness={6}>
69        <meshStandardMaterial
70          color={foregroundColor}
71          transparent
72          opacity={0.04}
73          metalness={0.9}
74          roughness={0.1}
75          wireframe
76        />
77      </RoundedBox>
78    </group>
79  )
80}
81 
82export type ProductViewerProps = {
83  autoRotate?: boolean
84  autoRotateSpeed?: number
85  /** Material metalness (0–1). */
86  metalness?: number
87  /** Material roughness (0–1). */
88  roughness?: number
89  className?: string
90  theme?: ThemeMode
91  environment?: SceneContainerProps["environment"]
92}
93 
94/**
95 * A polished rounded volume that simulates a product. Drag to orbit; hovering
96// … truncated