me/wireless-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tweak aspect ratio handling

Browse Source
This commit is contained in:
David Allemang
2026-09-10 14:09:49 -04:00
parent 9995d29421
commit e090f8df7c
4 changed files with 33 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components.css
View File

@@ -6,7 +6,7 @@ mc-diorama {
display: block; display: block;
position: relative; position: relative;
width: 100%; width: 100%;
height: 20em; aspect-ratio: 16 / 9;
canvas { canvas {
display: block; display: block;
@@ -14,7 +14,6 @@ mc-diorama {
height: 100%; height: 100%;
} }
.overlay { .overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
@@ -92,4 +91,4 @@ mc-diorama {
pointer-events: auto; pointer-events: auto;
} }
} }
} }

2
src/controller.js
View File

@@ -259,4 +259,4 @@ export class SpacetimeController {
requestAnimationFrame(this.loop.bind(this)); requestAnimationFrame(this.loop.bind(this));
} }
} }

10
src/diorama.js
View File

@@ -92,8 +92,12 @@ export class Diorama {
this.target[2] + this.radius * this.viewDir[2], this.target[2] + this.radius * this.viewDir[2],
]; ];
const size = this.radius * 0.5; const size = this.radius / 2;
mat4Ortho(this.projMatrix, -size * aspectRatio, size * aspectRatio, -size, size, -50, 50); if (aspectRatio < 1) {
mat4Ortho(this.projMatrix, -size * aspectRatio, size * aspectRatio, -size, size, -50, 50);
} else {
mat4Ortho(this.projMatrix, -size, size, -size / aspectRatio, size / aspectRatio, -50, 50);
}
mat4LookAt( mat4LookAt(
this.viewMatrix, this.viewMatrix,
@@ -105,4 +109,4 @@ export class Diorama {
return this.viewProjMatrix; return this.viewProjMatrix;
} }
} }

28
src/style.css
View File

@@ -10,11 +10,29 @@ h1, h2, h3, h4, h5, h6, nav li, .btn {
font-family: "Mojangles", sans-serif; font-family: "Mojangles", sans-serif;
} }
:root {
line-height: 1.5;
font-family: sans-serif;
}
body { body {
max-width: 70ch; padding-inline: 1rch;
padding-inline: 1ch;
margin-inline: auto; & > main {
font: 1rem / 1.5 sans-serif; max-width: 90rch;
margin-inline: auto;
& > * {
background: rgb(from red r g b / 0.3);
max-width: 70rch;
margin-inline: auto;
}
& > aside {
max-width: 20rch;
float: left;
}
}
} }
.tip { .tip {
@@ -56,7 +74,7 @@ pre code {
} }
.callout, details, table td { .callout, details, table td {
margin: 1em 0; margin-block: 1em;
padding: 0.5em 1ch; padding: 0.5em 1ch;
background: rgb(from currentColor r g b / 5%); background: rgb(from currentColor r g b / 5%);
border: 1px outset rgb(from currentColor r g b / 30%); border: 1px outset rgb(from currentColor r g b / 30%);