torsten/yourpart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Anpassung der Kameraposition und Beleuchtung für bessere Darstellung in 3D-Ansichten
All checks were successful
Deploy to production / deploy (push) Successful in 1m53s
Details

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-05-21 08:28:47 +02:00
parent a766d47294
commit 01953b1e18
1 changed files with 36 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/components/Character3D.vue
View File

@@ -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);