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.
📦 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
State
| Package | Doc |
|---|---|
| Zustand | https://zustand.docs.pmnd.rs/ |
Performance & Effects
| Package | Doc |
|---|---|
| r3f-perf | https://github.com/utsuboco/r3f-perf |
| AnimationMixer | https://threejs.org/docs/#api/en/animation/AnimationMixer |
Architecture
la-fabrik/ ├── public/ │ ├── models/ │ │ ├── map/ │ ├── textures/ │ └── sounds/ │ └── src/ ├── world/ │ ├── Map.tsx │ ├── Environment.tsx │ ├── PostFX.tsx │ ├── zones/ │ │ ├── WorkshopZone.tsx │ │ ├── PowerGridZone.tsx │ │ └── FarmZone.tsx │ │ └── SchoolZone.tsx │ │ └── ResidentialZone.tsx │ └── player/ │ ├── FPSController.tsx │ └── Crosshair.tsx │ ├── components/ │ ├── 3d/ │ │ └── InteractiveObject.tsx │ └── ui/ │ ├── NarrativeOverlay.tsx │ ├── MissionHUD.tsx │ ├── MapHUD.tsx │ ├── CinematicBars.tsx │ └── LoadingScreen.tsx │ ├── stores/ │ ├── useExperienceStore.ts │ ├── usePlayerStore.ts │ └── useAudioStore.ts │ ├── hooks/ │ ├── useZoneDetection.ts │ ├── useInteraction.ts │ └── useAudio.ts │ ├── useCinematic.ts │ └── useLOD.ts │ ├── data/ │ ├── zones.ts │ └── dialogues.ts │ ├── shaders/ │ ├── utils/ │ ├── debug.js │ ├── sizes.js │ ├── time.js │ └── loadingscreen.js │ ├── App.tsx └── main.tsx
🚀 Getting Started
git clone https://github.com/La-Fabrik-Durable/La-Fabrik.git
cd La-Fabrik
npm install
npm run dev
📜 License
See LICENSE file.