refactor: move game map into world folder

This commit is contained in:
Tom Boullay
2026-04-28 09:47:09 +02:00
parent d7425ac17d
commit b8f6fe59db
7 changed files with 7 additions and 62 deletions
+79
View File
@@ -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}
/>
);
}