update: add a physic scenne

src/world/Lighting.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
 import { useFrame } from "@react-three/fiber";
 import type { AmbientLight, DirectionalLight } from "three";
-import { Debug } from "@/utils/debug/Debug";
+import { useDebugFolder } from "@/hooks/debug/useDebugFolder";
 
 type LightingState = {
   ambientIntensity: number;
@@ -23,26 +23,13 @@ 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;
-    }
-
-    const folder = debug.createFolder("Lighting");
-
-    // null = already registered (StrictMode double-mount), skip adding controls
-    if (!folder) {
-      return;
-    }
-
+  useDebugFolder("Lighting", (folder) => {
     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");
-  }, []);
+  });
 
   useFrame(() => {
     if (ambient.current) {