fix runtime map loading lifecycle

This commit is contained in:
Tom Boullay
2026-04-28 14:42:49 +02:00
parent e01d6f27ba
commit 19bad2c8be
7 changed files with 65 additions and 44 deletions
+6 -1
View File
@@ -7,9 +7,14 @@ import type { OctreeReadyHandler } from "@/types/3d";
export function useOctreeGraphNode(
graphNodeRef: RefObject<Object3D | null>,
onOctreeReady: OctreeReadyHandler,
rebuildKey: string | number = 0,
): void {
const octreeBuilt = useRef(false);
useEffect(() => {
octreeBuilt.current = false;
}, [rebuildKey]);
useEffect(() => {
const graphNode = graphNodeRef.current;
if (octreeBuilt.current || !graphNode) return;
@@ -20,5 +25,5 @@ export function useOctreeGraphNode(
const octree = new Octree();
octree.fromGraphNode(graphNode);
onOctreeReady(octree);
}, [graphNodeRef, onOctreeReady]);
}, [graphNodeRef, onOctreeReady, rebuildKey]);
}
+1 -1
View File
@@ -1,4 +1,4 @@
import type { Vector3Tuple } from "@/types/3d";
import type { Vector3Tuple } from "./3d";
export interface MapNode {
name: string;
+3 -2
View File
@@ -1,4 +1,5 @@
import type { MapNode, SceneData } from "@/types/editor";
import type { SceneData } from "@/types/editor";
import { parseMapNodes } from "@/utils/mapNodeValidation";
const MAP_JSON_PATH = "/map.json";
@@ -16,7 +17,7 @@ export async function createSceneDataFromFiles(
throw new Error("Fichier map.json manquant à la racine du dossier");
}
const mapNodes: MapNode[] = JSON.parse(await mapFile.text());
const mapNodes = parseMapNodes(JSON.parse(await mapFile.text()));
const models = new Map<string, string>();
for (const [path, file] of fileMap.entries()) {
+2 -1
View File
@@ -1,4 +1,5 @@
import type { MapNode, SceneData } from "@/types/editor";
import { parseMapNodes } from "@/utils/mapNodeValidation";
const MAP_JSON_PATH = "/map.json";
const MODEL_FILE_NAME = "model.gltf";
@@ -11,7 +12,7 @@ export async function loadMapSceneData(): Promise<SceneData | null> {
return null;
}
const mapNodes: MapNode[] = await response.json();
const mapNodes = parseMapNodes(await response.json());
return createSceneData(mapNodes);
}
+32
View File
@@ -0,0 +1,32 @@
import type { MapNode } from "../types/editor";
function isVector3Tuple(value: unknown): value is [number, number, number] {
return (
Array.isArray(value) &&
value.length === 3 &&
value.every((item) => typeof item === "number" && Number.isFinite(item))
);
}
export function isMapNode(value: unknown): value is MapNode {
if (typeof value !== "object" || value === null) {
return false;
}
const node = value as Record<string, unknown>;
return (
typeof node.name === "string" &&
typeof node.type === "string" &&
isVector3Tuple(node.position) &&
isVector3Tuple(node.rotation) &&
isVector3Tuple(node.scale)
);
}
export function parseMapNodes(value: unknown): MapNode[] {
if (!Array.isArray(value) || !value.every(isMapNode)) {
throw new Error("Invalid map node data");
}
return value;
}
+17 -10
View File
@@ -15,7 +15,7 @@ export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
const [isLoading, setIsLoading] = useState(true);
const groupRef = useRef<THREE.Group>(null);
useOctreeGraphNode(groupRef, onOctreeReady);
useOctreeGraphNode(groupRef, onOctreeReady, mapNodes.length);
useEffect(() => {
const loadMap = async () => {
@@ -27,9 +27,19 @@ export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
return;
}
setMapNodes(
sceneData.mapNodes.filter((node) => sceneData.models.has(node.name)),
const loadedMapNodes = sceneData.mapNodes.filter((node) =>
sceneData.models.has(node.name),
);
const missingModelCount =
sceneData.mapNodes.length - loadedMapNodes.length;
if (missingModelCount > 0) {
console.warn(
`${missingModelCount} map nodes were skipped because their model files are missing.`,
);
}
setMapNodes(loadedMapNodes);
} catch (error) {
console.error("Error loading map:", error);
} finally {
@@ -40,15 +50,12 @@ export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
loadMap();
}, []);
if (isLoading) {
return <></>;
}
return (
<group ref={groupRef}>
{mapNodes.map((node, index) => (
<ModelInstance key={index} node={node} />
))}
{!isLoading &&
mapNodes.map((node, index) => (
<ModelInstance key={index} node={node} />
))}
</group>
);
}