Add RelationshipChangeLog model and enhance character loading logic

frontend/public/models/3d/falukant/characters/README.md

@@ -11,6 +11,8 @@ Dieses Verzeichnis enthält die 3D-Modelle für Falukant-Charaktere.
 - `female.glb` - Basis-Modell weiblich
 
 ### Altersspezifische Modelle
+
+#### Altersbereich-Modelle (Fallback für Altersgruppen)
 - `male_toddler.glb` - Männlich, Kleinkind (0-3 Jahre)
 - `male_child.glb` - Männlich, Kind (4-7 Jahre)
 - `male_preteen.glb` - Männlich, Vor-Teenager (8-12 Jahre)
@@ -22,9 +24,19 @@ Dieses Verzeichnis enthält die 3D-Modelle für Falukant-Charaktere.
 - `female_teen.glb` - Weiblich, Teenager (13-17 Jahre)
 - `female_adult.glb` - Weiblich, Erwachsen (18+ Jahre)
 
+#### Genaue Alters-Modelle (optional, für spezifische Altersstufen)
+- `male_1y.glb`, `male_2y.glb`, `male_3y.glb`, etc. - Männlich, genaues Alter in Jahren
+- `female_1y.glb`, `female_2y.glb`, `female_5y.glb`, etc. - Weiblich, genaues Alter in Jahren
+
+**Hinweis:** Genaue Alters-Modelle haben Vorrang vor Altersbereich-Modellen. Wenn z.B. für Alter 1 sowohl `female_1y.glb` als auch `female_toddler.glb` existieren, wird `female_1y.glb` verwendet.
+
 ## Fallback-Verhalten
 
-Wenn kein spezifisches Modell für den Altersbereich existiert, wird automatisch das Basis-Modell (`male.glb` / `female.glb`) verwendet.
+Die Komponente verwendet eine dreistufige Fallback-Hierarchie:
+
+1. **Genaues Alter:** Zuerst wird nach einem Modell für das genaue Alter gesucht (z.B. `female_1y.glb` für Alter 1)
+2. **Altersbereich:** Falls kein genaues Alters-Modell existiert, wird das Altersbereich-Modell verwendet (z.B. `female_toddler.glb` für Alter 1-3)
+3. **Basis-Modell:** Falls auch kein Altersbereich-Modell existiert, wird das Basis-Modell verwendet (`male.glb` / `female.glb`)
 
 ## Dateigröße
 

frontend/src/components/Character3D.vue

@@ -82,6 +82,13 @@ export default {
       const base = getApiBaseURL();
       const prefix = base ? `${base}${MODELS_API_PATH}` : MODELS_API_PATH;
       return `${prefix}/${this.actualGender}_${this.ageGroup}.glb`;
+    },
+    exactAgeModelPath() {
+      // Pfad für genaues Alter (z.B. female_1y.glb für Alter 1)
+      const age = this.actualAge;
+      const base = getApiBaseURL();
+      const prefix = base ? `${base}${MODELS_API_PATH}` : MODELS_API_PATH;
+      return `${prefix}/${this.actualGender}_${age}y.glb`;
     }
   },
   watch: {
@@ -207,15 +214,32 @@ export default {
 
         const base = getApiBaseURL();
         const prefix = base ? `${base}${MODELS_API_PATH}` : MODELS_API_PATH;
-        const modelPath = this.modelPath;
+        
+        // Fallback-Hierarchie:
+        // 1. Zuerst versuchen, Modell für genaues Alter zu laden (z.B. female_1y.glb)
+        // 2. Falls nicht vorhanden, Altersbereich verwenden (z.B. female_toddler.glb)
+        // 3. Falls auch nicht vorhanden, Basis-Modell verwenden (z.B. female.glb)
+        const exactAgePath = this.exactAgeModelPath;
+        const ageGroupPath = this.modelPath;
         const fallbackPath = `${prefix}/${this.actualGender}.glb`;
 
         let gltf;
         try {
-          gltf = await loader.loadAsync(modelPath);
-        } catch (error) {
-          console.warn(`Could not load ${modelPath}, trying fallback model`);
-          gltf = await loader.loadAsync(fallbackPath);
+          // Versuche zuerst genaues Alter
+          try {
+            gltf = await loader.loadAsync(exactAgePath);
+            console.log(`Loaded exact age model: ${exactAgePath}`);
+          } catch (exactAgeError) {
+            // Falls genaues Alter nicht existiert, versuche Altersbereich
+            try {
+              gltf = await loader.loadAsync(ageGroupPath);
+              console.log(`Loaded age group model: ${ageGroupPath}`);
+            } catch (ageGroupError) {
+              // Falls Altersbereich nicht existiert, verwende Basis-Modell
+              console.warn(`Could not load ${ageGroupPath}, trying fallback model`);
+              gltf = await loader.loadAsync(fallbackPath);
+            }
+          }
         } finally {
           dracoLoader.dispose();
         }