feat: add player camera

src/world/Lighting.tsx

@@ -1,9 +1,80 @@
+import { useEffect, useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import type { AmbientLight, DirectionalLight } from "three";
+import { Debug } from "@/debug/Debug";
+
+type LightingState = {
+  ambientIntensity: number;
+  sunIntensity: number;
+  sunX: number;
+  sunY: number;
+  sunZ: number;
+};
+
+const LIGHTING_STATE: LightingState = {
+  ambientIntensity: 1.8,
+  sunIntensity: 2.8,
+  sunX: 60,
+  sunY: 80,
+  sunZ: 30,
+};
+
 export function Lighting(): React.JSX.Element {
+  const ambient = useRef<AmbientLight>(null);
+  const sun = useRef<DirectionalLight>(null);
+
+  useEffect(() => {
+    const debug = Debug.getInstance();
+
+    if (!debug.active) {
+      return undefined;
+    }
+
+    const folder = debug.createFolder("Lighting");
+
+    if (!folder) {
+      return undefined;
+    }
+
+    folder.add(LIGHTING_STATE, "ambientIntensity", 0, 5, 0.1).name("Ambient");
+    folder.add(LIGHTING_STATE, "sunIntensity", 0, 8, 0.1).name("Sun Intensity");
+    folder.add(LIGHTING_STATE, "sunX", -100, 100, 1).name("Sun X");
+    folder.add(LIGHTING_STATE, "sunY", 0, 150, 1).name("Sun Y");
+    folder.add(LIGHTING_STATE, "sunZ", -100, 100, 1).name("Sun Z");
+
+    return undefined;
+  }, []);
+
+  useFrame(() => {
+    if (ambient.current) {
+      ambient.current.intensity = LIGHTING_STATE.ambientIntensity;
+    }
+
+    if (sun.current) {
+      sun.current.position.set(
+        LIGHTING_STATE.sunX,
+        LIGHTING_STATE.sunY,
+        LIGHTING_STATE.sunZ,
+      );
+      sun.current.intensity = LIGHTING_STATE.sunIntensity;
+    }
+  });
+
   return (
     <>
+      <ambientLight
+        ref={ambient}
+        intensity={LIGHTING_STATE.ambientIntensity}
+        color="#dbeafe"
+      />
       <directionalLight
-        position={[60, 80, 30]}
-        intensity={2.8}
+        ref={sun}
+        position={[
+          LIGHTING_STATE.sunX,
+          LIGHTING_STATE.sunY,
+          LIGHTING_STATE.sunZ,
+        ]}
+        intensity={LIGHTING_STATE.sunIntensity}
         color="#fff7ed"
         castShadow
       />