yourpart3/frontend/public/models/3d/falukant/characters/README.md

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)

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) für Draco-Kompression

Option C: Nur Texturen verkleinern (ohne Draco)

Ohne Draco-Extension reicht oft schon:

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)