docs: document model gallery

README.md

@@ -25,12 +25,13 @@ The current prototype puts the player in a repair-oriented world where they prog
 
 ## Routes
 
-| Route     | Purpose                                             |
+| Route      | Purpose                                             |
-| --------- | --------------------------------------------------- |
+| ---------- | --------------------------------------------------- |
-| `/`       | Playable 3D experience                              |
+| `/`        | Playable 3D experience                              |
-| `/?debug` | Playable scene with debug GUI and overlays          |
+| `/?debug`  | Playable scene with debug GUI and overlays          |
-| `/editor` | Local map, dialogue, subtitle, and cinematic editor |
+| `/editor`  | Local map, dialogue, subtitle, and cinematic editor |
-| `/docs`   | In-app documentation index                          |
+| `/galerie` | 3D model gallery for browsing project assets        |
+| `/docs`    | In-app documentation index                          |
 
 ## Tech Stack
 
@@ -98,6 +99,7 @@ Useful local URLs:
 ```txt
 http://localhost:5173/?debug
 http://localhost:5173/editor
+http://localhost:5173/galerie
 http://localhost:5173/docs
 ```
 
@@ -148,6 +150,7 @@ WS  ws://localhost:8000/ws
 | `docs/user/features.md`                 | Implemented feature inventory                              |
 | `docs/user/main-feature.md`             | User-facing repair-game walkthrough                        |
 | `docs/user/editor.md`                   | Editor user guide                                          |
+| `docs/user/gallery.md`                  | Model gallery user guide                                   |
 | `docs/code-review-preparation.md`       | French code-review preparation support                     |
 
 ## Current Caveats

docs/user/gallery.md

@@ -0,0 +1,41 @@
+# Galerie des modèles
+
+La galerie est disponible sur `/galerie`. Elle permet de parcourir les modèles 3D présents dans `public/models/` sans lancer la boucle de gameplay principale.
+
+## Objectif
+
+Cette page sert à remercier et valoriser le travail des designers du projet La Fabrik. Chaque modèle est affiché dans un canvas dédié, avec la même skybox que l'expérience principale pour garder une ambiance visuelle cohérente.
+
+## Utilisation
+
+1. Ouvrir `/galerie`.
+2. Utiliser les flèches pour passer au modèle précédent ou suivant.
+3. Tourner autour du modèle avec la souris ou le doigt.
+4. Lire le chemin affiché pour retrouver le fichier source dans `public/models/`.
+
+## Fonctionnement
+
+- La liste des modèles est déclarée dans `src/data/galleryModels.ts`.
+- Le viewer utilise `@react-three/fiber` et `@react-three/drei`.
+- `OrbitControls` permet de manipuler la caméra autour du modèle.
+- `Bounds` et `Center` recadrent automatiquement le modèle actif.
+- `SkyModel` réutilise la skybox du jeu.
+- Les animations GLTF présentes dans un modèle sont lancées automatiquement.
+
+## Ajouter un modèle
+
+1. Ajouter le dossier du modèle dans `public/models/{nom}`.
+2. Vérifier que le modèle possède un fichier chargeable, par exemple `model.gltf`, `model.glb` ou un nom explicite comme `potager.gltf`.
+3. Ajouter une entrée dans `src/data/galleryModels.ts` avec un `id`, un `name` et un `path`.
+
+Exemple :
+
+```ts
+{ id: "nouveau-modele", name: "Nouveau modèle", path: "/models/nouveau-modele/model.gltf" }
+```
+
+## Limites connues
+
+- Le navigateur ne liste pas automatiquement les dossiers de `public/models/`, donc la liste reste déclarative.
+- Les modèles très lourds peuvent prendre du temps à charger.
+- La galerie est un viewer simple : elle ne remplace pas les outils d'inspection avancée comme Blender ou le viewer d'upload.

src/data/docs/docsSections.ts

@@ -109,6 +109,12 @@ export const docGroups: DocGroup[] = [
         subtitle: "Components and usage",
         meta: "15",
       },
+      {
+        path: "/docs/gallery",
+        title: "Model Gallery",
+        subtitle: "Browsing 3D assets",
+        meta: "16",
+      },
     ],
   },
   {
@@ -118,7 +124,7 @@ export const docGroups: DocGroup[] = [
         path: "/docs/code-review",
         title: "Code Review Prep",
         subtitle: "Presentation support",
-        meta: "16",
+        meta: "17",
       },
     ],
   },

src/pages/docs/gallery/page.tsx

@@ -0,0 +1,13 @@
+import gallery from "../../../../docs/user/gallery.md?raw";
+import { DocsDocument } from "@/components/docs/DocsDocument";
+
+export function DocsGalleryPage(): React.JSX.Element {
+  return (
+    <DocsDocument
+      content={gallery}
+      frContent={gallery}
+      meta="16"
+      title="Model Gallery"
+    />
+  );
+}

src/router.tsx

@@ -14,6 +14,7 @@ import {
   DocsCodeReviewRoute,
   DocsEditorRoute,
   DocsFeaturesRoute,
+  DocsGalleryRoute,
   DocsHandTrackingRoute,
   DocsInteractionRoute,
   DocsLayoutRoute,
@@ -73,6 +74,7 @@ const docsChildRoutes = [
   { path: "main-feature", component: DocsMainFeatureRoute },
   { path: "editor", component: DocsEditorRoute },
   { path: "animation", component: DocsAnimationRoute },
+  { path: "gallery", component: DocsGalleryRoute },
   { path: "code-review", component: DocsCodeReviewRoute },
 ].map(({ path, component }) =>
   createRoute({

src/routes/DocsRoute.tsx

@@ -87,6 +87,10 @@ const LazyDocsAnimationPage = lazyNamed(
   () => import("@/pages/docs/animation/page"),
   "DocsAnimationPage",
 );
+const LazyDocsGalleryPage = lazyNamed(
+  () => import("@/pages/docs/gallery/page"),
+  "DocsGalleryPage",
+);
 const LazyDocsCodeReviewPage = lazyNamed(
   () => import("@/pages/docs/code-review/page"),
   "DocsCodeReviewPage",
@@ -119,6 +123,7 @@ export const DocsFeaturesRoute = createDocsRoute(LazyDocsFeaturesPage);
 export const DocsMainFeatureRoute = createDocsRoute(LazyDocsMainFeaturePage);
 export const DocsEditorRoute = createDocsRoute(LazyDocsEditorPage);
 export const DocsAnimationRoute = createDocsRoute(LazyDocsAnimationPage);
+export const DocsGalleryRoute = createDocsRoute(LazyDocsGalleryPage);
 export const DocsCodeReviewRoute = createDocsRoute(LazyDocsCodeReviewPage);
 export const DocsMissionFlowRoute = createDocsRoute(LazyDocsMissionFlowPage);
 export const DocsThreeDebuggingRoute = createDocsRoute(