diff --git a/README.md b/README.md index b2dcd37..f92fa29 100644 --- a/README.md +++ b/README.md @@ -25,12 +25,13 @@ The current prototype puts the player in a repair-oriented world where they prog ## Routes -| Route | Purpose | -| --------- | --------------------------------------------------- | -| `/` | Playable 3D experience | -| `/?debug` | Playable scene with debug GUI and overlays | -| `/editor` | Local map, dialogue, subtitle, and cinematic editor | -| `/docs` | In-app documentation index | +| Route | Purpose | +| ---------- | --------------------------------------------------- | +| `/` | Playable 3D experience | +| `/?debug` | Playable scene with debug GUI and overlays | +| `/editor` | Local map, dialogue, subtitle, and cinematic editor | +| `/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 diff --git a/docs/user/gallery.md b/docs/user/gallery.md new file mode 100644 index 0000000..86fea7d --- /dev/null +++ b/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. diff --git a/src/data/docs/docsSections.ts b/src/data/docs/docsSections.ts index 0070a5a..4389b45 100644 --- a/src/data/docs/docsSections.ts +++ b/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", }, ], }, diff --git a/src/pages/docs/gallery/page.tsx b/src/pages/docs/gallery/page.tsx new file mode 100644 index 0000000..8b1edaa --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/router.tsx b/src/router.tsx index 4065a5e..d1a009c 100644 --- a/src/router.tsx +++ b/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({ diff --git a/src/routes/DocsRoute.tsx b/src/routes/DocsRoute.tsx index 86f775a..18eebd2 100644 --- a/src/routes/DocsRoute.tsx +++ b/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(