Files
yourpart3/docs/3D_ASSETS_STRUCTURE.md
Torsten Schulz (local) 5ddb099f5a 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

4.4 KiB

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:

// 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

<!-- 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