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.
144 lines
4.4 KiB
Markdown
144 lines
4.4 KiB
Markdown
# 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**
|