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
light.html
+18 -3
View File
@@ -19,7 +19,7 @@
.page { max-width: 1400px; margin: 0 auto; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head img { height: 34px; }
.page-head select { font: inherit; padding: 6px 10px; border: 1px solid #c5ced9; border-radius: 8px; background: #fff; }
.page-head select, .page-head button { font: inherit; padding: 6px 10px; border: 1px solid #c5ced9; border-radius: 8px; background: #fff; }
@media (max-width: 820px) { body { padding: 12px; } }
</style>
<script src="js/vendor/three.min.js"></script>
@@ -30,7 +30,11 @@
<div class="page-head">
<img src="assets/logo.svg" alt="Van Emous Mantelzorgwoningen">
<!-- Alleen voor het losse testen: op een modelpagina staat het model vast. -->
<select id="model-pick" aria-label="Model"></select>
<div>
<select id="model-pick" aria-label="Model"></select>
<!-- Alleen voor het testen: de GLB die op een telefoon in AR wordt getoond (bijv. in Blender of een glTF-viewer). -->
<button type="button" id="glb-dl" title="De GLB die AR gebruikt downloaden">GLB</button>
</div>
</div>
<div id="configurator" class="tectum-light"></div>
</div>
@@ -40,6 +44,7 @@
<script src="js/core/view-layers.js"></script>
<script src="js/core/ui-kit.js"></script>
<script src="js/core/skybox.js"></script>
<script src="js/core/glb-writer.js"></script>
<script src="js/vendor/jspdf.umd.min.js"></script>
<script src="js/vendor/qrcode.js"></script>
<script src="js/core/pdf-sheet.js"></script>
@@ -75,7 +80,17 @@
const pick = document.getElementById('model-pick');
pick.innerHTML = Object.entries(HouseModel.MODELS).map(([k, m]) => `<option value="${k}"${k === model ? ' selected' : ''}>${m.label}</option>`).join('');
pick.addEventListener('change', () => { location.search = '?model=' + pick.value; });
document.getElementById('configurator').dataset.model = model;
const el = document.getElementById('configurator'), btn = document.getElementById('glb-dl');
el.dataset.model = model;
btn.addEventListener('click', () => {
const g = el.tectumLight && el.tectumLight.glb();
if (!g) return;
const a = document.createElement('a');
a.href = g.url;
a.download = `${model}.glb`;
a.click();
btn.textContent = `GLB · ${(g.stats.bytes / 1e6).toLocaleString('nl-NL', { maximumFractionDigits: 1 })} MB · ${g.stats.triangles.toLocaleString('nl-NL')} driehoeken`;
});
})();
</script>
<script src="js/light/light.js"></script>