Anlegen vom Raum-Scanner

2026-06-16 10:06:05 +02:00
commit 792022d1fb
1836 changed files with 773869 additions and 0 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AppRobot_Room – 3D Viewer</title>
+  data:,
+
+  <style>
+    html, body { height: 100%; margin: 0; background: #ffffff; color: #111; font-family: system-ui, Segoe UI, Arial, sans-serif; }
+    #app { display: grid; grid-template-columns: 1fr 320px; grid-template-rows: auto 1fr; height: 100%; }
+    header { grid-column: 1 / span 2; padding: 8px 12px; background: #f4f6f8; border-bottom: 1px solid #d9dee3; }
+    #canvas-wrap { position: relative; }
+    #hud { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,0.5); color:#fff; padding: 6px 8px; border-radius: 6px; font-size: 12px; }
+    aside {  border-left: 1px solid #d9dee3; padding: 10px; background: #f9fbfc; }
+    .row { margin-bottom: 8px; }
+    label { font-size: 12px; color: #4b5563; }
+    input[type="number"], input[type="text"] { width: 100%; padding: 6px; background: #fff; border: 1px solid #cbd5e1; color: #111; border-radius: 4px; }
+    button { padding: 6px 10px; background: #2563eb; border: 0; color: #fff; border-radius: 4px; cursor: pointer; }
+    a { color: #1d4ed8; }
+    canvas { display:block; }
+  </style>
+
+  <!-- Import-Map: three & addons von /vendor/three (server.js mappt node_modules) -->
+  <script type="importmap">
+  {
+    "imports": {
+      "three": "/vendor/three/build/three.module.js",
+      "three/addons/": "/vendor/three/examples/jsm/"
+    }
+  }
+  </script>
+</head>
+<body>
+  <div id="app">
+    <header>
+      <strong>AppRobot_Room</strong> · <span id="status">Verbinde …</span>
+    </header>
+
+    <div id="canvas-wrap">
+      <div id="hud">
+        <div>FPS: <span id="fps">–</span></div>
+        <div>Frame: <span id="frameInfo">–</span></div>
+        <div>Frames (10s): <span id="frames10s">0</span></div>
+      </div>
+      <canvas id="three"></canvas>
+    </div>
+
+    <!--  
+    <aside>
+      <div class="row"><label>Server-Config:</label>
+        <pre id="cfg" style="white-space: pre-wrap; word-break: break-word; font-size: 12px; background: #fff; padding: 8px; border-radius: 6px; max-height: 40vh; overflow:auto;"></pre>
+      </div>
+      <div class="row"><button id="btnReset">Ansicht zurücksetzen</button></div>
+      <p style="font-size:12px; color:#4b5563;">WASD/Mouse: Kamera · Spheres: ~5 cm Ø · Farben: Distanz</p>
+    </aside>
+    -->
+  </div>
+
+  <!-- App als ES-Modul -->
+   <script type="module" src="./app.js"></script>
+</body>
+</html>