refactor: move game map into world folder

src/world/GameMap.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState, useRef } from "react";
+import { useGLTF } from "@react-three/drei";
+import * as THREE from "three";
+import { useOctreeGraphNode } from "@/hooks/useOctreeGraphNode";
+import { loadMapSceneData } from "@/utils/loadMapSceneData";
+import type { OctreeReadyHandler } from "@/types/3d";
+import type { MapNode } from "@/types/editor";
+
+interface GameMapProps {
+  onOctreeReady: OctreeReadyHandler;
+}
+
+export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
+  const [mapNodes, setMapNodes] = useState<MapNode[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const groupRef = useRef<THREE.Group>(null);
+
+  useOctreeGraphNode(groupRef, onOctreeReady);
+
+  useEffect(() => {
+    const loadMap = async () => {
+      try {
+        const sceneData = await loadMapSceneData();
+        if (!sceneData) {
+          console.warn("map.json not found");
+          setIsLoading(false);
+          return;
+        }
+
+        setMapNodes(
+          sceneData.mapNodes.filter((node) => sceneData.models.has(node.name)),
+        );
+      } catch (error) {
+        console.error("Error loading map:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadMap();
+  }, []);
+
+  if (isLoading) {
+    return <></>;
+  }
+
+  return (
+    <group ref={groupRef}>
+      {mapNodes.map((node, index) => (
+        <ModelInstance key={index} node={node} />
+      ))}
+    </group>
+  );
+}
+
+function ModelInstance({ node }: { node: MapNode }): React.JSX.Element {
+  const modelPath = `/models/${node.name}/model.gltf`;
+  const groupRef = useRef<THREE.Group>(null);
+  const { scene } = useGLTF(modelPath);
+  const { position, rotation, scale } = node;
+
+  useEffect(() => {
+    if (groupRef.current) {
+      groupRef.current.position.set(...position);
+      groupRef.current.rotation.set(...rotation);
+      groupRef.current.scale.set(...scale);
+    }
+  }, [position, rotation, scale]);
+
+  return (
+    <primitive
+      ref={groupRef}
+      object={scene}
+      position={position}
+      rotation={rotation}
+      scale={scale}
+    />
+  );
+}

src/world/Map.tsx

@@ -1,55 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useThree } from "@react-three/fiber";
-import { useGLTF } from "@react-three/drei";
-import * as THREE from "three";
-import { MAP_DEBUG_BOX_HELPER_COLOR } from "@/data/debugConfig";
-import { useOctreeGraphNode } from "@/hooks/useOctreeGraphNode";
-import type { OctreeReadyHandler } from "@/types/3d";
-import { Debug } from "@/utils/debug/Debug";
-
-const MAP_PATH = "/models/map/model.gltf";
-
-interface MapProps {
-  onOctreeReady: OctreeReadyHandler;
-}
-
-export function Map({ onOctreeReady }: MapProps): React.JSX.Element {
-  const { scene: gltfScene } = useGLTF(MAP_PATH);
-  const groupRef = useRef<THREE.Group>(null);
-  const boxHelpersRef = useRef<THREE.BoxHelper[]>([]);
-  const { scene } = useThree();
-
-  useOctreeGraphNode(groupRef, onOctreeReady);
-
-  useEffect(() => {
-    const debug = Debug.getInstance();
-    if (!debug.active || !groupRef.current) return;
-
-    const helpers: THREE.BoxHelper[] = [];
-
-    groupRef.current.traverse((child) => {
-      if (!(child instanceof THREE.Mesh)) return;
-      const helper = new THREE.BoxHelper(child, MAP_DEBUG_BOX_HELPER_COLOR);
-      scene.add(helper);
-      helpers.push(helper);
-    });
-
-    boxHelpersRef.current = helpers;
-
-    return () => {
-      helpers.forEach((h) => {
-        scene.remove(h);
-        h.dispose();
-      });
-      boxHelpersRef.current = [];
-    };
-  }, [scene]);
-
-  return (
-    <group ref={groupRef}>
-      <primitive object={gltfScene} />
-    </group>
-  );
-}
-
-useGLTF.preload(MAP_PATH);

src/world/World.tsx

@@ -10,7 +10,7 @@ import { DebugCameraControls } from "@/utils/debug/scene/DebugCameraControls";
 import { DebugHelpers } from "@/utils/debug/scene/DebugHelpers";
 import { Environment } from "@/world/Environment";
 import { Lighting } from "@/world/Lighting";
-import { GameMap } from "@/components/game/GameMap";
+import { GameMap } from "@/world/GameMap";
 import { PlayerComponent } from "@/world/player/PlayerComponent";
 import { TestScene } from "@/world/debug/TestScene";