SceneContainer

1"use client"
2 
3import * as React from "react"
4import { Canvas } from "@react-three/fiber"
5import { OrbitControls } from "@react-three/drei"
6 
7import { cn } from "@/lib/utils"
8import {
9  useShadcnTheme,
10  type ThemeMode,
11} from "@/components/hooks/use-shadcn-theme"
12 
13export type EnvironmentPreset = "studio" | "city" | "dawn" | "night"
14 
15type LightRig = {
16  ambient: { color: string; intensity: number }
17  key: { color: string; intensity: number; position: [number, number, number] }
18  fill: { color: string; intensity: number; position: [number, number, number] }
19  rim: { color: string; intensity: number; position: [number, number, number] }
20}
21 
22/**
23 * Offline lighting rigs. We avoid drei's <Environment preset> because it
24 * fetches HDRIs from a CDN — scenes must work with zero external assets.
25 */
26const RIGS: Record<EnvironmentPreset, LightRig> = {
27  studio: {
28    ambient: { color: "#ffffff", intensity: 0.6 },
29    key: { color: "#ffffff", intensity: 2.2, position: [5, 6, 5] },
30    fill: { color: "#dfe3ff", intensity: 0.8, position: [-6, 2, 4] },
31    rim: { color: "#ffffff", intensity: 1.4, position: [0, 4, -6] },
32  },
33  city: {
34    ambient: { color: "#c7d2fe", intensity: 0.7 },
35    key: { color: "#e0e7ff", intensity: 1.8, position: [4, 7, 4] },
36    fill: { color: "#a5b4fc", intensity: 0.9, position: [-5, 1, 5] },
37    rim: { color: "#818cf8", intensity: 1.2, position: [-2, 3, -6] },
38  },
39  dawn: {
40    ambient: { color: "#fde2c8", intensity: 0.5 },
41    key: { color: "#ffb27a", intensity: 2.0, position: [6, 4, 4] },
42    fill: { color: "#9fb4ff", intensity: 0.7, position: [-5, 2, 4] },
43    rim: { color: "#ffd9a8", intensity: 1.0, position: [0, 5, -5] },
44  },
45  night: {
46    ambient: { color: "#1e1b4b", intensity: 0.4 },
47    key: { color: "#a78bfa", intensity: 1.6, position: [4, 5, 4] },
48    fill: { color: "#4338ca", intensity: 0.6, position: [-5, 1, 4] },
49    rim: { color: "#7c3aed", intensity: 1.6, position: [-2, 3, -6] },
50  },
51}
52 
53function Rig({
54  preset,
55  fog,
56  theme,
57}: {
58  preset: EnvironmentPreset
59  fog: boolean
60  theme: ThemeMode
61}) {
62  const { bgColor } = useShadcnTheme(theme)
63  const rig = RIGS[preset]
64 
65  return (
66    <>
67      {fog ? <fog attach="fog" args={[bgColor.getHex(), 8, 24]} /> : null}
68      <ambientLight color={rig.ambient.color} intensity={rig.ambient.intensity} />
69      <directionalLight
70        color={rig.key.color}
71        intensity={rig.key.intensity}
72        position={rig.key.position}
73      />
74      <directionalLight
75// … truncated