From 3fac43d5f119699eea5d089475aad3a617d320ae Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Tue, 28 Apr 2026 10:52:05 +0200 Subject: [PATCH] Create Map.tsx --- src/world/Map.tsx | 55 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 src/world/Map.tsx diff --git a/src/world/Map.tsx b/src/world/Map.tsx new file mode 100644 index 0000000..58fcaaf --- /dev/null +++ b/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(null); + const boxHelpersRef = useRef([]); + 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 ( + + + + ); +} + +useGLTF.preload(MAP_PATH); \ No newline at end of file