giers10/virtual_interdimensional_spirit_summoner
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactor resize handler in app.js to improve aspect ratio handling and centering of the renderer

Browse Source
This commit is contained in:
Victor Giers
2025-05-28 04:26:24 +02:00
parent cfa79872c5
commit 1fd6811321
1 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
node/server/public/app.js
View File

@@ -45,21 +45,38 @@ composer.addPass(new ShaderPass(GammaCorrectionShader));
// ---- Resize Handler ---- // ---- Resize Handler ----
function onResize() { function onResize() {
const W = container.clientWidth, H = container.clientHeight, winA = W / H; const winW = window.innerWidth, winH = window.innerHeight;
let vw, vh, vx, vy; const aspect = 3/2;
if (winA > ASPECT) { vh = H; vw = H * ASPECT; vx = (W - vw) / 2; vy = 0; } let renderW, renderH;
else { vw = W; vh = W / ASPECT; vx = 0; vy = (H - vh) / 2; }
renderer.setSize(W, H); if (winW / winH > aspect) {
renderer.setViewport(vx, vy, vw, vh); // Fenster ist breiter als 3:2 → fülle in Höhe, überstehende Breite
renderer.setScissor(vx, vy, vw, vh); renderH = winH;
renderer.setScissorTest(true); renderW = winH * aspect;
renderer.toneMapping = THREE.ACESFilmicToneMapping; } else {
renderer.toneMappingExposure = 1.2; // Fenster ist schmaler als 3:2 → fülle in Breite, überstehende Höhe
renderer.outputColorSpace = THREE.SRGBColorSpace; renderW = winW;
composer.setSize(W, H); renderH = winW / aspect;
}
// Setze die Größe des Renderers und Canvas
renderer.setSize(renderW, renderH, false); // "false": ändert nicht das Canvas-Element selbst!
composer.setSize(renderW, renderH);
// Platziere das Canvas absolut zentriert, setze style.width/height so dass es "überragt"
renderer.domElement.style.width = `${renderW}px`;
renderer.domElement.style.height = `${renderH}px`;
renderer.domElement.style.left = '50%';
renderer.domElement.style.top = '50%';
renderer.domElement.style.transform = 'translate(-50%, -50%)';
// Scissor/Viewport: Zeige die ganze Fläche, kein „Clipping“ nötig
renderer.setScissorTest(false);
// Pixel Ratio
const dpr = window.devicePixelRatio || 1; const dpr = window.devicePixelRatio || 1;
renderer.setPixelRatio(dpr); renderer.setPixelRatio(dpr);
composer.setPixelRatio(dpr); composer.setPixelRatio(dpr);
camera.updateProjectionMatrix(); camera.updateProjectionMatrix();
} }
window.addEventListener('resize', onResize); window.addEventListener('resize', onResize);