admGitAICDSandClaude Opus 5
70d239fe9c
Geometrie massstaeblich aus dem Gartenplan-PDF (1:100) extrahiert: Belaege, Mauern, Pflanzenstandorte und 46 Hoehenkoten. Wohnhaus nach Gartenplan und den Fassadenplaenen von EHLE Architekten. - tools/: Pipeline PDF -> Szenenmodell (MuPDF, Node) - src/: three.js-Szene mit prozeduralen Texturen, Rundgang und Uebersicht - Docker/Traefik fuer garten.aicds.ch, Gitea-Workflow auf main Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
66 lines
2.8 KiB
HTML
66 lines
2.8 KiB
HTML
<!doctype html>
|
|
<html lang="de-CH">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no" />
|
|
<meta name="theme-color" content="#2c3a2a" />
|
|
<meta name="description" content="Begehbare 3D-Visualisierung des geplanten Gartens an der Egglihaldenstrasse 9a in Abtwil, massstäblich aus dem Gartenplan der Garten Design AG." />
|
|
<title>Garten Egglihaldenstrasse 9a · 3D-Visualisierung</title>
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E%F0%9F%8C%B3%3C/text%3E%3C/svg%3E" />
|
|
</head>
|
|
<body>
|
|
<canvas id="view"></canvas>
|
|
|
|
<div id="loader">
|
|
<div class="loader-inner">
|
|
<div class="loader-title">Garten Egglihaldenstrasse 9a</div>
|
|
<div class="loader-bar"><span id="loader-fill"></span></div>
|
|
<div class="loader-note" id="loader-note">Gartenplan wird aufgebaut …</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hud" hidden>
|
|
<header id="topbar">
|
|
<div class="brand">
|
|
<strong>Garten Egglihaldenstrasse 9a</strong>
|
|
<span>Abtwil SG · Gartenplan 1, Garten Design AG</span>
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<button id="btn-mode" type="button" title="Zwischen Rundgang und Übersicht wechseln">Übersicht</button>
|
|
<button id="btn-info" type="button" title="Informationen zum Plan">Info</button>
|
|
</div>
|
|
</header>
|
|
|
|
<nav id="views" aria-label="Standorte"></nav>
|
|
|
|
<div id="timebar">
|
|
<label for="time">Tageszeit <output id="time-out">14:00</output></label>
|
|
<input id="time" type="range" min="4" max="23" step="0.25" value="14" />
|
|
<label for="season">Datum <output id="season-out">21. Juni</output></label>
|
|
<input id="season" type="range" min="1" max="365" step="1" value="172" />
|
|
</div>
|
|
|
|
<div id="crosshair"></div>
|
|
|
|
<div id="hint">
|
|
<span class="desktop">Klicken zum Umsehen · <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> gehen · <kbd>Shift</kbd> schneller · <kbd>Esc</kbd> Maus freigeben</span>
|
|
<span class="touch">Links ziehen zum Gehen · rechts wischen zum Umsehen</span>
|
|
</div>
|
|
|
|
<div id="joystick" hidden><div id="joystick-knob"></div></div>
|
|
|
|
<aside id="info" hidden>
|
|
<button id="info-close" type="button" aria-label="Schliessen">×</button>
|
|
<h2>Über diese Visualisierung</h2>
|
|
<div id="info-body"></div>
|
|
</aside>
|
|
</div>
|
|
|
|
<noscript>
|
|
<p style="padding:2rem;font:16px system-ui">Für die 3D-Visualisierung wird JavaScript benötigt.</p>
|
|
</noscript>
|
|
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|