Create Map.tsx

src/world/Map.tsx

@@ -0,0 +1,55 @@
+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);