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