diff --git a/frontend/src/components/Character3D.vue b/frontend/src/components/Character3D.vue index 76685ca..e39b1e9 100644 --- a/frontend/src/components/Character3D.vue +++ b/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 - // Mehr ambient light für gleichmäßigere Ausleuchtung - const ambientLight = new runtime.AmbientLight(0xffffff, 1.0); + // Verbesserte Beleuchtung für kräftigere Farben + // HemisphereLight für etwas Umgebungsfarbe und natürliche Ground-Reflektion + 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 - const directionalLight = new runtime.DirectionalLight(0xffffff, 1.2); + // Hauptlicht von vorne oben + const directionalLight = new runtime.DirectionalLight(0xffffff, 1.6); directionalLight.position.set(5, 10, 5); this.scene.add(directionalLight); - // Zusätzliches Licht von hinten - heller - const backLight = new runtime.DirectionalLight(0xffffff, 0.75); + // Back- und Seitenlicht für mehr Tiefe + 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.5); + const sideLight = new runtime.DirectionalLight(0xffffff, 0.8); 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);