add: playground in testmap

This commit is contained in:
Tom Boullay
2026-05-08 03:07:52 +01:00
parent 6d9eac291e
commit 254311bddf
6 changed files with 82 additions and 4 deletions
+29
View File
@@ -19,3 +19,32 @@ export const TEST_SCENE_TRIGGER_SEGMENTS = 32;
export const TEST_SCENE_TRIGGER_COLOR = "#3b82f6";
export const TEST_SCENE_TRIGGER_ROUGHNESS = 0.3;
export const TEST_SCENE_TRIGGER_METALNESS = 0.5;
export const TEST_SCENE_REPAIR_ZONE_MARKER_RADIUS = 1.65;
export const TEST_SCENE_REPAIR_ZONE_MARKER_TUBE_RADIUS = 0.045;
export const TEST_SCENE_REPAIR_ZONES = [
{
mission: "bike",
label: "Bike",
color: "#38bdf8",
position: [-12, 0, -12],
},
{
mission: "pylone",
label: "Pylone",
color: "#facc15",
position: [0, 0, -12],
},
{
mission: "ferme",
label: "Farm",
color: "#86efac",
position: [12, 0, -12],
},
] as const satisfies readonly {
mission: "bike" | "pylone" | "ferme";
label: string;
color: string;
position: Vector3Tuple;
}[];
+4 -2
View File
@@ -99,7 +99,7 @@ Ce document décrit le code réellement présent aujourd'hui dans le dépôt.
- le rig joueur quand le mode caméra actif est \`player\`
- \`src/world/GameMap.tsx\` charge les modèles de carte disponibles et construit l'octree de collision.
- \`src/world/GameStageContent.tsx\` est enveloppé dans le contexte Rapier \`Physics\` dans la scène de jeu de production afin que les objets gameplay de stage puissent utiliser la physique sans migrer la carte ou le joueur vers Rapier. Il monte maintenant des instances réutilisables de \`RepairGame\` pour les états de mission \`bike\`, \`pylone\` et \`ferme\`.
- \`src/world/debug/TestMap.tsx\` fournit une carte orientée debug pour les interactions et la physique.
- \`src/world/debug/TestMap.tsx\` fournit une carte orientée debug pour les interactions et la physique, avec les objets existants de grab, trigger et preview de modèle, plus des zones playground de réparation séparées \`Bike\`, \`Pylone\` et \`Farm\`.
- \`src/world/player/Player.tsx\` monte la caméra et le contrôleur.
- \`src/world/player/PlayerController.tsx\` gère le mouvement pointer lock, le saut et les inputs d'interaction.
@@ -109,6 +109,7 @@ Le projet utilise actuellement deux couches de collision avec des responsabilit
- \`GameMap\` construit une octree utilisée par le contrôleur joueur pour les collisions avec la carte.
- \`GameStageContent\` est enveloppé dans Rapier \`Physics\` pour les objets gameplay comme les triggers de réparation, les mallettes, les objets saisissables et les futurs objets spécifiques aux missions.
- \`TestMap\` possède son propre playground Rapier \`Physics\` afin de peaufiner le gameplay de réparation par state de mission sans dépendre du placement de la carte de production.
Le joueur et l'octree de carte doivent rester hors du provider Rapier tant qu'il n'existe pas de plan de migration volontaire. Cela évite de mélanger les règles de déplacement joueur avec la physique d'objets avant que les systèmes gameplay en aient besoin.
@@ -417,7 +418,7 @@ Ce document liste les fonctionnalités présentes dans le code actuel.
- Scène React Three Fiber plein écran
- Carte principale chargée depuis \`public/models/{name}/model.glb\`, avec fallback vers \`model.gltf\`
- Scène de test physique debug sélectionnable depuis le panneau debug
- Scène de test physique debug sélectionnable depuis le panneau debug, avec tests grab/trigger, preview de modèle animé et zones playground de réparation séparées pour \`bike\`, \`pylone\` et \`ferme\`
- Contexte physique Rapier disponible pour les objets gameplay de stage en production
- Éclairage ambiant et directionnel
- Configuration de l'environnement de fond
@@ -441,6 +442,7 @@ Ce document liste les fonctionnalités présentes dans le code actuel.
## Gameplay de réparation
- \`RepairGame\` de production réutilisable monté pour les états de mission \`bike\`, \`pylone\` et \`ferme\`
- Le playground physics debug monte le même \`RepairGame\` réutilisable dans des zones \`Bike\`, \`Pylone\` et \`Farm\`, afin de peaufiner chaque state avec un placement isolé avant déplacement vers la carte de production
- Configuration de mission partagée via \`src/data/gameplay/repairMissions.ts\`, avec nodes cassés, placeholders cibles, timing de scan et timing de réassemblage propres à chaque mission
- Flow repair-game avec \`waiting -> inspected -> fragmented -> scanning -> repairing -> reassembling -> done -> next mission\`, prompts \`.webm\`, apparition/ouverture/sortie de la mallette, vue focalisée de la mallette, traverse des placeholders de mallette, placement avec snap vers placeholder, dépôt des pièces cassées, touche \`E\`, hold deux poings, transition de modèle explosé, réassemblage inverse avec particules, scan visuel par pièce, marqueur rouge persistant et vidéo UI centrée sur les pièces cassées, plusieurs choix de pièces grabbables, validation de la bonne pièce et complétion de mission
+43
View File
@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
import { Component, useRef } from "react";
import * as THREE from "three";
import { Physics, RigidBody, CuboidCollider } from "@react-three/rapier";
import { RepairGame } from "@/components/three/gameplay/RepairGame";
import { GrabbableObject } from "@/components/three/interaction/GrabbableObject";
import { AnimatedModel } from "@/components/three/models/AnimatedModel";
import { TriggerObject } from "@/components/three/interaction/TriggerObject";
@@ -14,6 +15,9 @@ import {
TEST_SCENE_GRABBABLE_METALNESS,
TEST_SCENE_GRABBABLE_POSITION,
TEST_SCENE_GRABBABLE_ROUGHNESS,
TEST_SCENE_REPAIR_ZONE_MARKER_RADIUS,
TEST_SCENE_REPAIR_ZONE_MARKER_TUBE_RADIUS,
TEST_SCENE_REPAIR_ZONES,
TEST_SCENE_TRIGGER_COLOR,
TEST_SCENE_TRIGGER_METALNESS,
TEST_SCENE_TRIGGER_POSITION,
@@ -42,6 +46,10 @@ interface ModelPreviewErrorBoundaryState {
hasError: boolean;
}
interface RepairPlaygroundZoneMarkerProps {
color: string;
}
class ModelPreviewErrorBoundary extends Component<
ModelPreviewErrorBoundaryProps,
ModelPreviewErrorBoundaryState
@@ -132,6 +140,13 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
/>
</mesh>
</TriggerObject>
{TEST_SCENE_REPAIR_ZONES.map((zone) => (
<group key={zone.mission} position={zone.position}>
<RepairPlaygroundZoneMarker color={zone.color} />
<RepairGame mission={zone.mission} position={[0, 0, 0]} />
</group>
))}
</Physics>
<ModelPreviewErrorBoundary modelPath={ELECTRICIENNE_ANIMATED_MODEL_PATH}>
@@ -145,3 +160,31 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
</>
);
}
function RepairPlaygroundZoneMarker({
color,
}: RepairPlaygroundZoneMarkerProps): React.JSX.Element {
return (
<group>
<mesh rotation={[Math.PI / 2, 0, 0]}>
<torusGeometry
args={[
TEST_SCENE_REPAIR_ZONE_MARKER_RADIUS,
TEST_SCENE_REPAIR_ZONE_MARKER_TUBE_RADIUS,
12,
96,
]}
/>
<meshStandardMaterial
color={color}
emissive={color}
emissiveIntensity={0.2}
/>
</mesh>
<mesh position={[0, 0.08, 0]} rotation={[Math.PI / 2, 0, 0]}>
<ringGeometry args={[0.2, TEST_SCENE_REPAIR_ZONE_MARKER_RADIUS, 96]} />
<meshBasicMaterial color={color} transparent opacity={0.12} />
</mesh>
</group>
);
}