add: loading
This commit is contained in:
Tom Boullay
+125
-29
@@ -1,9 +1,9 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { Component, useEffect, useRef, useState } from "react";
|
||||
import * as THREE from "three";
|
||||
import { Component, Suspense, useEffect, useState } from "react";
|
||||
import { useClonedObject } from "@/hooks/three/useClonedObject";
|
||||
import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
|
||||
import { useOctreeGraphNode } from "@/hooks/three/useOctreeGraphNode";
|
||||
import { GameMapCollision } from "@/world/GameMapCollision";
|
||||
import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading";
|
||||
import { logger } from "@/utils/core/Logger";
|
||||
import { loadMapSceneData } from "@/utils/map/loadMapSceneData";
|
||||
import { logModelLoadError } from "@/utils/three/modelLoadLogger";
|
||||
@@ -12,12 +12,13 @@ import type { OctreeReadyHandler } from "@/types/three/three";
|
||||
|
||||
interface LoadedMapNode {
|
||||
node: MapNode;
|
||||
modelUrl: string;
|
||||
modelUrl: string | null;
|
||||
}
|
||||
|
||||
interface ErrorBoundaryProps {
|
||||
children: ReactNode;
|
||||
modelUrl: string;
|
||||
fallback: ReactNode;
|
||||
modelUrl: string | null;
|
||||
node: MapNode;
|
||||
}
|
||||
|
||||
@@ -41,7 +42,7 @@ class ModelErrorBoundary extends Component<
|
||||
componentDidCatch(error: Error): void {
|
||||
logModelLoadError(
|
||||
{
|
||||
modelPath: this.props.modelUrl,
|
||||
modelPath: this.props.modelUrl ?? `missing:${this.props.node.name}`,
|
||||
scope: "GameMap.ModelInstance",
|
||||
position: this.props.node.position,
|
||||
rotation: this.props.node.rotation,
|
||||
@@ -53,7 +54,7 @@ class ModelErrorBoundary extends Component<
|
||||
|
||||
render(): ReactNode {
|
||||
if (this.state.hasError) {
|
||||
return null;
|
||||
return this.props.fallback;
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
@@ -61,35 +62,62 @@ class ModelErrorBoundary extends Component<
|
||||
}
|
||||
|
||||
interface GameMapProps {
|
||||
onLoaded?: (() => void) | undefined;
|
||||
onLoadingStateChange?: SceneLoadingChangeHandler | undefined;
|
||||
onOctreeReady: OctreeReadyHandler;
|
||||
}
|
||||
|
||||
export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
|
||||
const [mapNodes, setMapNodes] = useState<LoadedMapNode[]>([]);
|
||||
const groupRef = useRef<THREE.Group>(null);
|
||||
const MAP_RENDER_BATCH_SIZE = 12;
|
||||
|
||||
useOctreeGraphNode(groupRef, onOctreeReady, mapNodes.length);
|
||||
export function GameMap({
|
||||
onLoaded,
|
||||
onLoadingStateChange,
|
||||
onOctreeReady,
|
||||
}: GameMapProps): React.JSX.Element {
|
||||
const [mapNodes, setMapNodes] = useState<LoadedMapNode[]>([]);
|
||||
const [mapLoaded, setMapLoaded] = useState(false);
|
||||
const [visibleNodeCount, setVisibleNodeCount] = useState(0);
|
||||
const visibleMapNodes = mapNodes.slice(0, visibleNodeCount);
|
||||
const mapReady = mapLoaded && visibleNodeCount >= mapNodes.length;
|
||||
|
||||
useEffect(() => {
|
||||
onLoadingStateChange?.({
|
||||
currentStep: "Récupération blocking",
|
||||
progress: 0.05,
|
||||
status: "loading",
|
||||
});
|
||||
|
||||
const loadMap = async () => {
|
||||
try {
|
||||
const sceneData = await loadMapSceneData();
|
||||
if (!sceneData) {
|
||||
logger.warn("GameMap", "map.json not found");
|
||||
onLoadingStateChange?.({
|
||||
currentStep: "Map introuvable",
|
||||
progress: 1,
|
||||
status: "loading",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const loadedMapNodes = sceneData.mapNodes.flatMap((node) => {
|
||||
const modelUrl = sceneData.models.get(node.name);
|
||||
return modelUrl ? [{ node, modelUrl }] : [];
|
||||
onLoadingStateChange?.({
|
||||
currentStep: "Importation des models",
|
||||
progress: 0.18,
|
||||
status: "loading",
|
||||
});
|
||||
const missingModelCount =
|
||||
sceneData.mapNodes.length - loadedMapNodes.length;
|
||||
|
||||
const loadedMapNodes = sceneData.mapNodes.map((node) => {
|
||||
const modelUrl = sceneData.models.get(node.name);
|
||||
return { node, modelUrl: modelUrl ?? null };
|
||||
});
|
||||
const missingModelCount = loadedMapNodes.filter(
|
||||
(mapNode) => mapNode.modelUrl === null,
|
||||
).length;
|
||||
|
||||
if (missingModelCount > 0) {
|
||||
logger.warn(
|
||||
"GameMap",
|
||||
"Map nodes skipped because model files are missing",
|
||||
"Map nodes rendered as fallback cubes because model files are missing",
|
||||
{
|
||||
missingModelCount,
|
||||
},
|
||||
@@ -97,28 +125,85 @@ export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
|
||||
}
|
||||
|
||||
setMapNodes(loadedMapNodes);
|
||||
setMapLoaded(true);
|
||||
setVisibleNodeCount(0);
|
||||
onLoadingStateChange?.({
|
||||
currentStep: "Montage progressif des models",
|
||||
progress: 0.25,
|
||||
status: "loading",
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error("GameMap", "Error loading map", {
|
||||
error: error instanceof Error ? error : new Error(String(error)),
|
||||
});
|
||||
onLoadingStateChange?.({
|
||||
currentStep: "Erreur de chargement de la map",
|
||||
progress: 1,
|
||||
status: "loading",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
loadMap();
|
||||
}, []);
|
||||
}, [onLoaded, onLoadingStateChange]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mapNodes.length === 0 || visibleNodeCount >= mapNodes.length) return;
|
||||
|
||||
const frameId = window.requestAnimationFrame(() => {
|
||||
setVisibleNodeCount((current) =>
|
||||
Math.min(current + MAP_RENDER_BATCH_SIZE, mapNodes.length),
|
||||
);
|
||||
});
|
||||
|
||||
return () => {
|
||||
window.cancelAnimationFrame(frameId);
|
||||
};
|
||||
}, [mapNodes.length, visibleNodeCount]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mapNodes.length === 0) return;
|
||||
|
||||
const renderProgress =
|
||||
mapNodes.length === 0 ? 1 : visibleNodeCount / mapNodes.length;
|
||||
onLoadingStateChange?.({
|
||||
currentStep: "Montage progressif des models",
|
||||
progress: 0.25 + renderProgress * 0.45,
|
||||
status: "loading",
|
||||
});
|
||||
}, [mapNodes.length, onLoadingStateChange, visibleNodeCount]);
|
||||
|
||||
return (
|
||||
<group ref={groupRef}>
|
||||
{mapNodes.map((mapNode, index) => (
|
||||
<ModelErrorBoundary
|
||||
key={index}
|
||||
modelUrl={mapNode.modelUrl}
|
||||
node={mapNode.node}
|
||||
>
|
||||
<ModelInstance node={mapNode.node} modelUrl={mapNode.modelUrl} />
|
||||
</ModelErrorBoundary>
|
||||
))}
|
||||
</group>
|
||||
<>
|
||||
<group>
|
||||
{visibleMapNodes.map((mapNode, index) => (
|
||||
<ModelErrorBoundary
|
||||
key={index}
|
||||
fallback={<FallbackMapNode node={mapNode.node} />}
|
||||
modelUrl={mapNode.modelUrl}
|
||||
node={mapNode.node}
|
||||
>
|
||||
{mapNode.modelUrl ? (
|
||||
<Suspense fallback={<FallbackMapNode node={mapNode.node} />}>
|
||||
<ModelInstance
|
||||
node={mapNode.node}
|
||||
modelUrl={mapNode.modelUrl}
|
||||
/>
|
||||
</Suspense>
|
||||
) : (
|
||||
<FallbackMapNode node={mapNode.node} />
|
||||
)}
|
||||
</ModelErrorBoundary>
|
||||
))}
|
||||
</group>
|
||||
<GameMapCollision
|
||||
mapReady={mapReady}
|
||||
nodes={mapNodes}
|
||||
onLoaded={onLoaded}
|
||||
onLoadingStateChange={onLoadingStateChange}
|
||||
onOctreeReady={onOctreeReady}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -147,3 +232,14 @@ function ModelInstance({
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FallbackMapNode({ node }: { node: MapNode }): React.JSX.Element {
|
||||
const { position, rotation, scale } = node;
|
||||
|
||||
return (
|
||||
<mesh position={position} rotation={rotation} scale={scale}>
|
||||
<boxGeometry args={[1, 1, 1]} />
|
||||
<meshStandardMaterial color="#64748b" wireframe />
|
||||
</mesh>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,212 @@
|
||||
import type { ReactNode } from "react";
|
||||
import {
|
||||
Component,
|
||||
Suspense,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import * as THREE from "three";
|
||||
import { useClonedObject } from "@/hooks/three/useClonedObject";
|
||||
import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
|
||||
import { useOctreeGraphNode } from "@/hooks/three/useOctreeGraphNode";
|
||||
import type { MapNode } from "@/types/editor/editor";
|
||||
import type { OctreeReadyHandler } from "@/types/three/three";
|
||||
import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading";
|
||||
import { logModelLoadError } from "@/utils/three/modelLoadLogger";
|
||||
|
||||
export interface GameMapCollisionNode {
|
||||
node: MapNode;
|
||||
modelUrl: string | null;
|
||||
}
|
||||
|
||||
interface ResolvedGameMapCollisionNode {
|
||||
node: MapNode;
|
||||
modelUrl: string;
|
||||
}
|
||||
|
||||
interface GameMapCollisionProps {
|
||||
mapReady: boolean;
|
||||
nodes: readonly GameMapCollisionNode[];
|
||||
onLoaded?: (() => void) | undefined;
|
||||
onLoadingStateChange?: SceneLoadingChangeHandler | undefined;
|
||||
onOctreeReady: OctreeReadyHandler;
|
||||
}
|
||||
|
||||
interface CollisionErrorBoundaryProps {
|
||||
children: ReactNode;
|
||||
modelUrl: string;
|
||||
node: MapNode;
|
||||
onSettled: () => void;
|
||||
}
|
||||
|
||||
interface CollisionErrorBoundaryState {
|
||||
hasError: boolean;
|
||||
}
|
||||
|
||||
const MAP_COLLISION_NODE_NAMES = new Set(["terrain"]);
|
||||
|
||||
class CollisionErrorBoundary extends Component<
|
||||
CollisionErrorBoundaryProps,
|
||||
CollisionErrorBoundaryState
|
||||
> {
|
||||
constructor(props: CollisionErrorBoundaryProps) {
|
||||
super(props);
|
||||
this.state = { hasError: false };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(): CollisionErrorBoundaryState {
|
||||
return { hasError: true };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error): void {
|
||||
logModelLoadError(
|
||||
{
|
||||
modelPath: this.props.modelUrl,
|
||||
scope: "GameMapCollision.ModelInstance",
|
||||
position: this.props.node.position,
|
||||
rotation: this.props.node.rotation,
|
||||
scale: this.props.node.scale,
|
||||
},
|
||||
error,
|
||||
);
|
||||
this.props.onSettled();
|
||||
}
|
||||
|
||||
render(): ReactNode {
|
||||
if (this.state.hasError) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
function isCollisionNode(
|
||||
mapNode: GameMapCollisionNode,
|
||||
): mapNode is ResolvedGameMapCollisionNode {
|
||||
return (
|
||||
mapNode.modelUrl !== null && MAP_COLLISION_NODE_NAMES.has(mapNode.node.name)
|
||||
);
|
||||
}
|
||||
|
||||
export function GameMapCollision({
|
||||
mapReady,
|
||||
nodes,
|
||||
onLoaded,
|
||||
onLoadingStateChange,
|
||||
onOctreeReady,
|
||||
}: GameMapCollisionProps): React.JSX.Element {
|
||||
const groupRef = useRef<THREE.Group>(null);
|
||||
const settledCollisionNodesRef = useRef(new Set<number>());
|
||||
const [settledCollisionNodeCount, setSettledCollisionNodeCount] = useState(0);
|
||||
const collisionNodes = nodes.filter(isCollisionNode);
|
||||
const collisionReady =
|
||||
mapReady && settledCollisionNodeCount >= collisionNodes.length;
|
||||
|
||||
const handleCollisionNodeSettled = useCallback((index: number) => {
|
||||
if (settledCollisionNodesRef.current.has(index)) return;
|
||||
|
||||
settledCollisionNodesRef.current.add(index);
|
||||
setSettledCollisionNodeCount(settledCollisionNodesRef.current.size);
|
||||
}, []);
|
||||
|
||||
const handleOctreeReady = useCallback<OctreeReadyHandler>(
|
||||
(octree) => {
|
||||
onLoadingStateChange?.({
|
||||
currentStep: "Collision prête",
|
||||
progress: 0.92,
|
||||
status: "loading",
|
||||
});
|
||||
onOctreeReady(octree);
|
||||
onLoaded?.();
|
||||
},
|
||||
[onLoaded, onLoadingStateChange, onOctreeReady],
|
||||
);
|
||||
|
||||
useOctreeGraphNode(
|
||||
groupRef,
|
||||
handleOctreeReady,
|
||||
collisionReady ? collisionNodes.length : 0,
|
||||
collisionReady && collisionNodes.length > 0,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mapReady) return;
|
||||
|
||||
if (collisionNodes.length === 0) {
|
||||
onLoaded?.();
|
||||
return;
|
||||
}
|
||||
|
||||
if (collisionReady) return;
|
||||
|
||||
onLoadingStateChange?.({
|
||||
currentStep: "Ajout de la collision",
|
||||
progress: 0.86,
|
||||
status: "loading",
|
||||
});
|
||||
}, [
|
||||
collisionNodes.length,
|
||||
collisionReady,
|
||||
mapReady,
|
||||
onLoaded,
|
||||
onLoadingStateChange,
|
||||
]);
|
||||
|
||||
return (
|
||||
<group ref={groupRef} visible={false}>
|
||||
{mapReady
|
||||
? collisionNodes.map((mapNode, index) => (
|
||||
<CollisionErrorBoundary
|
||||
key={`collision-${index}`}
|
||||
node={mapNode.node}
|
||||
modelUrl={mapNode.modelUrl}
|
||||
onSettled={() => handleCollisionNodeSettled(index)}
|
||||
>
|
||||
<Suspense fallback={null}>
|
||||
<CollisionModelInstance
|
||||
node={mapNode.node}
|
||||
modelUrl={mapNode.modelUrl}
|
||||
onLoaded={() => handleCollisionNodeSettled(index)}
|
||||
/>
|
||||
</Suspense>
|
||||
</CollisionErrorBoundary>
|
||||
))
|
||||
: null}
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
function CollisionModelInstance({
|
||||
node,
|
||||
modelUrl,
|
||||
onLoaded,
|
||||
}: {
|
||||
node: MapNode;
|
||||
modelUrl: string;
|
||||
onLoaded: () => void;
|
||||
}): React.JSX.Element {
|
||||
const { position, rotation, scale } = node;
|
||||
const { scene } = useLoggedGLTF(modelUrl, {
|
||||
scope: "GameMapCollision.ModelInstance",
|
||||
position,
|
||||
rotation,
|
||||
scale,
|
||||
});
|
||||
const sceneInstance = useClonedObject(scene);
|
||||
|
||||
useEffect(() => {
|
||||
onLoaded();
|
||||
}, [onLoaded]);
|
||||
|
||||
return (
|
||||
<primitive
|
||||
object={sceneInstance}
|
||||
position={position}
|
||||
rotation={rotation}
|
||||
scale={scale}
|
||||
/>
|
||||
);
|
||||
}
|
||||
+20
-9
@@ -1,6 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { Physics } from "@react-three/rapier";
|
||||
import type { Octree } from "three/addons/math/Octree.js";
|
||||
import {
|
||||
PLAYER_SPAWN_POSITION_GAME,
|
||||
PLAYER_SPAWN_POSITION_PHYSICS,
|
||||
@@ -8,6 +6,7 @@ import {
|
||||
import { useCameraMode } from "@/hooks/debug/useCameraMode";
|
||||
import { useSceneMode } from "@/hooks/debug/useSceneMode";
|
||||
import { useHandTrackingSnapshot } from "@/hooks/handTracking/useHandTrackingSnapshot";
|
||||
import { useWorldSceneLoading } from "@/hooks/world/useWorldSceneLoading";
|
||||
import { DebugCameraControls } from "@/components/debug/scene/DebugCameraControls";
|
||||
import { DebugHelpers } from "@/components/debug/scene/DebugHelpers";
|
||||
import { HandTrackingGlove } from "@/components/three/handTracking/HandTrackingGlove";
|
||||
@@ -18,12 +17,18 @@ import { GameMap } from "@/world/GameMap";
|
||||
import { GameStageContent } from "@/world/GameStageContent";
|
||||
import { Player } from "@/world/player/Player";
|
||||
import { TestMap } from "@/world/debug/TestMap";
|
||||
import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading";
|
||||
|
||||
export function World(): React.JSX.Element {
|
||||
interface WorldProps {
|
||||
onLoadingStateChange?: SceneLoadingChangeHandler | undefined;
|
||||
}
|
||||
|
||||
export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
|
||||
const cameraMode = useCameraMode();
|
||||
const sceneMode = useSceneMode();
|
||||
const { status, usageStatus } = useHandTrackingSnapshot();
|
||||
const [octree, setOctree] = useState<Octree | null>(null);
|
||||
const { octree, showGameStage, handleGameMapLoaded, handleOctreeReady } =
|
||||
useWorldSceneLoading({ sceneMode, onLoadingStateChange });
|
||||
const playerSpawnPosition =
|
||||
sceneMode === "game"
|
||||
? PLAYER_SPAWN_POSITION_GAME
|
||||
@@ -47,13 +52,19 @@ export function World(): React.JSX.Element {
|
||||
{sceneMode === "game" ? (
|
||||
<>
|
||||
<GameMusic />
|
||||
<GameMap onOctreeReady={setOctree} />
|
||||
<Physics>
|
||||
<GameStageContent />
|
||||
</Physics>
|
||||
<GameMap
|
||||
onLoaded={handleGameMapLoaded}
|
||||
onLoadingStateChange={onLoadingStateChange}
|
||||
onOctreeReady={handleOctreeReady}
|
||||
/>
|
||||
{showGameStage ? (
|
||||
<Physics>
|
||||
<GameStageContent />
|
||||
</Physics>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<TestMap onOctreeReady={setOctree} />
|
||||
<TestMap onOctreeReady={handleOctreeReady} />
|
||||
)}
|
||||
{cameraMode !== "debug" ? (
|
||||
<Player octree={octree} spawnPosition={playerSpawnPosition} />
|
||||
|
||||
Reference in New Issue
Block a user