5ddb099f5a
- 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.
4.4 KiB
4.4 KiB
3D-Animationen im Falukant-Bereich
Benötigte Dependencies
Three.js (Empfohlen)
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
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
- Three.js installieren
- Basis-Komponente
ThreeScene.vueerstellen - Erste einfache Animation (z.B. rotierender Würfel) auf OverviewView
Phase 2: Charakter-Modell
- 3D-Charakter-Modell erstellen/laden (GLTF/GLB)
- Auf OverviewView integrieren
- Interaktionen (Klick, Hover)
Phase 3: Gebäude-Modelle
- Haus-Modell für HouseView
- Fabrik-Modell für BranchView
- Kirche-Modell für ChurchView
Phase 4: Animationen
- Upgrade-Animationen
- Status-Änderungs-Animationen
- 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
- Three.js installieren
- Basis-Komponente erstellen
- Erste Animation auf OverviewView testen
- 3D-Modelle erstellen/beschaffen (Blender, Sketchfab, etc.)
- Schrittweise auf weitere Seiten ausweiten