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

Optimize window resizing logic in app.js

Browse Source
This commit is contained in:
Victor Giers
2025-05-28 05:38:15 +02:00
parent 25f63125f6
commit 8149c407e8
1 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -47,22 +47,32 @@ composer.addPass(new ShaderPass(GammaCorrectionShader));
function onResize() { function onResize() {
const winW = window.innerWidth, winH = window.innerHeight; const winW = window.innerWidth, winH = window.innerHeight;
const aspect = 3/2; const aspect = 3/2;
let renderW, renderH, styleW, styleH;
let renderW, renderH;
if (winW / winH > aspect) { if (winW / winH > aspect) {
// Fenster ist breiter → passe an Breite an, Höhe reicht nicht aus → Höhe muss „überragen“ // Querformat (breit) → CONTAIN
renderH = winH;
renderW = winH * aspect;
styleW = `${renderW}px`;
styleH = `${renderH}px`;
} else {
// Hochformat oder quadratisch → COVER
renderW = winW; renderW = winW;
renderH = winW / aspect; renderH = winW / aspect;
} else { if (renderH < winH) {
// Fenster ist höher/schmaler → passe an Höhe an, Breite reicht nicht aus → Breite muss „überragen“ // Ist nach Covern immer noch zu klein? Dann auf volle Höhe und rechts/links abschneiden
renderH = winH; renderH = winH;
renderW = winH * aspect; renderW = winH * aspect;
} }
styleW = `${renderW}px`;
styleH = `${renderH}px`;
}
renderer.setSize(renderW, renderH, false); renderer.setSize(renderW, renderH, false);
composer.setSize(renderW, renderH); composer.setSize(renderW, renderH);
renderer.domElement.style.width = `${renderW}px`; renderer.domElement.style.width = styleW;
renderer.domElement.style.height = `${renderH}px`; renderer.domElement.style.height = styleH;
renderer.domElement.style.left = '50%'; renderer.domElement.style.left = '50%';
renderer.domElement.style.top = '50%'; renderer.domElement.style.top = '50%';
renderer.domElement.style.transform = 'translate(-50%, -50%)'; renderer.domElement.style.transform = 'translate(-50%, -50%)';