feat: Automatische Kameraanpassung für bessere Modellansicht und Import von Hemisphärenlicht

frontend/src/components/Character3D.vue

@@ -401,6 +401,24 @@ export default {
         
         this.scene.add(this.model);
 
+        // Auto-Kamera-Anpassung: Abstand so setzen, dass die modell-Höhe gut ins Bild passt
+        try {
+          const scaledSize = scaledBox.getSize(new modelRuntime.Vector3());
+          if (this.camera) {
+            const fovRad = (this.camera.fov * Math.PI) / 180;
+            const desiredHeight = Math.max(scaledSize.y, scaledSize.z) * 1.15; // etwas Margin
+            let distance = desiredHeight / (2 * Math.tan(fovRad / 2));
+            if (!isFinite(distance) || distance <= 0) distance = 3;
+            const camY = scaledCenter.y + Math.max(0.5, scaledSize.y * 0.15);
+            const camZ = distance + 0.6; // kleiner Offset, damit etwas Raum vor dem Modell ist
+            this.camera.position.set(0, camY, camZ);
+            this.camera.lookAt(scaledCenter.x, scaledCenter.y, scaledCenter.z);
+            this.onWindowResize();
+          }
+        } catch (e) {
+          // ignore camera auto-fit errors
+        }
+
         // Animationen laden falls vorhanden
         if (gltf.animations && gltf.animations.length > 0) {
           this.mixer = markRaw(new modelRuntime.AnimationMixer(this.model));

frontend/src/utils/threeRuntime.js

@@ -2,18 +2,22 @@ import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera.js';
 import { Clock } from 'three/src/core/Clock.js';
 import { AmbientLight } from 'three/src/lights/AmbientLight.js';
 import { DirectionalLight } from 'three/src/lights/DirectionalLight.js';
+import { HemisphereLight } from 'three/src/lights/HemisphereLight.js';
 import { Color } from 'three/src/math/Color.js';
 import { TextureLoader } from 'three/src/loaders/TextureLoader.js';
 import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js';
 import { Scene } from 'three/src/scenes/Scene.js';
+import { sRGBEncoding, ACESFilmicToneMapping } from 'three/src/constants.js';
 
 export {
   AmbientLight,
   Clock,
   Color,
   DirectionalLight,
+  HemisphereLight,
   PerspectiveCamera,
   Scene,
   TextureLoader,
   WebGLRenderer
+  ,sRGBEncoding,ACESFilmicToneMapping
 };