refactor: organize three components by domain

.agent/AGENT.md

@@ -24,7 +24,8 @@ You are working on **La Fabrik**, an interactive 3D web experience built with Re
 
 ## Current Architecture Rules
 
-- Scene objects live in `src/world/` and `src/components/3d/`.
+- Scene objects live in `src/world/` and `src/components/three/`.
+- Shared 3D components are grouped by domain under `src/components/three/models/`, `src/components/three/interaction/`, `src/components/three/gameplay/`, and `src/components/three/world/`.
 - HTML overlays live in `src/components/ui/`.
 - Shared static config lives in `src/data/`.
 - Debug tooling lives in `src/utils/debug/` and `src/hooks/debug/`.

.agent/skills/debug.md

@@ -58,7 +58,7 @@ if (debug.active) {
 r3f-perf is loaded only in debug mode to avoid dependency issues in production:
 
 ```tsx
-// src/utils/debug/DebugPerf.tsx
+// src/components/debug/DebugPerf.tsx
 import { Suspense, lazy } from "react";
 import { Debug } from "@/utils/debug/Debug";
 

.agent/skills/managers.md

@@ -28,12 +28,13 @@ export class SomeManager {
 
 ## Managers in this project
 
-| Manager            | File                                   | Role                                                                                                       |
+| Manager              | File                                 | Role                                                                          |
-| ------------------ | -------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| -------------------- | ------------------------------------ | ----------------------------------------------------------------------------- |
-| `GameManager`      | `src/stateManager/GameManager.ts`      | Single source of truth. Owns phase, zone, mission, input lock, dialogue. Has `subscribe()` + `getState()`. |
+| `AudioManager`       | `src/managers/AudioManager.ts`       | Music and SFX playback.                                                       |
-| `CinematicManager` | `src/stateManager/CinematicManager.ts` | GSAP timelines. Locks/unlocks input via GameManager.                                                       |
+| `InteractionManager` | `src/managers/InteractionManager.ts` | Focus, nearby, trigger, grab, and hand-grab interaction state.                |
-| `AudioManager`     | `src/stateManager/AudioManager.ts`     | Music, SFX, spatial audio. Reads phase from GameManager.                                                   |
+| `GameManager`        | target-state only                    | Future single source of truth for phase, zone, mission, input lock, dialogue. |
-| `ZoneManager`      | `src/stateManager/ZoneManager.ts`      | Zone entry/exit detection, LOD triggers. Notifies GameManager of zone changes.                             |
+| `CinematicManager`   | target-state only                    | Future GSAP timeline orchestrator.                                            |
+| `ZoneManager`        | target-state only                    | Future zone entry/exit detection and LOD triggers.                            |
 
 ## GameManager is the orchestrator
 

README.md

@@ -48,25 +48,24 @@ la-fabrik/
 │   └── sounds/
 │
 └── src/
-    ├── world/                              # Single persistent 3D world
+    ├── world/                              # Persistent 3D world composition
-    │   ├── World.tsx                       # Main scene composition
+    │   ├── World.tsx                       # Active scene composition
-    │   ├── Map.tsx                         # Base map, always mounted
+    │   ├── GameMap.tsx                     # Map loading and octree collision
     │   ├── Lighting.tsx                    # Ambient, directional, point lights
-    │   ├── Environment.tsx                 # HDRI, fog, sky
+    │   ├── Environment.tsx                 # Scene background / sky model
-    │   ├── PostFX.tsx                      # Bloom, SSAO, chromatic aberration
+    │   ├── GameMusic.tsx                   # Game scene music lifecycle
-    │   ├── zones/                          # Spatial zones — LOD per zone
+    │   ├── debug/                          # Debug-only test scene
-    │   │   ├── WorkshopZone.tsx
+    │   │   └── TestMap.tsx
-    │   │   ├── PowerGridZone.tsx
-    │   │   ├── FarmZone.tsx
-    │   │   ├── SchoolZone.tsx
-    │   │   └── ResidentialZone.tsx
     │   └── player/
     │       ├── FPSController.tsx           # PointerLockControls + Rapier movement
     │       └── Crosshair.tsx
     │
     ├── components/
-    │   ├── 3d/                             # Shared reusable 3D elements
+    │   ├── three/                          # Shared R3F components by domain
-    │   │   └── InteractiveObject.tsx       # Raycasting + outline wrapper
+    │   │   ├── gameplay/repairGame/        # Core repair gameplay prototype
+    │   │   ├── interaction/                # Trigger, grab, focus wrappers
+    │   │   ├── models/                     # GLTF model components
+    │   │   └── world/                      # Environment-specific 3D objects
     │   └── ui/                             # HTML overlays — outside Canvas
     │       ├── NarrativeOverlay.tsx        # Floating dialogues
     │       ├── MissionHUD.tsx              # Current objective
@@ -74,11 +73,9 @@ la-fabrik/
     │       ├── CinematicBars.tsx           # GSAP black bars
     │       └── LoadingScreen.tsx           # Asset progress
     │
-    ├── stateManager/                       # All logic, state, orchestration
+    ├── managers/                           # Current singleton-style services
-    │   ├── GameManager.ts                  # Single source of truth: phase, zone, mission
+    │   ├── AudioManager.ts                 # Music and SFX playback
-    │   ├── CinematicManager.ts             # GSAP timelines, camera lock/unlock
+    │   └── InteractionManager.ts           # Focus, nearby, grab state
-    │   ├── AudioManager.ts                 # Music, SFX, spatial audio
-    │   └── ZoneManager.ts                  # Zone detection, LOD triggers
     │
     ├── hooks/                              # React hooks — thin wrappers on managers
     │   ├── useGameState.ts                 # Subscribes to GameManager
@@ -89,9 +86,10 @@ la-fabrik/
     │   └── useLOD.ts
     │
     ├── data/
-    │   ├── zones.ts                        # { id, position, radius, missionId }
+    │   ├── interaction/                    # Interaction tuning
-    │   ├── dialogues.ts                    # Narrative scripts, PNJ states
+    │   ├── player/                         # Player tuning
-    │   └── missions.ts                     # Mission definitions, steps
+    │   ├── repairGame/                     # Repair gameplay static config
+    │   └── world/                          # Environment and lighting config
     │
     ├── shaders/
     │   └── hologram/

docs/technical/animation.md

@@ -30,7 +30,7 @@ The project provides three main types of model instantiation:
 Use for GLTF models **without** skeleton/armature and no animations.
 
 ```tsx
-import { SimpleModel } from "@/components/3d";
+import { SimpleModel } from "@/components/three/models/SimpleModel";
 
 <SimpleModel
   modelPath="/models/elecsimple/model.gltf"
@@ -48,7 +48,7 @@ import { SimpleModel } from "@/components/3d";
 | --------------- | ------------------------ | ----------- | --------------------------------- |
 | `modelPath`     | `string`                 | required    | Path to GLTF file in `/public`    |
 | `position`      | `Vector3Tuple`           | `[0, 0, 0]` | World position [x, y, z]          |
-| `rotation`      | `Vector3Tuple`           | `[0, 0, 0]` | Rotation in degrees [x, y, z]     |
+| `rotation`      | `Vector3Tuple`           | `[0, 0, 0]` | Rotation in radians [x, y, z]     |
 | `scale`         | `number \| Vector3Tuple` | `1`         | Scale factor or [x, y, z]         |
 | `castShadow`    | `boolean`                | `true`      | Enable shadow casting             |
 | `receiveShadow` | `boolean`                | `true`      | Enable shadow receiving           |
@@ -61,7 +61,8 @@ import { SimpleModel } from "@/components/3d";
 Use for GLTF models **with** skeleton/armature and animations (like Mixamo characters).
 
 ```tsx
-import { AnimatedModel, useAnimatedModel } from "@/components/3d";
+import { AnimatedModel } from "@/components/three/models/AnimatedModel";
+import { useAnimatedModel } from "@/components/three/models/useAnimatedModel";
 
 // Basic usage
 <AnimatedModel
@@ -84,7 +85,7 @@ import { AnimatedModel, useAnimatedModel } from "@/components/3d";
 | `defaultAnimation` | `string`                 | `"Idle"`    | Animation name to play by default             |
 | `animations`       | `string[]`               | `[]`        | List of animation names (optional)            |
 | `position`         | `Vector3Tuple`           | `[0, 0, 0]` | World position [x, y, z]                      |
-| `rotation`         | `Vector3Tuple`           | `[0, 0, 0]` | Rotation in degrees [x, y, z]                 |
+| `rotation`         | `Vector3Tuple`           | `[0, 0, 0]` | Rotation in radians [x, y, z]                 |
 | `scale`            | `number \| Vector3Tuple` | `1`         | Scale factor                                  |
 | `autoPlay`         | `boolean`                | `true`      | Auto-play default animation                   |
 | `speed`            | `number`                 | `1`         | Animation playback speed                      |
@@ -106,7 +107,8 @@ To control animations from inside or outside the `AnimatedModel`, use the `useAn
 ### Basic Control
 
 ```tsx
-import { AnimatedModel, useAnimatedModel } from "@/components/3d";
+import { AnimatedModel } from "@/components/three/models/AnimatedModel";
+import { useAnimatedModel } from "@/components/three/models/useAnimatedModel";
 
 // Create a controller component to use inside AnimatedModel
 function AnimationController() {
@@ -178,7 +180,8 @@ function Character() {
 You can combine `AnimatedModel` inside `GrabbableObject` to create animated objects that can be picked up:
 
 ```tsx
-import { AnimatedModel, GrabbableObject } from "@/components/3d";
+import { GrabbableObject } from "@/components/three/interaction/GrabbableObject";
+import { AnimatedModel } from "@/components/three/models/AnimatedModel";
 
 // Animated weapon/tool that player can pick up
 <GrabbableObject position={[0, 1, 0]} colliders="cuboid">
@@ -195,11 +198,9 @@ import { AnimatedModel, GrabbableObject } from "@/components/3d";
 Or create an animated character that can be grabbed:
 
 ```tsx
-import {
+import { GrabbableObject } from "@/components/three/interaction/GrabbableObject";
-  AnimatedModel,
+import { AnimatedModel } from "@/components/three/models/AnimatedModel";
-  GrabbableObject,
+import { useAnimatedModel } from "@/components/three/models/useAnimatedModel";
-  useAnimatedModel,
-} from "@/components/3d";
 
 // Controller that triggers animations when grabbed
 function AnimatedGrabber() {
@@ -240,7 +241,7 @@ function AnimatedGrabber() {
 Objects that can be picked up by the player.
 
 ```tsx
-import { GrabbableObject } from "@/components/3d";
+import { GrabbableObject } from "@/components/three/interaction/GrabbableObject";
 
 <GrabbableObject position={[0, 1, 0]} colliders="cuboid">
   <mesh>
@@ -255,7 +256,7 @@ import { GrabbableObject } from "@/components/3d";
 Objects that trigger events when interacted with.
 
 ```tsx
-import { TriggerObject } from "@/components/3d";
+import { TriggerObject } from "@/components/three/interaction/TriggerObject";
 
 <TriggerObject
   position={[0, 1, 0]}
@@ -274,11 +275,13 @@ import { TriggerObject } from "@/components/3d";
 Base object for interactions.
 
 ```tsx
-import { InteractableObject } from "@/components/3d";
+import { InteractableObject } from "@/components/three/interaction/InteractableObject";
 
 <InteractableObject
+  kind="trigger"
+  label="Interact"
   position={[0, 1, 0]}
-  onInteract={() => console.log("Interacted!")}
+  onPress={() => console.log("Interacted!")}
 >
   <mesh>
     <cylinderGeometry />
@@ -306,8 +309,8 @@ If animated models don't appear, they may be too small or too large. Try:
 
 ### Cloning
 
-- `SimpleModel` uses `scene.clone()` for proper React lifecycle
+- `SimpleModel` memoizes a cloned scene for proper React lifecycle
-- `AnimatedModel` uses the original scene directly to preserve SkinnedMesh + Armature structure
+- `AnimatedModel` memoizes a cloned scene and binds animations through a group ref
 
 ### Animation System
 
@@ -326,13 +329,15 @@ This system intentionally avoids complex state machines (like Unity's Animator).
 
 ```
 src/
-├── components/3d/
+├── components/three/
-│   ├── AnimatedModel.tsx    # Animated model component + context
+│   ├── models/
-│   ├── SimpleModel.tsx      # Static model component
+│   │   ├── AnimatedModel.tsx    # Animated model component + context
-│   ├── GrabbableObject.tsx  # Pickable object
+│   │   ├── SimpleModel.tsx      # Static model component
-│   ├── TriggerObject.tsx    # Trigger event object
+│   │   └── useAnimatedModel.ts  # Animated model context hook
-│   ├── InteractableObject.tsx
+│   └── interaction/
-│   └── index.ts             # Central exports
+│       ├── GrabbableObject.tsx  # Pickable object
+│       ├── TriggerObject.tsx    # Trigger event object
+│       └── InteractableObject.tsx
 └── hooks/
     └── useCharacterAnimation.ts  # Animation hook (legacy)
 ```

docs/technical/architecture.md

@@ -4,8 +4,9 @@ This document describes the code that exists today in the repository.
 
 ## Runtime Structure
 
-- `src/main.tsx` mounts React and wraps the app in `BrowserRouter`.
+- `src/main.tsx` mounts React.
-- `src/App.tsx` declares the top-level routes:
+- `src/App.tsx` mounts the TanStack `RouterProvider`.
+- `src/router.tsx` declares the top-level routes:
   - `/` mounts the playable 3D scene, debug perf overlay, and HTML overlays.
   - `/editor` mounts the map editor page.
 - `src/world/World.tsx` composes the active scene, including:
@@ -15,21 +16,21 @@ This document describes the code that exists today in the repository.
   - the player rig when the active camera mode is `player`
 - `src/world/GameMap.tsx` loads map nodes from `public/map.json`, resolves available models, and builds the collision octree.
 - `src/world/debug/TestMap.tsx` provides a debug-oriented interaction and physics map.
-- `src/world/player/PlayerComponent.tsx` mounts the camera and controller.
+- `src/world/player/Player.tsx` mounts the camera and controller.
 - `src/world/player/PlayerController.tsx` owns pointer lock movement, jump handling, and interaction input.
 
 ## Interaction Model
 
-- `src/stateManager/InteractionManager.ts` is the current interaction state source.
+- `src/managers/InteractionManager.ts` is the current interaction state source.
-- `src/components/3d/InteractableObject.tsx` handles focus detection through distance and raycasting.
+- `src/components/three/interaction/InteractableObject.tsx` handles focus detection through distance and raycasting.
-- `src/components/3d/TriggerObject.tsx` implements trigger-style interactions.
+- `src/components/three/interaction/TriggerObject.tsx` implements trigger-style interactions.
-- `src/components/3d/GrabbableObject.tsx` implements hold-and-release interactions.
+- `src/components/three/interaction/GrabbableObject.tsx` implements hold-and-release interactions.
 - `src/hooks/useInteraction.ts` exposes the interaction snapshot to React UI.
 - `src/components/ui/InteractPrompt.tsx` shows the `E` prompt for trigger interactions.
 
 ## Audio
 
-- `src/stateManager/AudioManager.ts` currently provides pooled one-shot sound playback.
+- `src/managers/AudioManager.ts` currently provides pooled one-shot sound playback and looped music playback.
 - Trigger interactions may play audio directly through `AudioManager`.
 
 ## Debug System
@@ -37,13 +38,20 @@ This document describes the code that exists today in the repository.
 - Debug mode is enabled with `?debug`.
 - `src/utils/debug/Debug.ts` owns the `lil-gui` instance and debug controls.
 - `src/hooks/debug/useCameraMode.ts` and `src/hooks/debug/useSceneMode.ts` subscribe to debug state.
-- `src/utils/debug/DebugPerf.tsx` lazily mounts `r3f-perf` in debug mode.
+- `src/components/debug/DebugPerf.tsx` lazily mounts `r3f-perf` in debug mode.
-- `src/utils/debug/scene/DebugHelpers.tsx` mounts debug helpers.
+- `src/components/debug/scene/DebugHelpers.tsx` mounts debug helpers.
-- `src/utils/debug/scene/DebugCameraControls.tsx` mounts the free debug camera.
+- `src/components/debug/scene/DebugCameraControls.tsx` mounts the free debug camera.
+
+## 3D Component Domains
+
+- `src/components/three/models/` contains reusable model loaders such as `SimpleModel`, `AnimatedModel`, and `ExplodableModel`.
+- `src/components/three/interaction/` contains reusable interaction wrappers such as `InteractableObject`, `TriggerObject`, and `GrabbableObject`.
+- `src/components/three/gameplay/repairGame/` contains the current core repair gameplay prototype: the repair case, repair game zone, and module slots.
+- `src/components/three/world/` contains reusable world/environment objects such as `SkyModel`.
 
 ## Editor System
 
-- `src/pages/editor/EditorPage.tsx` is the route-level editor page for `/editor`.
+- `src/pages/editor/page.tsx` is the route-level editor page for `/editor`.
 - `src/components/editor/EditorControls.tsx` renders the HTML editor control panel.
 - `src/components/editor/scene/EditorScene.tsx` composes the editor canvas scene, camera controls, lights, shortcuts, and map rendering.
 - `src/components/editor/scene/EditorMap.tsx` renders map nodes, fallback cubes, selection highlighting, and transform controls.

docs/technical/hand-tracking.md

@@ -64,7 +64,7 @@ interface HandTrackingHand {
 
 ## Grab Targeting
 
-The hand grab logic lives in `src/components/three/GrabbableObject.tsx`.
+The hand grab logic lives in `src/components/three/interaction/GrabbableObject.tsx`.
 
 The object is moved toward the visual center of the hand. That center is computed from the bounding box of all landmarks:
 

src/components/three/MainFeatureZone.tsx

@@ -1,65 +0,0 @@
-import { useState } from "react";
-import { Text } from "@react-three/drei";
-import { MainFeatureObject } from "@/components/three/MainFeatureObject";
-import { ModelSelectorPlaceholder } from "@/components/three/ModelSelectorPlaceholder";
-
-const ZONE_ORIGIN = [10, 0.4, -8] as const;
-const ZONE_RADIUS = 4.2;
-
-export function MainFeatureZone(): React.JSX.Element {
-  const [caseOpen, setCaseOpen] = useState(false);
-
-  return (
-    <group>
-      <mesh
-        position={[ZONE_ORIGIN[0], 0.025, ZONE_ORIGIN[2]]}
-        rotation={[-Math.PI / 2, 0, 0]}
-      >
-        <ringGeometry args={[ZONE_RADIUS - 0.08, ZONE_RADIUS, 96]} />
-        <meshBasicMaterial color="#38bdf8" transparent opacity={0.72} />
-      </mesh>
-
-      <mesh
-        position={[ZONE_ORIGIN[0], 0.02, ZONE_ORIGIN[2]]}
-        rotation={[-Math.PI / 2, 0, 0]}
-      >
-        <circleGeometry args={[ZONE_RADIUS, 96]} />
-        <meshBasicMaterial color="#0ea5e9" transparent opacity={0.12} />
-      </mesh>
-
-      <Text
-        position={[ZONE_ORIGIN[0], 3.1, ZONE_ORIGIN[2] - 1.8]}
-        rotation={[0, 0, 0]}
-        fontSize={0.55}
-        maxWidth={5.5}
-        textAlign="center"
-        anchorX="center"
-        anchorY="middle"
-        color="#f8fafc"
-        outlineWidth={0.025}
-        outlineColor="#0f172a"
-      >
-        Pack de Relance Feature
-      </Text>
-
-      <MainFeatureObject
-        position={[ZONE_ORIGIN[0], ZONE_ORIGIN[1], ZONE_ORIGIN[2]]}
-        open={caseOpen}
-        onToggle={() => setCaseOpen((value) => !value)}
-      />
-
-      <ModelSelectorPlaceholder
-        label="Module A"
-        position={[ZONE_ORIGIN[0] - 2.2, ZONE_ORIGIN[1], ZONE_ORIGIN[2] + 2.2]}
-      />
-      <ModelSelectorPlaceholder
-        label="Module B"
-        position={[ZONE_ORIGIN[0], ZONE_ORIGIN[1], ZONE_ORIGIN[2] + 2.6]}
-      />
-      <ModelSelectorPlaceholder
-        label="Module C"
-        position={[ZONE_ORIGIN[0] + 2.2, ZONE_ORIGIN[1], ZONE_ORIGIN[2] + 2.2]}
-      />
-    </group>
-  );
-}

src/components/three/RepairCaseModel.tsx

@@ -1,73 +0,0 @@
-import { useEffect, useMemo, useRef } from "react";
-import { useGLTF } from "@react-three/drei";
-import gsap from "gsap";
-import * as THREE from "three";
-import type { Vector3Tuple } from "@/types/three";
-
-interface RepairCaseModelProps {
-  modelPath: string;
-  open: boolean;
-  position?: Vector3Tuple;
-  rotation?: Vector3Tuple;
-  scale?: number | Vector3Tuple;
-}
-
-const CASE_LID_NODE_NAME = "partiesup";
-const CASE_CLOSED_ROTATION_OFFSET_Z = 0;
-const CASE_OPEN_ROTATION_OFFSET_Z = THREE.MathUtils.degToRad(115);
-const CASE_ANIMATION_DURATION = 0.8;
-
-export function RepairCaseModel({
-  modelPath,
-  open,
-  position = [0, 0, 0],
-  rotation = [0, 0, 0],
-  scale = 1,
-}: RepairCaseModelProps): React.JSX.Element {
-  const { scene } = useGLTF(modelPath);
-  const model = useMemo(() => scene.clone(true), [scene]);
-  const lidRef = useRef<THREE.Object3D | null>(null);
-  const initialOpen = useRef(open);
-  const openedRotationZ = useRef(0);
-  const parsedScale =
-    typeof scale === "number" ? ([scale, scale, scale] as Vector3Tuple) : scale;
-
-  useEffect(() => {
-    const lid = model.getObjectByName(CASE_LID_NODE_NAME);
-    lidRef.current = lid ?? null;
-    openedRotationZ.current = lid?.rotation.z ?? 0;
-
-    if (lid) {
-      lid.rotation.z =
-        openedRotationZ.current +
-        (initialOpen.current
-          ? CASE_OPEN_ROTATION_OFFSET_Z
-          : CASE_CLOSED_ROTATION_OFFSET_Z);
-    }
-  }, [model]);
-
-  useEffect(() => {
-    const lid = lidRef.current;
-    if (!lid) return;
-
-    const targetRotation =
-      openedRotationZ.current +
-      (open ? CASE_OPEN_ROTATION_OFFSET_Z : CASE_CLOSED_ROTATION_OFFSET_Z);
-    gsap.to(lid.rotation, {
-      z: targetRotation,
-      duration: CASE_ANIMATION_DURATION,
-      ease: "power2.inOut",
-      overwrite: true,
-    });
-
-    return () => {
-      gsap.killTweensOf(lid.rotation);
-    };
-  }, [open]);
-
-  return (
-    <group position={position} rotation={rotation} scale={parsedScale}>
-      <primitive object={model} />
-    </group>
-  );
-}

src/components/three/gameplay/repairGame/RepairCaseModel.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useMemo, useRef } from "react";
+import { useGLTF } from "@react-three/drei";
+import { useFrame, useThree } from "@react-three/fiber";
+import gsap from "gsap";
+import * as THREE from "three";
+import {
+  REPAIR_CASE_ANIMATION_DURATION,
+  REPAIR_CASE_CLOSED_ROTATION_OFFSET_DEGREES,
+  REPAIR_CASE_FLOAT_ACTIVATION_DISTANCE,
+  REPAIR_CASE_FLOAT_DOWN_SPEED,
+  REPAIR_CASE_FLOAT_HEIGHT,
+  REPAIR_CASE_FLOAT_UP_SPEED,
+  REPAIR_CASE_LID_NODE_NAME,
+  REPAIR_CASE_OPEN_ROTATION_OFFSET_DEGREES,
+  REPAIR_CASE_ROTATION_AMPLITUDE_DEGREES,
+  REPAIR_CASE_ROTATION_RESET_SPEED,
+} from "@/data/repairGame/repairCaseConfig";
+import type { Vector3Tuple } from "@/types/three";
+
+interface RepairCaseModelProps {
+  modelPath: string;
+  open: boolean;
+  position?: Vector3Tuple;
+  rotation?: Vector3Tuple;
+  scale?: number | Vector3Tuple;
+}
+
+const CASE_CLOSED_ROTATION_OFFSET_Z = THREE.MathUtils.degToRad(
+  REPAIR_CASE_CLOSED_ROTATION_OFFSET_DEGREES,
+);
+const CASE_OPEN_ROTATION_OFFSET_Z = THREE.MathUtils.degToRad(
+  REPAIR_CASE_OPEN_ROTATION_OFFSET_DEGREES,
+);
+const ROTATION_AMPLITUDE = THREE.MathUtils.degToRad(
+  REPAIR_CASE_ROTATION_AMPLITUDE_DEGREES,
+);
+
+export function RepairCaseModel({
+  modelPath,
+  open,
+  position = [0, 0, 0],
+  rotation = [0, 0, 0],
+  scale = 1,
+}: RepairCaseModelProps): React.JSX.Element {
+  const camera = useThree((state) => state.camera);
+  const { scene } = useGLTF(modelPath);
+  const model = useMemo(() => scene.clone(true), [scene]);
+  const groupRef = useRef<THREE.Group>(null);
+  const lidRef = useRef<THREE.Object3D | null>(null);
+  const worldPosition = useRef(new THREE.Vector3());
+  const floatHeight = useRef(0);
+  const animationActiveRef = useRef(false);
+  const phase = useRef({ x: 0, y: 0, z: 0 });
+  const initialOpen = useRef(open);
+  const openedRotationZ = useRef(0);
+  const parsedScale =
+    typeof scale === "number" ? ([scale, scale, scale] as Vector3Tuple) : scale;
+
+  useEffect(() => {
+    phase.current = {
+      x: Math.random() * Math.PI * 2,
+      y: Math.random() * Math.PI * 2,
+      z: Math.random() * Math.PI * 2,
+    };
+  }, []);
+
+  useEffect(() => {
+    const lid = model.getObjectByName(REPAIR_CASE_LID_NODE_NAME);
+    lidRef.current = lid ?? null;
+    openedRotationZ.current = lid?.rotation.z ?? 0;
+
+    if (lid) {
+      lid.rotation.z =
+        openedRotationZ.current +
+        (initialOpen.current
+          ? CASE_OPEN_ROTATION_OFFSET_Z
+          : CASE_CLOSED_ROTATION_OFFSET_Z);
+    }
+  }, [model]);
+
+  useEffect(() => {
+    const lid = lidRef.current;
+    if (!lid) return;
+
+    const targetRotation =
+      openedRotationZ.current +
+      (open ? CASE_OPEN_ROTATION_OFFSET_Z : CASE_CLOSED_ROTATION_OFFSET_Z);
+    gsap.to(lid.rotation, {
+      z: targetRotation,
+      duration: REPAIR_CASE_ANIMATION_DURATION,
+      ease: "power2.inOut",
+      overwrite: true,
+    });
+
+    return () => {
+      gsap.killTweensOf(lid.rotation);
+    };
+  }, [open]);
+
+  useFrame(({ clock }, delta) => {
+    const group = groupRef.current;
+    if (!group) return;
+
+    group.getWorldPosition(worldPosition.current);
+    const isNear =
+      worldPosition.current.distanceTo(camera.position) <=
+      REPAIR_CASE_FLOAT_ACTIVATION_DISTANCE;
+    const targetHeight = isNear ? REPAIR_CASE_FLOAT_HEIGHT : 0;
+    const floatSpeed = isNear
+      ? REPAIR_CASE_FLOAT_UP_SPEED
+      : REPAIR_CASE_FLOAT_DOWN_SPEED;
+
+    floatHeight.current = THREE.MathUtils.damp(
+      floatHeight.current,
+      targetHeight,
+      floatSpeed,
+      delta,
+    );
+    group.position.y = position[1] + floatHeight.current;
+
+    animationActiveRef.current = isNear;
+
+    if (animationActiveRef.current) {
+      const time = clock.elapsedTime;
+      group.rotation.x =
+        rotation[0] +
+        Math.sin(time * 0.7 + phase.current.x) * ROTATION_AMPLITUDE;
+      group.rotation.y =
+        rotation[1] +
+        Math.sin(time * 0.55 + phase.current.y) * ROTATION_AMPLITUDE;
+      group.rotation.z =
+        rotation[2] +
+        Math.sin(time * 0.8 + phase.current.z) * ROTATION_AMPLITUDE;
+      return;
+    }
+
+    group.rotation.x = THREE.MathUtils.damp(
+      group.rotation.x,
+      rotation[0],
+      REPAIR_CASE_ROTATION_RESET_SPEED,
+      delta,
+    );
+    group.rotation.y = THREE.MathUtils.damp(
+      group.rotation.y,
+      rotation[1],
+      REPAIR_CASE_ROTATION_RESET_SPEED,
+      delta,
+    );
+    group.rotation.z = THREE.MathUtils.damp(
+      group.rotation.z,
+      rotation[2],
+      REPAIR_CASE_ROTATION_RESET_SPEED,
+      delta,
+    );
+  });
+
+  return (
+    <group
+      ref={groupRef}
+      position={position}
+      rotation={rotation}
+      scale={parsedScale}
+    >
+      <primitive object={model} />
+    </group>
+  );
+}

src/components/three/gameplay/repairGame/RepairCaseObject.tsx

@@ -1,23 +1,24 @@
-import { TriggerObject } from "@/components/three/TriggerObject";
+import { TriggerObject } from "@/components/three/interaction/TriggerObject";
-import { RepairCaseModel } from "@/components/three/RepairCaseModel";
+import { RepairCaseModel } from "@/components/three/gameplay/repairGame/RepairCaseModel";
+import {
+  REPAIR_CASE_CLOSE_SOUND_PATH,
+  REPAIR_CASE_MODEL_PATH,
+  REPAIR_CASE_OPEN_SOUND_PATH,
+} from "@/data/repairGame/repairCaseConfig";
 import { AudioManager } from "@/managers/AudioManager";
 import type { Vector3Tuple } from "@/types/three";
 
-interface MainFeatureObjectProps {
+interface RepairCaseObjectProps {
   position: Vector3Tuple;
   open: boolean;
   onToggle: () => void;
 }
 
-const CASE_MODEL_PATH = "/models/packderelance/model.gltf";
+export function RepairCaseObject({
-const CASE_OPEN_SOUND_PATH = "/sounds/effect/open-malette.mp3";
-const CASE_CLOSE_SOUND_PATH = "/sounds/effect/close-malette.mp3";
-
-export function MainFeatureObject({
   position,
   open,
   onToggle,
-}: MainFeatureObjectProps): React.JSX.Element {
+}: RepairCaseObjectProps): React.JSX.Element {
   return (
     <TriggerObject
       position={position}
@@ -25,13 +26,13 @@ export function MainFeatureObject({
       label={open ? "Fermer la mallette" : "Ouvrir la mallette"}
       onTrigger={() => {
         AudioManager.getInstance().playSound(
-          open ? CASE_CLOSE_SOUND_PATH : CASE_OPEN_SOUND_PATH,
+          open ? REPAIR_CASE_CLOSE_SOUND_PATH : REPAIR_CASE_OPEN_SOUND_PATH,
         );
         onToggle();
       }}
     >
       <RepairCaseModel
-        modelPath={CASE_MODEL_PATH}
+        modelPath={REPAIR_CASE_MODEL_PATH}
         open={open}
         position={[0, -0.45, 0]}
         scale={1.5}

src/components/three/gameplay/repairGame/RepairGameZone.tsx

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { Text } from "@react-three/drei";
+import { RepairCaseObject } from "@/components/three/gameplay/repairGame/RepairCaseObject";
+import { RepairModuleSlot } from "@/components/three/gameplay/repairGame/RepairModuleSlot";
+import {
+  REPAIR_GAME_MODULE_SLOTS,
+  REPAIR_GAME_ZONE_LABEL,
+  REPAIR_GAME_ZONE_ORIGIN,
+  REPAIR_GAME_ZONE_RADIUS,
+} from "@/data/repairGame/repairGameConfig";
+
+export function RepairGameZone(): React.JSX.Element {
+  const [caseOpen, setCaseOpen] = useState(false);
+
+  return (
+    <group>
+      <mesh
+        position={[
+          REPAIR_GAME_ZONE_ORIGIN[0],
+          0.025,
+          REPAIR_GAME_ZONE_ORIGIN[2],
+        ]}
+        rotation={[-Math.PI / 2, 0, 0]}
+      >
+        <ringGeometry
+          args={[REPAIR_GAME_ZONE_RADIUS - 0.08, REPAIR_GAME_ZONE_RADIUS, 96]}
+        />
+        <meshBasicMaterial color="#38bdf8" transparent opacity={0.72} />
+      </mesh>
+
+      <mesh
+        position={[
+          REPAIR_GAME_ZONE_ORIGIN[0],
+          0.02,
+          REPAIR_GAME_ZONE_ORIGIN[2],
+        ]}
+        rotation={[-Math.PI / 2, 0, 0]}
+      >
+        <circleGeometry args={[REPAIR_GAME_ZONE_RADIUS, 96]} />
+        <meshBasicMaterial color="#0ea5e9" transparent opacity={0.12} />
+      </mesh>
+
+      <Text
+        position={[
+          REPAIR_GAME_ZONE_ORIGIN[0],
+          3.1,
+          REPAIR_GAME_ZONE_ORIGIN[2] - 1.8,
+        ]}
+        rotation={[0, 0, 0]}
+        fontSize={0.55}
+        maxWidth={5.5}
+        textAlign="center"
+        anchorX="center"
+        anchorY="middle"
+        color="#f8fafc"
+        outlineWidth={0.025}
+        outlineColor="#0f172a"
+      >
+        {REPAIR_GAME_ZONE_LABEL}
+      </Text>
+
+      <RepairCaseObject
+        position={REPAIR_GAME_ZONE_ORIGIN}
+        open={caseOpen}
+        onToggle={() => setCaseOpen((value) => !value)}
+      />
+
+      {REPAIR_GAME_MODULE_SLOTS.map((slot) => (
+        <RepairModuleSlot
+          key={slot.label}
+          label={slot.label}
+          position={[
+            REPAIR_GAME_ZONE_ORIGIN[0] + slot.offset[0],
+            REPAIR_GAME_ZONE_ORIGIN[1] + slot.offset[1],
+            REPAIR_GAME_ZONE_ORIGIN[2] + slot.offset[2],
+          ]}
+        />
+      ))}
+    </group>
+  );
+}

src/components/three/gameplay/repairGame/RepairModuleSlot.tsx

@@ -1,21 +1,21 @@
 import { Html } from "@react-three/drei";
 import { useCallback, useState } from "react";
-import { TriggerObject } from "@/components/three/TriggerObject";
+import { TriggerObject } from "@/components/three/interaction/TriggerObject";
-import { ExplodableModel } from "@/components/three/ExplodableModel";
+import { ExplodableModel } from "@/components/three/models/ExplodableModel";
-import { MAIN_FEATURE_MODEL_CATALOG } from "@/data/mainFeature/modelCatalog";
+import { REPAIR_GAME_MODEL_CATALOG } from "@/data/repairGame/repairGameModelCatalog";
-import type { ModelCatalogItem } from "@/data/mainFeature/modelCatalog";
+import type { ModelCatalogItem } from "@/data/repairGame/repairGameModelCatalog";
 import { useModelSelection } from "@/hooks/useModelSelection";
 import type { Vector3Tuple } from "@/types/three";
 
-interface ModelSelectorPlaceholderProps {
+interface RepairModuleSlotProps {
   position: Vector3Tuple;
   label: string;
 }
 
-export function ModelSelectorPlaceholder({
+export function RepairModuleSlot({
   position,
   label,
-}: ModelSelectorPlaceholderProps): React.JSX.Element {
+}: RepairModuleSlotProps): React.JSX.Element {
   const [selectedModel, setSelectedModel] = useState<ModelCatalogItem | null>(
     null,
   );
@@ -24,7 +24,7 @@ export function ModelSelectorPlaceholder({
     setSelectedModel(model);
     setSplit(false);
   }, []);
-  const selection = useModelSelection(MAIN_FEATURE_MODEL_CATALOG, handleSelect);
+  const selection = useModelSelection(REPAIR_GAME_MODEL_CATALOG, handleSelect);
   const triggerLabel = selectedModel
     ? split
       ? `Réassembler ${label}`
@@ -72,7 +72,7 @@ export function ModelSelectorPlaceholder({
             <span>Fleches: choisir</span>
             <span>E/Enter: valider</span>
             <ul>
-              {MAIN_FEATURE_MODEL_CATALOG.map((model, index) => (
+              {REPAIR_GAME_MODEL_CATALOG.map((model, index) => (
                 <li
                   key={model.path}
                   className={

src/components/three/index.ts

@@ -1,14 +0,0 @@
-export { AnimatedModel, useAnimatedModel } from "./AnimatedModel";
-export type { AnimatedModelConfig } from "./AnimatedModel";
-
-export { SimpleModel } from "./SimpleModel";
-export type { SimpleModelConfig } from "./SimpleModel";
-
-export { ExplodableModel } from "./ExplodableModel";
-export { MainFeatureZone } from "./MainFeatureZone";
-export { MainFeatureObject } from "./MainFeatureObject";
-export { ModelSelectorPlaceholder } from "./ModelSelectorPlaceholder";
-export { RepairCaseModel } from "./RepairCaseModel";
-
-export { useCharacterAnimation } from "@/hooks/useCharacterAnimation";
-export type { CharacterAnimationConfig } from "@/hooks/useCharacterAnimation";

src/components/three/interaction/GrabbableObject.tsx

@@ -3,7 +3,7 @@ import { useFrame, useThree } from "@react-three/fiber";
 import { RigidBody } from "@react-three/rapier";
 import type { RapierRigidBody } from "@react-three/rapier";
 import * as THREE from "three";
-import { InteractableObject } from "@/components/three/InteractableObject";
+import { InteractableObject } from "@/components/three/interaction/InteractableObject";
 import {
   GRAB_DEFAULT_COLLIDERS,
   GRAB_DEFAULT_LABEL,
@@ -39,7 +39,7 @@ interface GrabbableObjectProps {
 }
 
 // Shared params let one debug folder drive every instance.
-const params = {
+const grabDebugParams = {
   stiffness: GRAB_STIFFNESS_DEFAULT,
   throwBoost: GRAB_THROW_BOOST_DEFAULT,
   holdDistance: GRAB_HOLD_DISTANCE_DEFAULT,
@@ -137,7 +137,7 @@ export function GrabbableObject({
   useDebugFolder("GrabbableObject", (folder) => {
     folder
       .add(
-        params,
+        grabDebugParams,
         "stiffness",
         GRAB_STIFFNESS_MIN,
         GRAB_STIFFNESS_MAX,
@@ -146,7 +146,7 @@ export function GrabbableObject({
       .name("Hold stiffness");
     folder
       .add(
-        params,
+        grabDebugParams,
         "throwBoost",
         GRAB_THROW_BOOST_MIN,
         GRAB_THROW_BOOST_MAX,
@@ -155,7 +155,7 @@ export function GrabbableObject({
       .name("Throw boost");
     folder
       .add(
-        params,
+        grabDebugParams,
         "holdDistance",
         GRAB_HOLD_DISTANCE_MIN,
         GRAB_HOLD_DISTANCE_MAX,
@@ -211,7 +211,8 @@ export function GrabbableObject({
           ? 0
           : (fistHand.z - handHoldStartZ.current) * HAND_DEPTH_SENSITIVITY;
       const holdDistance = THREE.MathUtils.clamp(
-        (handHoldDistance.current ?? params.holdDistance) + depthOffset,
+        (handHoldDistance.current ?? grabDebugParams.holdDistance) +
+          depthOffset,
         GRAB_HOLD_DISTANCE_MIN,
         GRAB_HOLD_DISTANCE_MAX,
       );
@@ -221,12 +222,14 @@ export function GrabbableObject({
         .addScaledVector(_handDirection, holdDistance);
     } else {
       camera.getWorldDirection(_holdTarget);
-      _holdTarget.multiplyScalar(params.holdDistance).add(camera.position);
+      _holdTarget
+        .multiplyScalar(grabDebugParams.holdDistance)
+        .add(camera.position);
     }
 
     _velocity
       .subVectors(_holdTarget, _currentPos)
-      .multiplyScalar(params.stiffness);
+      .multiplyScalar(grabDebugParams.stiffness);
 
     rbRef.current.setLinvel(
       { x: _velocity.x, y: _velocity.y, z: _velocity.z },
@@ -255,15 +258,15 @@ export function GrabbableObject({
             isHolding.current = false;
             if (
               !rbRef.current ||
-              params.throwBoost === GRAB_THROW_BOOST_DEFAULT
+              grabDebugParams.throwBoost === GRAB_THROW_BOOST_DEFAULT
             )
               return;
             const v = rbRef.current.linvel();
             rbRef.current.setLinvel(
               {
-                x: v.x * params.throwBoost,
+                x: v.x * grabDebugParams.throwBoost,
-                y: v.y * params.throwBoost,
+                y: v.y * grabDebugParams.throwBoost,
-                z: v.z * params.throwBoost,
+                z: v.z * grabDebugParams.throwBoost,
               },
               true,
             );

src/components/three/interaction/TriggerObject.tsx

@@ -1,7 +1,7 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useGLTF } from "@react-three/drei";
 import { RigidBody } from "@react-three/rapier";
-import { InteractableObject } from "@/components/three/InteractableObject";
+import { InteractableObject } from "@/components/three/interaction/InteractableObject";
 import {
   TRIGGER_DEFAULT_COLLIDERS,
   TRIGGER_DEFAULT_LABEL,
@@ -28,7 +28,7 @@ interface TriggerObjectProps {
   onTrigger?: () => void;
 }
 
-let _spawnCounter = 0;
+let spawnCounter = 0;
 
 function SpawnedModelInstance({
   path,
@@ -38,7 +38,9 @@ function SpawnedModelInstance({
   position: Vector3Tuple;
 }): React.JSX.Element {
   const { scene } = useGLTF(path);
-  return <primitive object={scene.clone()} position={position} />;
+  const model = useMemo(() => scene.clone(true), [scene]);
+
+  return <primitive object={model} position={position} />;
 }
 
 export function TriggerObject({
@@ -76,7 +78,7 @@ export function TriggerObject({
               ];
               setSpawned((prev) => [
                 ...prev,
-                { id: ++_spawnCounter, position: spawnPos },
+                { id: ++spawnCounter, position: spawnPos },
               ]);
             }
           }}

src/components/three/models/AnimatedModel.tsx

@@ -1,8 +1,11 @@
-/* eslint-disable react-hooks/immutability */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { createContext, useRef, useState, useEffect, useCallback } from "react";
 import { useGLTF, useAnimations } from "@react-three/drei";
 import type { AnimationAction } from "three";
 import * as THREE from "three";
+import {
+  AnimatedModelContext,
+  type AnimatedModelContextValue,
+} from "@/components/three/models/useAnimatedModel";
 import type { Vector3Tuple } from "@/types/three";
 
 export interface AnimatedModelConfig {
@@ -19,22 +22,6 @@ export interface AnimatedModelConfig {
   onAnimationEnd?: (animationName: string) => void;
 }
 
-export interface AnimatedModelContextValue {
-  play: (name: string, fade?: number) => void;
-  stop: (fade?: number) => void;
-  fadeTo: (name: string, fade?: number) => void;
-  currentAnimation: string;
-  isReady: boolean;
-  setSpeed: (speed: number) => void;
-  names: string[];
-}
-
-const AnimatedModelContext = createContext<AnimatedModelContextValue | null>(
-  null,
-);
-
-export { AnimatedModelContext };
-
 interface AnimatedModelProps extends AnimatedModelConfig {
   children?: React.ReactNode;
 }
@@ -53,19 +40,18 @@ export function AnimatedModel({
   children,
 }: AnimatedModelProps): React.JSX.Element {
   const groupRef = useRef<THREE.Group>(null);
-
-  void groupRef;
   const { scene, animations } = useGLTF(modelPath);
-  const { actions, names, mixer } = useAnimations(animations, scene);
+  const model = useMemo(() => scene.clone(true), [scene]);
+  const { actions, names, mixer } = useAnimations(animations, groupRef);
 
   const [currentAnim, setCurrentAnim] = useState(defaultAnimation);
-  const [isReady, setIsReady] = useState(false);
+  const isReady = names.length > 0;
 
   useEffect(() => {
-    if (mixer) {
+    Object.values(actions).forEach((action) => {
-      mixer.timeScale = speed;
+      action?.setEffectiveTimeScale(speed);
-    }
+    });
-  }, [mixer, speed]);
+  }, [actions, speed]);
 
   useEffect(() => {
     const handleFinished = (e: { action: AnimationAction }) => {
@@ -123,39 +109,27 @@ export function AnimatedModel({
 
   const setSpeed = useCallback(
     (newSpeed: number) => {
-      if (mixer) {
+      Object.values(actions).forEach((action) => {
-        mixer.timeScale = newSpeed;
+        action?.setEffectiveTimeScale(newSpeed);
-      }
+      });
     },
-    [mixer],
+    [actions],
   );
 
   useEffect(() => {
     if (!autoPlay || names.length === 0) {
-      console.log("[AnimatedModel] No animation found in model");
       return;
     }
 
-    console.log(`[AnimatedModel] Available animations: ${names.join(", ")}`);
-
     let defaultAction = actions[defaultAnimation as string];
 
     if (!defaultAction && names.length > 0) {
-      console.log(
-        `[AnimatedModel] "${defaultAnimation}" not found, using: ${names[0]}`,
-      );
       defaultAction = actions[names[0] as string];
     }
 
     if (defaultAction) {
       defaultAction.play();
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setIsReady(true);
-
-      setCurrentAnim(defaultAction.getClip().name);
       onLoaded?.();
-    } else {
-      console.log("[AnimatedModel] No available animation in actions");
     }
   }, [actions, defaultAnimation, names, autoPlay, onLoaded]);
 
@@ -169,21 +143,19 @@ export function AnimatedModel({
     names,
   };
 
-  useEffect(() => {
+  const parsedScale =
-    scene.position.set(...position);
+    typeof scale === "number" ? ([scale, scale, scale] as Vector3Tuple) : scale;
-    scene.rotation.set(
-      (rotation[0] * Math.PI) / 180,
-      (rotation[1] * Math.PI) / 180,
-      (rotation[2] * Math.PI) / 180,
-    );
-    const s =
-      typeof scale === "number" ? [scale, scale, scale] : (scale ?? [1, 1, 1]);
-    scene.scale.set(s[0] ?? 1, s[1] ?? 1, s[2] ?? 1);
-  }, [scene, position, rotation, scale]);
 
   return (
     <AnimatedModelContext.Provider value={contextValue}>
-      <primitive object={scene} />
+      <group
+        ref={groupRef}
+        position={position}
+        rotation={rotation}
+        scale={parsedScale}
+      >
+        <primitive object={model} />
+      </group>
       {children}
     </AnimatedModelContext.Provider>
   );

src/components/three/models/SimpleModel.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { useGLTF } from "@react-three/drei";
 import type { Vector3Tuple } from "@/types/three";
 
@@ -24,6 +25,7 @@ export function SimpleModel({
   children,
 }: SimpleModelProps): React.JSX.Element {
   const { scene } = useGLTF(modelPath);
+  const model = useMemo(() => scene.clone(true), [scene]);
 
   const parsedScale =
     typeof scale === "number" ? ([scale, scale, scale] as Vector3Tuple) : scale;
@@ -32,7 +34,7 @@ export function SimpleModel({
     <group position={position} rotation={rotation} scale={parsedScale}>
       {children ?? (
         <primitive
-          object={scene.clone()}
+          object={model}
           castShadow={castShadow}
           receiveShadow={receiveShadow}
         />

src/components/three/models/useAnimatedModel.ts

@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+
+export interface AnimatedModelContextValue {
+  play: (name: string, fade?: number) => void;
+  stop: (fade?: number) => void;
+  fadeTo: (name: string, fade?: number) => void;
+  currentAnimation: string;
+  isReady: boolean;
+  setSpeed: (speed: number) => void;
+  names: string[];
+}
+
+export const AnimatedModelContext =
+  createContext<AnimatedModelContextValue | null>(null);
+
+export function useAnimatedModel(): AnimatedModelContextValue {
+  const context = useContext(AnimatedModelContext);
+  if (!context) {
+    throw new Error("useAnimatedModel must be used inside AnimatedModel");
+  }
+
+  return context;
+}

src/data/docs/docsTranslations.ts

@@ -106,9 +106,9 @@ Ce document décrit le code réellement présent aujourd'hui dans le dépôt.
 ## Modèle d'interaction
 
 - \`src/managers/InteractionManager.ts\` est la source d'état actuelle des interactions.
-- \`src/components/three/InteractableObject.tsx\` gère la détection de focus par distance et raycasting.
+- \`src/components/three/interaction/InteractableObject.tsx\` gère la détection de focus par distance et raycasting.
-- \`src/components/three/TriggerObject.tsx\` implémente les interactions de type trigger.
+- \`src/components/three/interaction/TriggerObject.tsx\` implémente les interactions de type trigger.
-- \`src/components/three/GrabbableObject.tsx\` implémente les interactions saisir / relâcher.
+- \`src/components/three/interaction/GrabbableObject.tsx\` implémente les interactions saisir / relâcher.
 - \`src/hooks/useInteraction.ts\` expose un snapshot d'interaction à l'UI React.
 - \`src/components/ui/InteractPrompt.tsx\` affiche le prompt \`E\` pour les interactions trigger.
 

src/data/repairGame/repairCaseConfig.ts

@@ -0,0 +1,15 @@
+export const REPAIR_CASE_MODEL_PATH = "/models/packderelance/model.gltf";
+export const REPAIR_CASE_OPEN_SOUND_PATH = "/sounds/effect/open-malette.mp3";
+export const REPAIR_CASE_CLOSE_SOUND_PATH = "/sounds/effect/close-malette.mp3";
+
+export const REPAIR_CASE_LID_NODE_NAME = "partiesup";
+export const REPAIR_CASE_CLOSED_ROTATION_OFFSET_DEGREES = 0;
+export const REPAIR_CASE_OPEN_ROTATION_OFFSET_DEGREES = 115;
+export const REPAIR_CASE_ANIMATION_DURATION = 0.8;
+
+export const REPAIR_CASE_FLOAT_ACTIVATION_DISTANCE = 5;
+export const REPAIR_CASE_FLOAT_HEIGHT = 1;
+export const REPAIR_CASE_FLOAT_UP_SPEED = 2.4;
+export const REPAIR_CASE_FLOAT_DOWN_SPEED = 1.8;
+export const REPAIR_CASE_ROTATION_RESET_SPEED = 3;
+export const REPAIR_CASE_ROTATION_AMPLITUDE_DEGREES = 5;

src/data/repairGame/repairGameConfig.ts

@@ -0,0 +1,11 @@
+import type { Vector3Tuple } from "@/types/three";
+
+export const REPAIR_GAME_ZONE_ORIGIN: Vector3Tuple = [10, 0.4, -8];
+export const REPAIR_GAME_ZONE_RADIUS = 4.2;
+export const REPAIR_GAME_ZONE_LABEL = "Pack de Relance Feature";
+
+export const REPAIR_GAME_MODULE_SLOTS = [
+  { label: "Module A", offset: [-2.2, 0, 2.2] },
+  { label: "Module B", offset: [0, 0, 2.6] },
+  { label: "Module C", offset: [2.2, 0, 2.2] },
+] satisfies Array<{ label: string; offset: Vector3Tuple }>;

src/data/repairGame/repairGameModelCatalog.ts

@@ -3,7 +3,7 @@ export interface ModelCatalogItem {
   path: string;
 }
 
-export const MAIN_FEATURE_MODEL_CATALOG: ModelCatalogItem[] = [
+export const REPAIR_GAME_MODEL_CATALOG: ModelCatalogItem[] = [
   { name: "Electricienne", path: "/models/elecsimple/model.gltf" },
   { name: "Electricienne complete", path: "/models/elec/model.gltf" },
   { name: "Eolienne", path: "/models/eolienne/model.gltf" },

src/hooks/useCharacterAnimation.ts

@@ -1,5 +1,4 @@
-/* eslint-disable react-hooks/immutability */
+import { useRef, useEffect, useState, useCallback, useMemo } from "react";
-import { useRef, useEffect, useState, useCallback } from "react";
 import { useGLTF, useAnimations } from "@react-three/drei";
 import type { AnimationAction, AnimationMixer } from "three";
 import * as THREE from "three";
@@ -36,6 +35,7 @@ export function useCharacterAnimation(
 
   const groupRef = useRef<THREE.Group | null>(null);
   const { scene, animations } = useGLTF(modelPath);
+  const model = useMemo(() => scene.clone(true), [scene]);
   const { actions, names, mixer } = useAnimations(animations, groupRef);
   const [currentAnimation, setCurrentAnimation] = useState(initialAnimation);
 
@@ -78,11 +78,11 @@ export function useCharacterAnimation(
 
   const setAnimationSpeed = useCallback(
     (speed: number) => {
-      if (mixer) {
+      Object.values(actions).forEach((action) => {
-        mixer.timeScale = speed;
+        action?.setEffectiveTimeScale(speed);
-      }
+      });
     },
-    [mixer],
+    [actions],
   );
 
   useEffect(() => {
@@ -93,7 +93,7 @@ export function useCharacterAnimation(
   }, [actions, initialAnimation]);
 
   return {
-    scene,
+    scene: model,
     actions,
     names,
     mixer,

src/hooks/useModelSelection.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
-import type { ModelCatalogItem } from "@/data/mainFeature/modelCatalog";
+import type { ModelCatalogItem } from "@/data/repairGame/repairGameModelCatalog";
 
 interface UseModelSelectionResult {
   isOpen: boolean;

src/world/Environment.tsx

@@ -3,7 +3,7 @@ import {
   PHYSICS_SCENE_BACKGROUND_COLOR,
 } from "@/data/world/environmentConfig";
 import { useSceneMode } from "@/hooks/debug/useSceneMode";
-import { SkyModel } from "@/components/three/SkyModel";
+import { SkyModel } from "@/components/three/world/SkyModel";
 
 export function Environment(): React.JSX.Element {
   const sceneMode = useSceneMode();

src/world/debug/TestMap.tsx

@@ -1,9 +1,9 @@
 import { useRef } from "react";
 import * as THREE from "three";
 import { Physics, RigidBody, CuboidCollider } from "@react-three/rapier";
-import { GrabbableObject } from "@/components/three/GrabbableObject";
+import { RepairGameZone } from "@/components/three/gameplay/repairGame/RepairGameZone";
-import { MainFeatureZone } from "@/components/three/MainFeatureZone";
+import { GrabbableObject } from "@/components/three/interaction/GrabbableObject";
-import { TriggerObject } from "@/components/three/TriggerObject";
+import { TriggerObject } from "@/components/three/interaction/TriggerObject";
 import {
   TEST_SCENE_FLOOR_COLLIDER_HALF_EXTENTS,
   TEST_SCENE_FLOOR_POSITION,
@@ -85,7 +85,7 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
           </mesh>
         </TriggerObject>
 
-        <MainFeatureZone />
+        <RepairGameZone />
       </Physics>
 
       {/* Temporary: re-enable when Git LFS downloads are available again.