feat: Anpassung der Kameraposition und Beleuchtung für bessere Darstellung in 3D-Ansichten

frontend/src/components/Character3D.vue

@@ -201,7 +201,9 @@ export default {
       // Camera erstellen
       const aspect = container.clientWidth / container.clientHeight;
       this.camera = markRaw(new runtime.PerspectiveCamera(50, aspect, 0.1, 1000));
-      this.camera.position.set(0, 1.5, 3);
+      // Näher ran, wenn der Container sehr schmal ist (compact views)
+      const camZ = container.clientWidth && container.clientWidth < 120 ? 2.2 : 3;
+      this.camera.position.set(0, 1.6, camZ);
       this.camera.lookAt(0, 1, 0);
 
       // Renderer erstellen
@@ -210,26 +212,43 @@ export default {
       this.renderer.setPixelRatio(window.devicePixelRatio);
       container.appendChild(this.renderer.domElement);
 
-      // Verbesserte Beleuchtung für hellere Modelle
+      // Verbesserte Beleuchtung für kräftigere Farben
-      // Mehr ambient light für gleichmäßigere Ausleuchtung
+      // HemisphereLight für etwas Umgebungsfarbe und natürliche Ground-Reflektion
-      const ambientLight = new runtime.AmbientLight(0xffffff, 1.0);
+      const hemi = new runtime.HemisphereLight(0xffffff, 0x888877, 0.6);
+      this.scene.add(hemi);
+
+      // Stärkeres Ambient-Light für Grundhelligkeit
+      const ambientLight = new runtime.AmbientLight(0xffffff, 1.2);
       this.scene.add(ambientLight);
 
-      // Hauptlicht von vorne oben - stärker
+      // Hauptlicht von vorne oben
-      const directionalLight = new runtime.DirectionalLight(0xffffff, 1.2);
+      const directionalLight = new runtime.DirectionalLight(0xffffff, 1.6);
       directionalLight.position.set(5, 10, 5);
       this.scene.add(directionalLight);
 
-      // Zusätzliches Licht von hinten - heller
+      // Back- und Seitenlicht für mehr Tiefe
-      const backLight = new runtime.DirectionalLight(0xffffff, 0.75);
+      const backLight = new runtime.DirectionalLight(0xffffff, 1.0);
       backLight.position.set(-5, 5, -5);
       this.scene.add(backLight);
 
-      // Zusätzliches Seitenlicht für mehr Tiefe
+      const sideLight = new runtime.DirectionalLight(0xffffff, 0.8);
-      const sideLight = new runtime.DirectionalLight(0xffffff, 0.5);
       sideLight.position.set(-5, 5, 5);
       this.scene.add(sideLight);
 
+      // Renderer: sRGB Encoding + ACES tone mapping improves color and contrast
+      try {
+        if (this.renderer) {
+          this.renderer.outputEncoding = runtime.sRGBEncoding;
+          if (runtime.ACESFilmicToneMapping) {
+            this.renderer.toneMapping = runtime.ACESFilmicToneMapping;
+            this.renderer.toneMappingExposure = 1.0;
+          }
+          this.renderer.physicallyCorrectLights = true;
+        }
+      } catch (e) {
+        // ignore if runtime doesn't provide these in some env
+      }
+
       // Resize Handler
       window.addEventListener('resize', this.onWindowResize);
       // Observe size changes of the container (useful when element is shown/hidden via v-show)
@@ -349,24 +368,24 @@ export default {
         const initialBox = new modelRuntime.Box3().setFromObject(this.model);
         const initialSize = initialBox.getSize(new modelRuntime.Vector3());
         
-        // Skalierung basierend auf Alter
+        // Skalierung basierend auf Alter (etwas größer für Kinder)
         const age = this.actualAge;
         let ageScale = 1;
         if (age <= 3) {
-          ageScale = 0.4;
-        } else if (age <= 7) {
           ageScale = 0.6;
+        } else if (age <= 7) {
+          ageScale = 0.8;
         } else if (age <= 12) {
-          ageScale = 0.75;
-        } else if (age <= 17) {
           ageScale = 0.9;
+        } else if (age <= 17) {
+          ageScale = 0.98;
         } else {
           ageScale = 1.0;
         }
-        
+
         // Modell skalieren, damit es in die Szene passt
         const maxDimension = Math.max(initialSize.x, initialSize.y, initialSize.z);
-        const targetHeight = 2; // Zielhöhe in 3D-Einheiten
+        const targetHeight = 2.5; // Zielhöhe in 3D-Einheiten (etwas größer)
         const modelScale = (targetHeight / maxDimension) * ageScale;
         this.model.scale.set(modelScale, modelScale, modelScale);