Machiel/Tectum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.7.5: AR en schermvullend in de light-versie: knop rechtsboven in de weergave; op een telefoon/tablet het ontwerp als GLB in model-viewer over de hele pagina met "Bekijk in je tuin" (ware grootte, WebXR/Scene Viewer/Quick Look, op iOS maakt model-viewer de USDZ; model-viewer 4.3.1, Apache-2.0, UMD met eigen three.js, pas geladen bij de eerste keer AR), op de desktop de weergave schermvullend (scrollwiel zoomt dan direct); GlbWriter (js/core/glb-writer.js): glTF 2.0 binair uit three.js-objecten, één primitive per materiaal, PBR met lineaire kleuren, texturen als JPEG/PNG op een macht van 2 tot 1024 px met de textuurmatrix in de UV's, lichtbundels en -vegen weg, nul-driehoeken eruit en lege normalen naar de vlaknormaal (valideert zonder fouten); GLB één keer per ontwerp, el.tectumLight.glb() en een testknop GLB op light.html; HouseModel.rootGroups en groundOrigin gedeeld met de render-export

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Machiel
2026-10-14 12:06:09 +02:00
co-authored by Claude Opus 5.5
parent decbbb4b72
commit 432e0f494a
10 changed files with 1766 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/light.css
+42
View File
@@ -65,6 +65,15 @@
.tectum-light.view-cut .tl-cutbar { display: flex; }
.tectum-light .tl-cutbar input { width: 150px; accent-color: var(--tl-primary); }
.tectum-light .tl-cutbar output { min-width: 4.2em; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Rechtsboven: AR (telefoon/tablet) of schermvullend (desktop). */
.tectum-light .tl-xbtn {
position: absolute; top: 10px; right: 10px; width: 35px; height: 35px; padding: 0; border: 0; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer;
background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); color: var(--tl-text);
}
.tectum-light .tl-xbtn:hover { color: var(--tl-primary); }
.tectum-light .tl-xbtn[hidden] { display: none; }
.tectum-light.has-xbtn .tl-busy { right: 53px; }
.tectum-light .tl-hint { left: 10px; bottom: 10px; font-size: 12px; color: var(--tl-muted); padding: 3px 8px; box-shadow: none; pointer-events: none; }
.tectum-light .tl-busy { top: 10px; right: 10px; display: none; align-items: center; gap: 8px; padding: 6px 12px; }
.tectum-light.is-busy .tl-busy { display: inline-flex; }
@@ -174,6 +183,8 @@
.tectum-light .tl-hint { display: none; }
.tectum-light .tl-viewbar { left: 8px; right: 8px; top: 8px; }
.tectum-light .tl-viewbar button { flex: 1; justify-content: center; }
.tectum-light.has-xbtn .tl-viewbar { right: 51px; }
.tectum-light .tl-xbtn { top: 8px; right: 8px; width: 37px; height: 37px; }
.tectum-light .tl-cutbar { left: 8px; right: 8px; top: 50px; }
.tectum-light .tl-cutbar input { flex: 1; width: auto; }
.tectum-light .tl-busy { top: auto; bottom: 10px; right: 10px; }
@@ -187,3 +198,34 @@
.tectum-light .tl-viewbar button .bi { display: none; }
.tectum-light .tl-facts { grid-template-columns: 1fr; }
}
/* AR-weergave (model-viewer) over de hele pagina. Staat buiten .tectum-light: die is een container en zou het kader van
position: fixed worden. Kleur van de knop = --tl-primary. */
html.tl-noscroll, html.tl-noscroll body { overflow: hidden; }
.tl-arview {
position: fixed; inset: 0; z-index: 2147483000; display: none; background: #dfe6ec; color: #212121;
font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.tl-arview.on { display: block; }
.tl-arview *, .tl-arview *::before, .tl-arview *::after { box-sizing: border-box; }
.tl-arview model-viewer { display: block; width: 100%; height: 100%; background: #dfe6ec; --poster-color: transparent; }
.tl-arview .tl-ar-top {
position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: max(10px, env(safe-area-inset-top)) 12px 10px 16px; pointer-events: none;
}
.tl-arview .tl-ar-title { font-size: 17px; font-weight: 700; }
.tl-arview .tl-ar-close {
pointer-events: auto; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: inherit;
background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.tl-arview .tl-ar-go {
position: absolute; left: 50%; bottom: calc(44px + env(safe-area-inset-bottom)); transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 9px; height: 50px; margin: 0; padding: 0 24px; border: 0; border-radius: 25px;
background: #b95913; color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.tl-arview .tl-ar-go .bi { font-size: 22px; }
.tl-arview .tl-ar-note {
position: absolute; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom));
text-align: center; font-size: 12px; color: #5b6673; pointer-events: none;
}