Add 3D character model integration and update dependencies

- Introduced a new CharacterModel3D component for rendering 3D character models in OverviewView. - Updated package.json and package-lock.json to include 'three' library for 3D graphics support. - Enhanced Vite configuration to allow access to external files and ensure proper handling of GLB/GLTF assets. - Improved layout and styling in OverviewView for better visualization of character and avatar.
2026-01-09 13:29:32 +01:00
parent 3722bcf8c8
commit 5ddb099f5a
24 changed files with 1567 additions and 3 deletions
--- a/docs/3D_ASSETS_STRUCTURE.md
+++ 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
+<!-- CharacterModel3D.vue -->
+<CharacterModel3D
+  :gender="character.gender"
+  :age="character.age"
+/>
+
+<!-- Automatisch wird geladen: -->
+<!-- /models/3d/falukant/characters/male_adult.glb -->
+<!-- Falls nicht vorhanden: male.glb -->
+```
+
+## 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