diff --git a/docs/3D_ANIMATIONS_FALUKANT.md b/docs/3D_ANIMATIONS_FALUKANT.md new file mode 100644 index 0000000..f64e572 --- /dev/null +++ b/docs/3D_ANIMATIONS_FALUKANT.md @@ -0,0 +1,143 @@ +# 3D-Animationen im Falukant-Bereich + +## Benötigte Dependencies + +### Three.js (Empfohlen) +```bash +npm install three +npm install @types/three --save-dev # Für TypeScript-Support +``` + +**Alternative Optionen:** +- **Babylon.js**: Mächtiger, aber größer (~500KB vs ~600KB) +- **A-Frame**: WebVR-fokussiert, einfacher für VR/AR +- **React Three Fiber**: Falls React verwendet wird (hier Vue) + +**Empfehlung: Three.js** - am weitesten verbreitet, beste Dokumentation, große Community + +### Optional: Vue-Three.js Wrapper +```bash +npm install vue-threejs # Oder troika-three-text für Text-Rendering +``` + +## Sinnvolle Seiten für 3D-Animationen + +### 1. **OverviewView** (Hauptübersicht) +**Sinnvoll:** ⭐⭐⭐⭐⭐ +- **3D-Charakter-Modell**: Rotierendes 3D-Modell des eigenen Charakters +- **Statussymbole**: 3D-Icons für Geld, Gesundheit, Reputation (schwebend/rotierend) +- **Hintergrund**: Subtile 3D-Szene (z.B. mittelalterliche Stadt im Hintergrund) + +### 2. **HouseView** (Haus) +**Sinnvoll:** ⭐⭐⭐⭐⭐ +- **3D-Haus-Modell**: Interaktives 3D-Modell des eigenen Hauses +- **Upgrade-Visualisierung**: Animation beim Haus-Upgrade +- **Zustand-Anzeige**: 3D-Visualisierung von Dach, Wänden, Boden, Fenstern + +### 3. **BranchView** (Niederlassungen) +**Sinnvoll:** ⭐⭐⭐⭐ +- **3D-Fabrik/Gebäude**: 3D-Modell der Niederlassung +- **Produktions-Animation**: 3D-Animationen für laufende Produktionen +- **Transport-Visualisierung**: 3D-Wagen/Karren für Transporte + +### 4. **FamilyView** (Familie) +**Sinnvoll:** ⭐⭐⭐⭐ +- **3D-Charaktere**: 3D-Modelle von Partner und Kindern +- **Beziehungs-Visualisierung**: 3D-Animationen für Beziehungsstatus +- **Geschenk-Animation**: 3D-Animation beim Verschenken + +### 5. **HealthView** (Gesundheit) +**Sinnvoll:** ⭐⭐⭐ +- **3D-Körper-Modell**: 3D-Visualisierung des Gesundheitszustands +- **Aktivitäts-Animationen**: 3D-Animationen für Gesundheitsaktivitäten + +### 6. **NobilityView** (Sozialstatus) +**Sinnvoll:** ⭐⭐⭐ +- **3D-Wappen**: Rotierendes 3D-Wappen +- **Insignien**: 3D-Krone, Schwert, etc. je nach Titel + +### 7. **ChurchView** (Kirche) +**Sinnvoll:** ⭐⭐⭐ +- **3D-Kirche**: 3D-Modell der Kirche +- **Taufe-Animation**: 3D-Animation bei der Taufe + +### 8. **BankView** (Bank) +**Sinnvoll:** ⭐⭐ +- **3D-Bankgebäude**: 3D-Modell der Bank +- **Geld-Animation**: 3D-Münzen/Geldstapel + +### 9. **UndergroundView** (Untergrund) +**Sinnvoll:** ⭐⭐⭐⭐ +- **3D-Dungeon**: 3D-Untergrund-Visualisierung +- **Aktivitäts-Animationen**: 3D-Animationen für Untergrund-Aktivitäten + +### 10. **ReputationView** (Reputation) +**Sinnvoll:** ⭐⭐⭐ +- **3D-Party-Szene**: 3D-Visualisierung von Festen +- **Reputation-Visualisierung**: 3D-Effekte für Reputationsänderungen + +## Implementierungs-Strategie + +### Phase 1: Basis-Setup +1. Three.js installieren +2. Basis-Komponente `ThreeScene.vue` erstellen +3. Erste einfache Animation (z.B. rotierender Würfel) auf OverviewView + +### Phase 2: Charakter-Modell +1. 3D-Charakter-Modell erstellen/laden (GLTF/GLB) +2. Auf OverviewView integrieren +3. Interaktionen (Klick, Hover) + +### Phase 3: Gebäude-Modelle +1. Haus-Modell für HouseView +2. Fabrik-Modell für BranchView +3. Kirche-Modell für ChurchView + +### Phase 4: Animationen +1. Upgrade-Animationen +2. Status-Änderungs-Animationen +3. Interaktive Elemente + +## Technische Überlegungen + +### Performance +- **Lazy Loading**: 3D-Szenen nur laden, wenn Seite aktiv ist +- **Level of Detail (LOD)**: Einfache Modelle für schwächere Geräte +- **WebGL-Detection**: Fallback auf 2D, wenn WebGL nicht unterstützt wird + +### Asset-Management +- **GLTF/GLB**: Kompaktes Format für 3D-Modelle +- **Texturen**: Optimiert für Web (WebP, komprimiert) +- **CDN**: Assets über CDN laden für bessere Performance + +### Browser-Kompatibilität +- **WebGL 1.0**: Mindestanforderung (95%+ Browser) +- **WebGL 2.0**: Optional für bessere Features +- **Fallback**: 2D-Versionen für ältere Browser + +## Beispiel-Struktur + +``` +frontend/src/ + components/ + falukant/ + ThreeScene.vue # Basis-3D-Szene-Komponente + CharacterModel.vue # 3D-Charakter-Komponente + BuildingModel.vue # 3D-Gebäude-Komponente + assets/ + 3d/ + models/ + character.glb + house.glb + factory.glb + textures/ + ... +``` + +## Nächste Schritte + +1. **Three.js installieren** +2. **Basis-Komponente erstellen** +3. **Erste Animation auf OverviewView testen** +4. **3D-Modelle erstellen/beschaffen** (Blender, Sketchfab, etc.) +5. **Schrittweise auf weitere Seiten ausweiten** diff --git a/docs/3D_ASSETS_STRUCTURE.md b/docs/3D_ASSETS_STRUCTURE.md new file mode 100644 index 0000000..47513ae --- /dev/null +++ b/docs/3D_ASSETS_STRUCTURE.md @@ -0,0 +1,171 @@ +# 3D-Assets Struktur für Falukant + +## Verzeichnisstruktur + +``` +frontend/public/ + models/ + 3d/ + falukant/ + characters/ + male.glb # Basis-Modell männlich + female.glb # Basis-Modell weiblich + male_child.glb # Männlich, Kind (0-9 Jahre) + male_teen.glb # Männlich, Teenager (10-17 Jahre) + male_adult.glb # Männlich, Erwachsen (18-39 Jahre) + male_middle.glb # Männlich, Mittelalter (40-59 Jahre) + male_elder.glb # Männlich, Älter (60+ Jahre) + female_child.glb # Weiblich, Kind + female_teen.glb # Weiblich, Teenager + female_adult.glb # Weiblich, Erwachsen + female_middle.glb # Weiblich, Mittelalter + female_elder.glb # Weiblich, Älter + buildings/ + house/ + house_small.glb # Kleines Haus + house_medium.glb # Mittleres Haus + house_large.glb # Großes Haus + factory/ + factory_basic.glb # Basis-Fabrik + factory_advanced.glb # Erweiterte Fabrik + church/ + church.glb # Kirche + bank/ + bank.glb # Bank + objects/ + weapons/ + sword.glb + shield.glb + items/ + coin.glb + gift.glb + effects/ + particles/ + money.glb # Geld-Effekt + health.glb # Gesundheits-Effekt +``` + +## Namenskonventionen + +### Charaktere +- Format: `{gender}[_{ageRange}].glb` +- Beispiele: + - `male.glb` - Basis-Modell männlich (Fallback) + - `female.glb` - Basis-Modell weiblich (Fallback) + - `male_adult.glb` - Männlich, Erwachsen + - `female_teen.glb` - Weiblich, Teenager + +### Gebäude +- Format: `{buildingType}_{variant}.glb` +- Beispiele: + - `house_small.glb` + - `factory_basic.glb` + - `church.glb` + +### Objekte +- Format: `{category}/{item}.glb` +- Beispiele: + - `weapons/sword.glb` + - `items/coin.glb` + +## Altersbereiche + +Die Altersbereiche werden automatisch bestimmt: + +```javascript +// In CharacterModel3D.vue +getAgeRange(age) { + if (age < 10) return 'child'; + if (age < 18) return 'teen'; + if (age < 40) return 'adult'; + if (age < 60) return 'middle'; + return 'elder'; +} +``` + +**Fallback-Verhalten:** +- Wenn kein spezifisches Modell für den Altersbereich existiert, wird das Basis-Modell (`male.glb` / `female.glb`) verwendet +- Dies ermöglicht schrittweise Erweiterung ohne Breaking Changes + +## Dateigrößen-Empfehlungen + +- **Charaktere**: 100KB - 500KB (komprimiert) +- **Gebäude**: 200KB - 1MB (komprimiert) +- **Objekte**: 10KB - 100KB (komprimiert) + +## Optimierung + +### Vor dem Hochladen: +1. **Blender** öffnen +2. **Decimate Modifier** anwenden (falls nötig) +3. **Texturen komprimieren** (WebP, max 1024x1024) +4. **GLB Export** mit: + - Compression aktiviert + - Texturen eingebettet + - Unnötige Animationen entfernt + +### Komprimierung: +- Verwende `gltf-pipeline` oder `gltf-transform` für weitere Komprimierung +- Ziel: < 500KB pro Modell + +## Verwendung im Code + +```vue + + + + + + +``` + +## Erweiterte Struktur (Optional) + +Für komplexere Szenarien: + +``` +frontend/public/ + models/ + 3d/ + falukant/ + characters/ + {gender}/ + base/ + {gender}.glb # Basis-Modell + ages/ + {gender}_{ageRange}.glb + variants/ + {gender}_{variant}.glb # Z.B. verschiedene Outfits +``` + +## Wartung + +### Neue Modelle hinzufügen: +1. GLB-Datei in entsprechendes Verzeichnis kopieren +2. Namenskonvention beachten +3. Dateigröße prüfen (< 500KB empfohlen) +4. Im Browser testen + +### Modelle aktualisieren: +1. Alte Datei ersetzen +2. Browser-Cache leeren (oder Versionierung verwenden) +3. Testen + +### Versionierung (Optional): +``` +characters/ + v1/ + male.glb + v2/ + male.glb +``` + +## Performance-Tipps + +1. **Lazy Loading**: Modelle nur laden, wenn benötigt +2. **Preloading**: Wichtige Modelle vorladen +3. **Caching**: Browser-Cache nutzen +4. **CDN**: Für Produktion CDN verwenden diff --git a/docs/3D_MODEL_CREATION_TOOLS.md b/docs/3D_MODEL_CREATION_TOOLS.md new file mode 100644 index 0000000..c26a261 --- /dev/null +++ b/docs/3D_MODEL_CREATION_TOOLS.md @@ -0,0 +1,159 @@ +# 3D-Modell-Erstellung für Falukant + +## KI-basierte Tools (Empfohlen) + +### 1. **Rodin** ⭐⭐⭐⭐⭐ +- **URL**: https://rodin.io/ +- **Preis**: Kostenlos (mit Limits), Premium verfügbar +- **Features**: + - Text-zu-3D (z.B. "medieval character", "house") + - Sehr gute Qualität + - Export als GLB/GLTF +- **Gut für**: Charaktere, Gebäude, Objekte + +### 2. **Meshy** ⭐⭐⭐⭐⭐ +- **URL**: https://www.meshy.ai/ +- **Preis**: Kostenlos (mit Limits), ab $9/monat +- **Features**: + - Text-zu-3D + - Bild-zu-3D + - Textur-Generierung + - Export als GLB/OBJ/FBX +- **Gut für**: Alle Arten von Modellen + +### 3. **Luma AI Genie** ⭐⭐⭐⭐ +- **URL**: https://lumalabs.ai/genie +- **Preis**: Kostenlos (Beta) +- **Features**: + - Text-zu-3D + - Sehr schnell + - Export als GLB +- **Gut für**: Schnelle Prototypen + +### 4. **CSM (Common Sense Machines)** ⭐⭐⭐⭐ +- **URL**: https://csm.ai/ +- **Preis**: Kostenlos (mit Limits) +- **Features**: + - Text-zu-3D + - Bild-zu-3D + - Export als GLB/USD +- **Gut für**: Verschiedene Objekte + +### 5. **Tripo AI** ⭐⭐⭐⭐ +- **URL**: https://www.tripo3d.ai/ +- **Preis**: Kostenlos (mit Limits), Premium verfügbar +- **Features**: + - Text-zu-3D + - Bild-zu-3D + - Export als GLB/FBX/OBJ +- **Gut für**: Charaktere und Objekte + +### 6. **Masterpiece Studio** ⭐⭐⭐ +- **URL**: https://masterpiecestudio.com/ +- **Preis**: Ab $9/monat +- **Features**: + - Text-zu-3D + - VR-Unterstützung + - Export als GLB/FBX +- **Gut für**: Professionelle Modelle + +## Traditionelle Tools (Für Nachbearbeitung) + +### 1. **Blender** (Kostenlos) ⭐⭐⭐⭐⭐ +- **URL**: https://www.blender.org/ +- **Features**: + - Vollständige 3D-Suite + - GLB/GLTF Export + - Optimierung von KI-generierten Modellen +- **Gut für**: Nachbearbeitung, Optimierung, Animationen + +### 2. **Sketchfab** (Modelle kaufen/laden) +- **URL**: https://sketchfab.com/ +- **Preis**: Kostenlos (CC0 Modelle), Premium Modelle kostenpflichtig +- **Features**: + - Millionen von 3D-Modellen + - Viele kostenlose CC0 Modelle + - GLB/GLTF Download +- **Gut für**: Vorgefertigte Modelle, Inspiration + +## Empfohlener Workflow + +### Für Falukant-Charaktere: +1. **Rodin** oder **Meshy** verwenden +2. Prompt: "medieval character, male/female, simple style, low poly, game ready" +3. Export als GLB +4. In **Blender** optimieren (falls nötig) +5. Texturen anpassen + +### Für Gebäude: +1. **Meshy** oder **Tripo AI** verwenden +2. Prompt: "medieval house, simple, low poly, game ready, front view" +3. Export als GLB +4. In **Blender** optimieren +5. Mehrere Varianten erstellen (Haus, Fabrik, Kirche) + +### Für Objekte: +1. **Sketchfab** durchsuchen (kostenlose CC0 Modelle) +2. Oder **Meshy** für spezifische Objekte +3. Export als GLB +4. Optimieren falls nötig + +## Prompt-Beispiele für Falukant + +### Charakter: +``` +"medieval character, [male/female], simple low poly style, +game ready, neutral pose, front view, no background, +GLB format, optimized for web" +``` + +### Haus: +``` +"medieval house, simple low poly style, game ready, +front view, no background, GLB format, optimized for web" +``` + +### Fabrik: +``` +"medieval factory building, simple low poly style, +game ready, front view, no background, GLB format" +``` + +### Wappen: +``` +"medieval coat of arms shield, simple low poly style, +game ready, front view, no background, GLB format" +``` + +## Optimierung für Web + +### Nach der Erstellung: +1. **Blender** öffnen +2. **Decimate Modifier** anwenden (weniger Polygone) +3. **Texture** komprimieren (WebP, 512x512 oder 1024x1024) +4. **GLB Export** mit: + - Compression aktiviert + - Texturen eingebettet + - Normals und Tangents berechnet + +### Größen-Richtlinien: +- **Charaktere**: 2000-5000 Polygone +- **Gebäude**: 1000-3000 Polygone +- **Objekte**: 100-1000 Polygone +- **Texturen**: 512x512 oder 1024x1024 (nicht größer) + +## Kostenlose Alternativen + +### Wenn KI-Tools Limits haben: +1. **Sketchfab** durchsuchen (CC0 Modelle) +2. **Poly Haven** (https://polyhaven.com/) - kostenlose Assets +3. **Kenney.nl** - kostenlose Game Assets +4. **OpenGameArt.org** - kostenlose Game Assets + +## Nächste Schritte + +1. **Rodin** oder **Meshy** testen +2. Ersten Charakter erstellen +3. Als GLB exportieren +4. In Three.js testen +5. Bei Bedarf optimieren diff --git a/docs/BLENDER_RIGGING_GUIDE.md b/docs/BLENDER_RIGGING_GUIDE.md new file mode 100644 index 0000000..d5e2e59 --- /dev/null +++ b/docs/BLENDER_RIGGING_GUIDE.md @@ -0,0 +1,334 @@ +# Blender Rigging-Anleitung für Falukant-Charaktere + +Diese Anleitung erklärt, wie du Bones/Gelenke zu deinen 3D-Modellen in Blender hinzufügst, damit sie animiert werden können. + +## Voraussetzungen + +- Blender (kostenlos, https://www.blender.org/) +- GLB-Modell von meshy.ai oder anderen Quellen + +## Schritt-für-Schritt Anleitung + +### 1. Modell in Blender importieren + +1. Öffne Blender +2. Gehe zu `File` → `Import` → `glTF 2.0 (.glb/.gltf)` +3. Wähle dein Modell aus +4. Das Modell sollte jetzt in der Szene erscheinen + +### 2. Modell vorbereiten + +1. Stelle sicher, dass das Modell im **Object Mode** ist (Tab drücken, falls im Edit Mode) +2. Wähle das Modell aus (Linksklick) +3. Drücke `Alt + G` um die Position auf (0, 0, 0) zu setzen +4. Drücke `Alt + R` um die Rotation zurückzusetzen +5. Drücke `Alt + S` um die Skalierung auf 1 zu setzen + +### 3. Rigging (Bones hinzufügen) + +#### Option A: Automatisches Rigging mit Rigify (Empfohlen) + +1. **Rigify aktivieren:** + - Gehe zu `Edit` → `Preferences` (oder `Blender` → `Preferences` auf Mac) + - Klicke auf den Tab **"Add-ons"** (links im Fenster) + - Im Suchfeld oben rechts tippe: **"rigify"** (ohne Anführungszeichen) + - Du solltest "Rigify: Auto-rigging system" sehen + - Aktiviere das **Häkchen** neben "Rigify" + - Das Add-on ist jetzt aktiviert + - Schließe das Preferences-Fenster + + **Alternative Wege zu Preferences:** + - Windows/Linux: `Edit` → `Preferences` + - Mac: `Blender` → `Preferences` + - Oder: `Ctrl + ,` (Strg + Komma) + +2. **Rigify-Rig hinzufügen:** + - Stelle sicher, dass du im **Object Mode** bist (Tab drücken, falls im Edit Mode) + - Wähle das Modell aus (oder nichts, das Rig wird separat erstellt) + - Drücke `Shift + A` (Add Menu) + - Wähle **`Armature`** aus + - In der Liste siehst du jetzt **`Human (Meta-Rig)`** - klicke darauf + - Ein Basis-Rig wird in der Szene erstellt + + **Falls "Human (Meta-Rig)" nicht erscheint:** + - Stelle sicher, dass Rigify aktiviert ist (siehe Schritt 1) + - Starte Blender neu, falls nötig + - Prüfe, ob du die neueste Blender-Version hast (Rigify ist ab Version 2.8+ verfügbar) + +3. **Rig positionieren und anpassen:** + + **Schritt 1: Rig zum Modell bewegen** + - Stelle sicher, dass du im **Object Mode** bist (Tab drücken) + - Wähle das **Armature** aus (nicht das Modell) + - Drücke `G` (Grab/Move) und bewege das Rig zum Modell + - Oder: Drücke `Alt + G` um die Position zurückzusetzen, dann `G` + `X`, `Y` oder `Z` für eine Achse + + **Schritt 2: Rig skalieren (falls zu groß/klein)** + - Wähle das Armature aus + - Drücke `S` (Scale) und skaliere das Rig + - Oder: `S` + `X`, `Y` oder `Z` für eine Achse + - Tipp: Drücke `Shift + X` (oder Y/Z) um diese Achse auszuschließen + + **Schritt 3: Einzelne Bones anpassen** + - Wähle das Armature aus + - Wechsle in den **Edit Mode** (Tab) + - Wähle einen Bone aus (Linksklick) + - Drücke `G` um ihn zu bewegen + - Drücke `E` um einen neuen Bone zu extrudieren + - Drücke `R` um einen Bone zu rotieren + - Drücke `S` um einen Bone zu skalieren + + **Wichtige Bones zum Anpassen:** + - **Root/Spine** - Sollte in der Mitte des Körpers sein (Hüfthöhe) + - **Spine1/Spine2** - Entlang der Wirbelsäule + - **Neck/Head** - Am Hals und Kopf + - **Shoulders** - An den Schultern + - **Arms** - Entlang der Arme + - **Legs** - Entlang der Beine + + **Tipp:** Nutze die Zahlenansicht (Numpad) um die Positionen genau zu sehen + +4. **Rig generieren:** + - Wechsle zurück in den **Object Mode** (Tab drücken) + - Wähle das **Meta-Rig (Armature)** aus (nicht das Modell!) - sollte im Outliner blau markiert sein + + **Methode 1: Rigify-Button in der Toolbar (Einfachste Methode)** + - Oben in der Toolbar siehst du den Button **"Rigify"** (neben "Object") + - Klicke auf **"Rigify"** → **"Generate Rig"** + - Ein vollständiges Rig wird erstellt (dies kann einen Moment dauern) + + **Methode 2: Properties-Panel (Alternative)** + - Im **Properties-Panel** (rechts): + - Klicke auf das **Wrench-Icon** (Modifier Properties) in der linken Toolbar + - Oder: Klicke auf das **Bone-Icon** (Armature Properties) + - Scrolle durch die Tabs, bis du **"Rigify"** oder **"Rigify Generation"** siehst + - In diesem Tab findest du den Button **"Generate Rig"** + - Klicke auf **"Generate Rig"** + + **Wichtig:** Nach dem Generieren kannst du das Rig weiter anpassen, aber du musst es im **Pose Mode** tun (nicht Edit Mode) + + **Die richtigen Tabs im Properties-Panel (von oben nach unten):** + - 📐 **Object Properties** (Würfel-Icon) - hier findest du Transform, etc. + - 🦴 **Armature Properties** (Bone-Icon) - hier findest du Armature-Einstellungen + - 🔧 **Modifier Properties** (Wrench-Icon) - hier sollte der **Rigify-Tab** sein! + - 🌍 **World Properties** (Globus-Icon) - NICHT hier suchen! + + **Falls du den Rigify-Tab nicht siehst:** + - Stelle sicher, dass das **Meta-Rig** (nicht ein bereits generiertes Rig) ausgewählt ist + - Klicke auf das **Wrench-Icon** (Modifier Properties) in der linken Toolbar + - Der Rigify-Tab sollte dort erscheinen + +#### Option B: Manuelles Rigging + +1. **Armature erstellen:** + - Drücke `Shift + A` → `Armature` + - Ein Bone wird erstellt + +2. **Bones hinzufügen:** + - Wechsle in den **Edit Mode** (Tab) + - Wähle den Root-Bone aus + - Drücke `E` um einen neuen Bone zu extrudieren + - Erstelle die wichtigsten Bones: + - **Spine/Spine1/Spine2** - Wirbelsäule + - **Neck/Head** - Hals und Kopf + - **LeftArm/LeftForeArm/LeftHand** - Linker Arm + - **RightArm/RightForeArm/RightHand** - Rechter Arm + - **LeftUpLeg/LeftLeg/LeftFoot** - Linkes Bein + - **RightUpLeg/RightLeg/RightFoot** - Rechtes Bein + +3. **Bone-Namen vergeben:** + - Wähle jeden Bone aus + - Im Properties-Panel (rechts) unter "Bone" kannst du den Namen ändern + - **Wichtig:** Verwende diese Namen für die Animation: + - `LeftArm`, `RightArm` + - `LeftForeArm`, `RightForeArm` + - `LeftHand`, `RightHand` + - `LeftUpLeg`, `RightUpLeg` + - `LeftLeg`, `RightLeg` + - `LeftFoot`, `RightFoot` + - `Neck`, `Head` + - `Spine`, `Spine1`, `Spine2` + +### 4. Modell an Bones binden (Skinning) + +1. **Beide Objekte auswählen:** + - Wähle zuerst das **Mesh** aus + - Dann wähle das **Armature** aus (Shift + Linksklick) + - Drücke `Ctrl + P` → `With Automatic Weights` + - Blender berechnet automatisch, welche Vertices zu welchen Bones gehören + +2. **Weights überprüfen:** + - Wähle das Mesh aus + - Wechsle in den **Weight Paint Mode** (Dropdown oben) + - Wähle einen Bone aus (rechts im Properties-Panel) + - Rot = vollständig gebunden, Blau = nicht gebunden + - Falls nötig, kannst du die Weights manuell anpassen + +### 5. Test-Animation erstellen (Optional) + +1. **Pose Mode aktivieren:** + - Wähle das **generierte Rig** aus (nicht das Meta-Rig!) + - Wechsle in den **Pose Mode** (Dropdown oben: "Object Mode" → "Pose Mode") + - Oder: `Ctrl + Tab` → "Pose Mode" + +2. **Bone auswählen:** + - **Wichtig:** Arbeite im **3D-Viewport** (Hauptfenster), nicht nur im Outliner! + - **Rigify-Bone-Namen** (nach dem Generieren): + - Für **Knie beugen**: `Leg.L (IK)` oder `Leg.L (FK)` (nicht "Tweak"!) + - Für **Hand anheben**: `Arm.L (IK)` oder `Arm.L (FK)` + - Für **Fuß bewegen**: `Leg.L (IK)` (der Fuß-Controller) + - **IK** = Inverse Kinematics (einfacher, empfohlen für Anfänger) + - **FK** = Forward Kinematics (mehr Kontrolle) + - **Tweak** = Feinabstimmungen (für später, nicht für Hauptanimationen) + - Klicke auf einen **Bone** im **3D-Viewport** (nicht im Outliner!) + - Der Bone sollte orange/ausgewählt sein und im Viewport sichtbar sein + - **Tipp:** Nutze `X-Ray Mode` (Button oben im Viewport) um Bones besser zu sehen + - **Tipp:** Im Outliner kannst du Bones finden, aber die Animation machst du im Viewport + +3. **Bone animieren:** + - Wähle z.B. `hand.L` (linke Hand) aus + - Drücke `R` (Rotate) und rotiere den Bone + - Oder: `R` + `Z` (um Z-Achse rotieren) + - Oder: `R` + `X` (um X-Achse rotieren) + - Bewege die Maus → Linksklick zum Bestätigen + - **Beispiel für Hand anheben:** `hand.L` → `R` → `Z` → nach oben bewegen + +4. **Animation aufnehmen (Timeline):** + - Unten siehst du die **Timeline** (falls nicht sichtbar: `Shift + F12` oder `Window` → `Animation` → `Timeline`) + - Stelle den Frame auf **1** (Anfang) + - Wähle den Bone aus und positioniere ihn in der **Ausgangsposition** + - Drücke `I` (Insert Keyframe) → wähle **"Rotation"** (oder "Location" falls bewegt) + - Ein Keyframe wird erstellt (gelber Punkt in der Timeline) + - Stelle den Frame auf **30** (oder einen anderen Frame) + - Rotiere/Bewege den Bone in die **Zielposition** (z.B. Hand nach oben) + - Drücke wieder `I` → **"Rotation"** (oder "Location") + - Stelle den Frame auf **60** (Rückkehr zur Ausgangsposition) + - Rotiere den Bone zurück zur Ausgangsposition + - Drücke `I` → **"Rotation"** + - Drücke **Play** (Leertaste) um die Animation zu sehen + +5. **Animation testen:** + - Die Animation sollte jetzt in einer Schleife abgespielt werden + - Du kannst weitere Keyframes hinzufügen (Frame 90, 120, etc.) + - **Tipp:** Nutze `Alt + A` um die Animation zu stoppen + +### 6. Modell exportieren + +1. **Beide Objekte auswählen:** + - Wähle das **Mesh** aus + - Shift + Linksklick auf das **generierte Rig** (nicht das Meta-Rig!) + +2. **Exportieren:** + - Gehe zu `File` → `Export` → `glTF 2.0 (.glb/.gltf)` + - Wähle `.glb` Format + - Stelle sicher, dass folgende Optionen aktiviert sind: + - ✅ **Include** → **Selected Objects** + - ✅ **Transform** → **+Y Up** + - ✅ **Geometry** → **Apply Modifiers** + - ✅ **Animation** → **Bake Animation** (wichtig für Animationen!) + - ✅ **Animation** → **Always Sample Animations** (falls Animationen nicht korrekt exportiert werden) + - Klicke auf "Export glTF 2.0" + +### 7. Modell testen + +1. Kopiere die exportierte `.glb` Datei nach: + ``` + frontend/public/models/3d/falukant/characters/ + ``` +2. Lade die Seite neu +3. Die Bones sollten jetzt automatisch erkannt und animiert werden +4. **Animationen testen:** + - Öffne die Browser-Konsole (F12) + - Du solltest sehen: `[ThreeScene] Found X animation(s)` + - Die Animationen sollten automatisch abgespielt werden + - Falls keine Animationen vorhanden sind, werden die Bones trotzdem mit Idle-Animationen bewegt + +## Rig anpassen - Detaillierte Anleitung + +### Rig nach dem Generieren anpassen + +Wenn das Rigify-Rig generiert wurde, aber nicht perfekt passt: + +1. **Pose Mode verwenden:** + - Wähle das generierte Armature aus + - Wechsle in den **Pose Mode** (Dropdown oben, oder Strg+Tab → Pose Mode) + - Hier kannst du die Bones bewegen, ohne die Struktur zu zerstören + +2. **Rig neu generieren (falls nötig):** + - Falls das Rig komplett neu positioniert werden muss: + - Lösche das generierte Rig (X → Delete) + - Gehe zurück zum Meta-Rig + - Passe das Meta-Rig im Edit Mode an + - Generiere das Rig erneut + +3. **Snap to Mesh (Hilfsmittel):** + - Im Edit Mode: `Shift + Tab` um Snap zu aktivieren + - Oder: Rechtsklick auf das Snap-Symbol (Magnet) oben + - Wähle "Face" oder "Vertex" als Snap-Target + - Jetzt werden Bones automatisch am Mesh ausgerichtet + +### Häufige Probleme und Lösungen + +**Problem: Rig ist zu groß/klein** +- Lösung: Im Object Mode das Armature auswählen und mit `S` skalieren + +**Problem: Rig ist an falscher Position** +- Lösung: Im Object Mode mit `G` bewegen, oder `Alt + G` zurücksetzen + +**Problem: Einzelne Bones passen nicht** +- Lösung: Im Edit Mode die Bones einzeln anpassen (`G` zum Bewegen) + +**Problem: Nach dem Generieren passt es nicht mehr** +- Lösung: Passe das Meta-Rig an und generiere neu, oder verwende Pose Mode + +## Tipps und Tricks + +### Bone-Namen für automatische Erkennung + +Die Komponente erkennt Bones anhand ihrer Namen. Verwende diese Keywords: +- `arm` - für Arme +- `hand` oder `wrist` - für Hände +- `leg` oder `knee` - für Beine +- `foot` oder `ankle` - für Füße +- `shoulder` - für Schultern +- `elbow` - für Ellbogen + +### Einfacheres Rigging mit Mixamo + +Alternativ kannst du: +1. Dein Modell auf [Mixamo](https://www.mixamo.com/) hochladen +2. Automatisches Rigging durchführen lassen +3. Das geriggte Modell herunterladen +4. In Blender importieren und anpassen + +### Performance-Optimierung + +- Verwende nicht zu viele Bones (max. 50-100 für Charaktere) +- Entferne unnötige Bones vor dem Export +- Teste die Animation im Browser, bevor du das finale Modell exportierst + +## Troubleshooting + +### Bones werden nicht erkannt + +- Prüfe die Bone-Namen (müssen `arm`, `hand`, `leg`, etc. enthalten) +- Stelle sicher, dass das Modell korrekt an die Bones gebunden ist +- Öffne die Browser-Konsole und prüfe die Logs: `[ThreeScene] Found X bones for animation` + +### Modell verformt sich falsch + +- Überprüfe die Weights im Weight Paint Mode +- Passe die Bone-Positionen an +- Stelle sicher, dass alle Vertices korrekt zugewiesen sind + +### Export schlägt fehl + +- Stelle sicher, dass beide Objekte (Mesh + Armature) ausgewählt sind +- Prüfe, ob das Modell im Object Mode ist +- Versuche es mit einem anderen Export-Format (.gltf statt .glb) + +## Weitere Ressourcen + +- [Blender Rigging Tutorial](https://www.youtube.com/results?search_query=blender+rigging+tutorial) +- [Mixamo Auto-Rigging](https://www.mixamo.com/) +- [Three.js GLTF Animation Guide](https://threejs.org/docs/#manual/en/introduction/Animation-system) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 5a503dc..baca554 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -21,6 +21,7 @@ "dotenv": "^16.4.5", "mitt": "^3.0.1", "socket.io-client": "^4.8.1", + "three": "^0.182.0", "vue": "~3.4.31", "vue-i18n": "^10.0.0-beta.2", "vue-multiselect": "^3.1.0", @@ -2834,6 +2835,12 @@ "safe-buffer": "~5.2.0" } }, + "node_modules/three": { + "version": "0.182.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz", + "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==", + "license": "MIT" + }, "node_modules/tinyglobby": { "version": "0.2.14", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz", diff --git a/frontend/package.json b/frontend/package.json index 989bac3..a91bbbd 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -21,6 +21,7 @@ "dotenv": "^16.4.5", "mitt": "^3.0.1", "socket.io-client": "^4.8.1", + "three": "^0.182.0", "vue": "~3.4.31", "vue-i18n": "^10.0.0-beta.2", "vue-multiselect": "^3.1.0", diff --git a/frontend/public/models/3d/falukant/characters/README.md b/frontend/public/models/3d/falukant/characters/README.md new file mode 100644 index 0000000..87228b4 --- /dev/null +++ b/frontend/public/models/3d/falukant/characters/README.md @@ -0,0 +1,40 @@ +# 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 +- `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) + +## Fallback-Verhalten + +Wenn kein spezifisches Modell für den Altersbereich existiert, wird automatisch das Basis-Modell (`male.glb` / `female.glb`) verwendet. + +## Dateigröße + +- Empfohlen: < 500KB pro Modell +- Maximal: 1MB pro Modell + +## Optimierung + +Vor dem Hochladen: +1. In Blender öffnen +2. Decimate Modifier anwenden (falls nötig) +3. Texturen komprimieren (WebP, max 1024x1024) +4. GLB Export mit Compression aktiviert diff --git a/frontend/public/models/3d/falukant/characters/female.glb b/frontend/public/models/3d/falukant/characters/female.glb new file mode 100644 index 0000000..7005d92 Binary files /dev/null and b/frontend/public/models/3d/falukant/characters/female.glb differ diff --git a/frontend/public/models/3d/falukant/characters/female_adult.glb b/frontend/public/models/3d/falukant/characters/female_adult.glb new file mode 100644 index 0000000..7005d92 Binary files /dev/null and b/frontend/public/models/3d/falukant/characters/female_adult.glb differ diff --git a/frontend/public/models/3d/falukant/characters/female_child.glb b/frontend/public/models/3d/falukant/characters/female_child.glb new file mode 100644 index 0000000..98190fc Binary files /dev/null and b/frontend/public/models/3d/falukant/characters/female_child.glb differ diff --git a/frontend/public/models/3d/falukant/characters/female_child_original.glb b/frontend/public/models/3d/falukant/characters/female_child_original.glb new file mode 100644 index 0000000..f650ffb Binary files /dev/null and b/frontend/public/models/3d/falukant/characters/female_child_original.glb differ diff --git a/frontend/public/models/3d/falukant/characters/female_preteen.glb b/frontend/public/models/3d/falukant/characters/female_preteen.glb new file mode 100644 index 0000000..812be17 Binary files /dev/null and b/frontend/public/models/3d/falukant/characters/female_preteen.glb differ diff --git a/frontend/public/models/3d/falukant/characters/female_teen.glb b/frontend/public/models/3d/falukant/characters/female_teen.glb new file mode 100644 index 0000000..7350477 Binary files /dev/null and b/frontend/public/models/3d/falukant/characters/female_teen.glb differ diff --git a/frontend/public/models/3d/falukant/characters/female_toddler.glb b/frontend/public/models/3d/falukant/characters/female_toddler.glb new file mode 100644 index 0000000..c96bb60 Binary files /dev/null and b/frontend/public/models/3d/falukant/characters/female_toddler.glb differ diff --git a/frontend/public/models/3d/falukant/characters/male.glb b/frontend/public/models/3d/falukant/characters/male.glb new file mode 100644 index 0000000..44a603f Binary files /dev/null and b/frontend/public/models/3d/falukant/characters/male.glb differ diff --git a/frontend/public/models/3d/falukant/characters/male_adult.glb b/frontend/public/models/3d/falukant/characters/male_adult.glb new file mode 100644 index 0000000..44a603f Binary files /dev/null and b/frontend/public/models/3d/falukant/characters/male_adult.glb differ diff --git a/frontend/public/models/3d/falukant/characters/male_child.glb b/frontend/public/models/3d/falukant/characters/male_child.glb new file mode 100644 index 0000000..91eb769 Binary files /dev/null and b/frontend/public/models/3d/falukant/characters/male_child.glb differ diff --git a/frontend/public/models/3d/falukant/characters/male_preteen.glb b/frontend/public/models/3d/falukant/characters/male_preteen.glb new file mode 100644 index 0000000..2b5fe41 Binary files /dev/null and b/frontend/public/models/3d/falukant/characters/male_preteen.glb differ diff --git a/frontend/public/models/3d/falukant/characters/male_teen.glb b/frontend/public/models/3d/falukant/characters/male_teen.glb new file mode 100644 index 0000000..3cf0f38 Binary files /dev/null and b/frontend/public/models/3d/falukant/characters/male_teen.glb differ diff --git a/frontend/public/models/3d/falukant/characters/male_toddler.glb b/frontend/public/models/3d/falukant/characters/male_toddler.glb new file mode 100644 index 0000000..5b2ff56 Binary files /dev/null and b/frontend/public/models/3d/falukant/characters/male_toddler.glb differ diff --git a/frontend/src/components/falukant/CharacterModel3D.vue b/frontend/src/components/falukant/CharacterModel3D.vue new file mode 100644 index 0000000..34bdf67 --- /dev/null +++ b/frontend/src/components/falukant/CharacterModel3D.vue @@ -0,0 +1,225 @@ + + + + + diff --git a/frontend/src/components/falukant/ThreeScene.vue b/frontend/src/components/falukant/ThreeScene.vue new file mode 100644 index 0000000..212b7d8 --- /dev/null +++ b/frontend/src/components/falukant/ThreeScene.vue @@ -0,0 +1,441 @@ + + + + + diff --git a/frontend/src/views/falukant/OverviewView.vue b/frontend/src/views/falukant/OverviewView.vue index 472c18a..3132cf5 100644 --- a/frontend/src/views/falukant/OverviewView.vue +++ b/frontend/src/views/falukant/OverviewView.vue @@ -116,15 +116,26 @@ -
-
-
+
+
+ +
+
+
+
+