65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
import { useThree } from "@react-three/fiber";
|
|
import { useGLTF } from "@react-three/drei";
|
|
import * as THREE from "three";
|
|
import { Octree } from "three/addons/math/Octree.js";
|
|
import { Debug } from "@/utils/debug/Debug";
|
|
|
|
const MAP_PATH = "/models/map/model.gltf";
|
|
|
|
interface MapProps {
|
|
onOctreeReady: (octree: Octree) => void;
|
|
}
|
|
|
|
export function Map({ onOctreeReady }: MapProps): React.JSX.Element {
|
|
const { scene: gltfScene } = useGLTF(MAP_PATH);
|
|
const groupRef = useRef<THREE.Group>(null);
|
|
const octreeBuilt = useRef(false);
|
|
const boxHelpersRef = useRef<THREE.BoxHelper[]>([]);
|
|
const { scene } = useThree();
|
|
|
|
useEffect(() => {
|
|
if (octreeBuilt.current || !groupRef.current) return;
|
|
octreeBuilt.current = true;
|
|
|
|
groupRef.current.updateMatrixWorld(true);
|
|
|
|
const octree = new Octree();
|
|
octree.fromGraphNode(groupRef.current);
|
|
onOctreeReady(octree);
|
|
}, [onOctreeReady]);
|
|
|
|
// BoxHelper wireframes in debug mode — one per mesh in the model
|
|
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, 0x00ff88);
|
|
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);
|