add: loading

src/hooks/three/useOctreeGraphNode.ts

@@ -8,6 +8,7 @@ export function useOctreeGraphNode(
   graphNodeRef: RefObject<Object3D | null>,
   onOctreeReady: OctreeReadyHandler,
   rebuildKey: string | number = 0,
+  enabled = true,
 ): void {
   const octreeBuilt = useRef(false);
 
@@ -17,7 +18,7 @@ export function useOctreeGraphNode(
 
   useEffect(() => {
     const graphNode = graphNodeRef.current;
-    if (octreeBuilt.current || !graphNode) return;
+    if (!enabled || octreeBuilt.current || !graphNode) return;
     octreeBuilt.current = true;
 
     graphNode.updateMatrixWorld(true);
@@ -25,5 +26,5 @@ export function useOctreeGraphNode(
     const octree = new Octree();
     octree.fromGraphNode(graphNode);
     onOctreeReady(octree);
-  }, [graphNodeRef, onOctreeReady, rebuildKey]);
+  }, [enabled, graphNodeRef, onOctreeReady, rebuildKey]);
 }

src/hooks/world/useWorldSceneLoading.ts

@@ -0,0 +1,81 @@
+import { useCallback, useEffect, useState } from "react";
+import type { Octree } from "three/addons/math/Octree.js";
+import type { SceneMode } from "@/types/debug/debug";
+import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading";
+
+interface UseWorldSceneLoadingOptions {
+  onLoadingStateChange?: SceneLoadingChangeHandler | undefined;
+  sceneMode: SceneMode;
+}
+
+interface UseWorldSceneLoadingResult {
+  octree: Octree | null;
+  showGameStage: boolean;
+  handleGameMapLoaded: () => void;
+  handleOctreeReady: (octree: Octree) => void;
+}
+
+export function useWorldSceneLoading({
+  onLoadingStateChange,
+  sceneMode,
+}: UseWorldSceneLoadingOptions): UseWorldSceneLoadingResult {
+  const [octree, setOctree] = useState<Octree | null>(null);
+  const [gameMapLoaded, setGameMapLoaded] = useState(false);
+  const showGameStage = sceneMode === "game" && gameMapLoaded;
+  const sceneReady =
+    (sceneMode === "game" && gameMapLoaded) ||
+    (sceneMode === "physics" && octree !== null);
+
+  const handleGameMapLoaded = useCallback(() => {
+    setGameMapLoaded(true);
+  }, []);
+
+  const handleOctreeReady = useCallback(
+    (nextOctree: Octree) => {
+      setOctree(nextOctree);
+      onLoadingStateChange?.({
+        currentStep: "Collision prête",
+        progress: 0.92,
+        status: "loading",
+      });
+    },
+    [onLoadingStateChange],
+  );
+
+  useEffect(() => {
+    onLoadingStateChange?.({
+      currentStep: "Initialisation du jeu",
+      progress: 0,
+      status: "loading",
+    });
+  }, [onLoadingStateChange, sceneMode]);
+
+  useEffect(() => {
+    if (!sceneReady) return undefined;
+
+    onLoadingStateChange?.({
+      currentStep: "Gameplay prêt",
+      progress: 0.96,
+      status: "loading",
+    });
+
+    const timeoutId = window.setTimeout(() => {
+      onLoadingStateChange?.({
+        currentStep: "Gameplay prêt",
+        progress: 1,
+        status: "ready",
+      });
+    }, 150);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [onLoadingStateChange, sceneReady]);
+
+  return {
+    octree,
+    showGameStage,
+    handleGameMapLoaded,
+    handleOctreeReady,
+  };
+}