# 3D-Charakter-Modelle ## Verzeichnisstruktur Dieses Verzeichnis enthält die 3D-Modelle für Falukant-Charaktere. ## Dateinamen-Konvention ### Basis-Modelle (Fallback) - `male.glb` - Basis-Modell männlich - `female.glb` - Basis-Modell weiblich ### Altersspezifische Modelle #### Altersbereich-Modelle (Fallback für Altersgruppen) - `male_toddler.glb` - Männlich, Kleinkind (0-3 Jahre) - `male_child.glb` - Männlich, Kind (4-7 Jahre) - `male_preteen.glb` - Männlich, Vor-Teenager (8-12 Jahre) - `male_teen.glb` - Männlich, Teenager (13-17 Jahre) - `male_adult.glb` - Männlich, Erwachsen (18+ Jahre) - `female_toddler.glb` - Weiblich, Kleinkind (0-3 Jahre) - `female_child.glb` - Weiblich, Kind (4-7 Jahre) - `female_preteen.glb` - Weiblich, Vor-Teenager (8-12 Jahre) - `female_teen.glb` - Weiblich, Teenager (13-17 Jahre) - `female_adult.glb` - Weiblich, Erwachsen (18+ Jahre) #### Genaue Alters-Modelle (optional, für spezifische Altersstufen) - `male_1y.glb`, `male_2y.glb`, `male_3y.glb`, etc. - Männlich, genaues Alter in Jahren - `female_1y.glb`, `female_2y.glb`, `female_5y.glb`, etc. - Weiblich, genaues Alter in Jahren **Hinweis:** Genaue Alters-Modelle haben Vorrang vor Altersbereich-Modellen. Wenn z.B. für Alter 1 sowohl `female_1y.glb` als auch `female_toddler.glb` existieren, wird `female_1y.glb` verwendet. ## Fallback-Verhalten Die Komponente verwendet eine dreistufige Fallback-Hierarchie: 1. **Genaues Alter:** Zuerst wird nach einem Modell für das genaue Alter gesucht (z.B. `female_1y.glb` für Alter 1) 2. **Altersbereich:** Falls kein genaues Alters-Modell existiert, wird das Altersbereich-Modell verwendet (z.B. `female_toddler.glb` für Alter 1-3) 3. **Basis-Modell:** Falls auch kein Altersbereich-Modell existiert, wird das Basis-Modell verwendet (`male.glb` / `female.glb`) ## Dateigröße - **Aktuell:** ~14–17 MB pro Modell → lange Ladezeiten - **Empfohlen:** < 500 KB pro Modell - **Maximal:** ~1–2 MB pro Modell (Web, 60 FPS) ## Optimierung (wichtig für kürzere Ladezeiten) ### Option A: gltf-transform (CLI, Draco + Textur-Optimierung) ```bash npm install -g @gltf-transform/cli # Pro Modell (Beispiel): gltf-transform optimize male_adult.glb male_adult_opt.glb --compress draco --texture-size 1024 ``` Danach optimierte Dateien z. B. als `*_opt.glb` ablegen und im Frontend verwenden. **Hinweis:** Bei Draco-Compression muss im Frontend `DRACOLoader` von Three.js genutzt werden (siehe Three.js-Doku zu `KHR_draco_mesh_compression`). ### Option B: Blender 1. Modell in Blender öffnen 2. Decimate-Modifier anwenden (Polygonanzahl reduzieren) 3. Texturen komprimieren (WebP, max. 1024×1024) 4. GLB-Export mit aktivierter Kompression 5. Optional: Online-Tools (z. B. [glb.babylonpress.org](https://glb.babylonpress.org)) für Draco-Kompression ### Option C: Nur Texturen verkleinern (ohne Draco) Ohne Draco-Extension reicht oft schon: ```bash gltf-transform optimize input.glb output.glb --texture-size 1024 ``` ## Model-Proxy (Backend) Das Frontend lädt Modelle über **`GET /api/models/3d/falukant/characters/:filename`**. Ein Backend-Proxy: 1. Liest die angeforderte `.glb`-Datei aus diesem Verzeichnis. 2. Optimiert sie bei Bedarf mit gltf-transform (Draco + Textur 1024). 3. Legt das Ergebnis in `backend/data/model-cache/` ab (File-Cache). 4. Liefert die optimierte Datei aus und setzt `Cache-Control` für Browser-Caching. - **Service:** `backend/services/modelsProxyService.js` - **Router:** `backend/routers/modelsProxyRouter.js` - **Cache:** `backend/data/model-cache/` (wird bei neuerer Quelldatei automatisch neu erzeugt)