Tom Boullay
1db7c22a90
📦 Model ✅ model.glb (compressed) 🎨 Textures ✅ tiges_normal.png ✅ comptoir_normal_opengl.png ✅ porte_metallic.png ✅ tiges_height.png ✅ comptoir_mixed_ao.png ✅ tiges_metallic.png ✅ tiges_normal_opengl.png ✅ comptoir_roughness.png ✅ fenetre_0_base_color.png ✅ bat_roughness.png ✅ tiges_base_color.png ✅ comptoir_normal.png ✅ porte_normal.png ✅ toit_roughness.png ✅ comptoir_height.png ✅ porte_height.png ✅ porte_mixed_ao.png ✅ comptoir_metallic.png ✅ tiges_mixed_ao.png ✅ porte_normal_opengl.png ✅ dashboard_metallic.png ✅ anneaux_metallic.png ✅ anneaux_base_color.png ✅ panneau_normal_opengl.png ✅ toit_mixed_ao.png ✅ anneaux_roughness.png ✅ porte_stock_base_color.png ✅ tuyaux_mixed_ao.png ✅ fenetre_0_mixed_ao.png ✅ dashboard_base_color.png ✅ anneaux_mixed_ao.png ✅ dashboard_mixed_ao.png ✅ bat_base_color.png ✅ tuyaux_height.png ✅ tuyaux_metallic.png ✅ verre_fenetre_base_color.png ✅ bat_height.png ✅ anneaux_normal.png ✅ toit_metallic.png ✅ porte_stock_height.png ✅ bat_normal.png ✅ porte_stock_roughness.png ✅ tuyaux_normal.png ✅ fenetre_0_metallic.png ✅ porte_stock_normal.png ✅ tuyaux_roughness.png ✅ anneaux_height.png ✅ comptoir_base_color.png ✅ panneau_height.png ✅ panneau_base_color.png ✅ porte_stock_mixed_ao.png ✅ panneau_normal.png ✅ bat_mixed_ao.png ✅ anneaux_normal_opengl.png ✅ stock_0_mixed_ao.png ✅ tuyaux_base_color.png ✅ fenetre_0_normal_opengl.png ✅ porte_roughness.png ✅ porte_base_color.png ✅ toit_normal_opengl.png ✅ plan_de_travail_normal.png ✅ plan_de_travail_roughness.png ✅ plan_de_travail_height.png ✅ porte_stock_metallic.png ✅ toit_base_color.png ✅ stock_0_metallic.png ✅ stock_0_normal.png ✅ verre_fenetre_normal.png ✅ plan_de_travail_normal_opengl.png ✅ bat_metallic.png ✅ stock_0_base_color.png ✅ stock_0_height.png ✅ tiges_roughness.png ✅ fenetre_0_roughness.png ✅ verre_fenetre_height.png ✅ panneau_roughness.png ✅ fenetre_0_normal.png ✅ plan_de_travail_metallic.png ✅ dashboard_normal_opengl.png ✅ tuyaux_normal_opengl.png ✅ plan_de_travail_base_color.png ✅ fenetre_0_height.png ✅ porte_stock_normal_opengl.png ✅ panneau_mixed_ao.png ✅ dashboard_height.png ✅ verre_fenetre_normal_opengl.png ✅ toit_normal.png ✅ dashboard_normal.png ✅ bat_normal_opengl.png ✅ verre_fenetre_metallic.png ✅ toit_height.png ✅ plan_de_travail_mixed_ao.png ✅ stock_0_roughness.png ✅ panneau_metallic.png ✅ dashboard_roughness.png ✅ stock_0_normal_opengl.png ✅ verre_fenetre_roughness.png ✅ verre_fenetre_mixed_ao.png
La-Fabrik
An interactive 3D web experience for La Fabrik Durable — a low-tech repair and transformation service in Altera, a post-capitalist city rebuilt in 2039. Players step into the role of a newly onboarded technician and experience a day at the service: repairing an e-bike, fixing a power grid, and upgrading a vertical farm's irrigation system.
Built with React, Three.js, and Vite. Runs in the browser, no installation required.
📦 Tech Stack
Build & Language
| Package | Doc |
|---|---|
| TypeScript | https://www.typescriptlang.org/docs/ |
| React | https://react.dev/learn |
| Vite | https://vite.dev/guide/ |
| ESLint | https://eslint.org/docs/latest/ |
| Prettier | https://prettier.io/docs/ |
3D Engine
Performance & Effects
| Package | Doc |
|---|---|
| r3f-perf | https://github.com/utsuboco/r3f-perf |
| AnimationMixer | https://threejs.org/docs/#api/en/animation/AnimationMixer |
🗂 Project Structure
la-fabrik/
├── public/
│ ├── models/
│ │ ├── map/ # Base map — loaded once at start
│ │ ├── workshop/
│ │ ├── powerGrid/
│ │ └── farm/
│ ├── textures/
│ └── sounds/
│
└── src/
├── world/ # Single persistent 3D world
│ ├── Map.tsx # Base map, always mounted
│ ├── Lighting.tsx # Ambient, directional, point lights
│ ├── Environment.tsx # HDRI, fog, sky
│ ├── PostFX.tsx # Bloom, SSAO, chromatic aberration
│ ├── zones/ # Spatial zones — LOD per zone
│ │ ├── WorkshopZone.tsx
│ │ ├── PowerGridZone.tsx
│ │ ├── FarmZone.tsx
│ │ ├── SchoolZone.tsx
│ │ └── ResidentialZone.tsx
│ └── player/
│ ├── FPSController.tsx # PointerLockControls + Rapier movement
│ └── Crosshair.tsx
│
├── components/
│ ├── 3d/ # Shared reusable 3D elements
│ │ └── InteractiveObject.tsx # Raycasting + outline wrapper
│ └── ui/ # HTML overlays — outside Canvas
│ ├── NarrativeOverlay.tsx # Floating dialogues
│ ├── MissionHUD.tsx # Current objective
│ ├── MapHUD.tsx # Minimap
│ ├── CinematicBars.tsx # GSAP black bars
│ └── LoadingScreen.tsx # Asset progress
│
├── stateManager/ # All logic, state, orchestration
│ ├── GameManager.ts # Single source of truth: phase, zone, mission
│ ├── CinematicManager.ts # GSAP timelines, camera lock/unlock
│ ├── AudioManager.ts # Music, SFX, spatial audio
│ └── ZoneManager.ts # Zone detection, LOD triggers
│
├── hooks/ # React hooks — thin wrappers on managers
│ ├── useGameState.ts # Subscribes to GameManager
│ ├── useZoneDetection.ts
│ ├── useInteraction.ts
│ ├── useCinematic.ts
│ ├── useAudio.ts
│ └── useLOD.ts
│
├── data/
│ ├── zones.ts # { id, position, radius, missionId }
│ ├── dialogues.ts # Narrative scripts, PNJ states
│ └── missions.ts # Mission definitions, steps
│
├── shaders/
│ └── hologram/
│ ├── vertex.glsl
│ └── fragment.glsl
│
├── utils/
│ ├── Debug.ts # lil-gui panel
│ ├── EventEmitter.ts # Simple pub/sub for manager-to-manager events
│ └── Dispose.ts # traverse() + dispose() helper
│
├── App.tsx # Canvas + UI superimposed
└── main.tsx
🚀 Getting Started
git clone https://github.com/La-Fabrik-Durable/La-Fabrik.git
cd La-Fabrik
npm install
npm run dev
Open http://localhost:5173 — standard experience.
Open http://localhost:5173?debug — debug panel + r3f-perf overlay.
📜 License
See LICENSE file.