Update public/index.html

0e622a26 · Percen · 8fa46633 · 0e622a26
Commit 0e622a26 authored 4 months ago by Percen
Hide whitespace changes
Inline Side-by-side

Showing

with 36 additions and 40 deletions
+36 -40
--- a/public/index.html
+++ b/public/index.html
@@ -3,72 +3,63 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AR mit Menüleiste</title>
+  <title>AR-Menü Overlay</title>
  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
    body {
-      font-family: Arial, sans-serif;
+      margin: 0;
      overflow: hidden;
-      background-color: #000;
-      color: white;
    }

-    /* Der AR-Bereich: Reduziert durch Skalierung */
+    /* Container für das WebXR Canvas */
    #ar-container {
      position: absolute;
      top: 0;
      left: 0;
-      right: 0;
-      bottom: 80px; /* Platz für die Menüleiste */
-      overflow: hidden;
-      background-color: #000;
+      width: 100%;
+      height: 100%;
+      background-color: black;
    }

-    /* Menüleiste */
-    #menu-bar {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 80px;
-      background-color: rgba(0, 0, 0, 0.8);
+    /* Menü-Leiste */
+    #menu {
+      position: fixed;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      border-top: 2px solid #333;
+      gap: 10px;
+      z-index: 10; /* Stellt sicher, dass es über dem Canvas liegt */
    }

    button {
      background-color: #2196F3;
      color: white;
-      padding: 10px 20px;
-      font-size: 18px;
      border: none;
+      padding: 10px 20px;
+      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
    }

    button:hover {
-      background-color: #1E88E5;
+      background-color: #1976D2;
    }
  </style>
 </head>
 <body>
-  <!-- Container für die AR-Ansicht -->
+  <!-- AR-Container -->
  <div id="ar-container"></div>

-  <!-- Menüleiste -->
-  <div id="menu-bar">
+  <!-- Menü-Leiste -->
+  <div id="menu">
    <button onclick="setModel('car')">Auto</button>
    <button onclick="setModel('lamp')">Lampe</button>
+    <button onclick="setModel('tree')">Baum</button>
+    <button onclick="setModel('house')">Haus</button>
+    <button onclick="setModel('robot')">Roboter</button>
  </div>

-  <!-- Three.js & AR-Skripte -->
+  <!-- Three.js & WebXR -->
  <script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
  <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>

@@ -91,27 +82,28 @@
      const camera = new THREE.PerspectiveCamera();
      camera.matrixAutoUpdate = false;

-      // Licht
+      // Licht hinzufügen
      const light = new THREE.DirectionalLight(0xffffff, 1);
      light.position.set(10, 10, 10);
      scene.add(light);

-      // GLTF-Loader für Modelle
+      // GLTF-Modelle laden
      const loader = new THREE.GLTFLoader();
      loader.load("https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb", (gltf) => {
-        models.car = gltf.scene;
+        models.robot = gltf.scene;
      });
      loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", (gltf) => {
-        models.lamp = gltf.scene;
+        models.tree = gltf.scene;
      });

-      // Reticle (Cursor für Platzierung)
+      // Reticle (Platzierungspunkt)
      loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", (gltf) => {
        reticle = gltf.scene;
        reticle.visible = false;
        scene.add(reticle);
      });

+      // AR-Session starten
      const session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['hit-test'] });
      session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) });
      const referenceSpace = await session.requestReferenceSpace('local');
@@ -120,6 +112,7 @@

      session.requestAnimationFrame(onXRFrame);

+      // Interaktion für Modellplatzierung
      session.addEventListener("select", () => {
        if (reticle && models[selectedModel]) {
          const clone = models[selectedModel].clone();
@@ -137,12 +130,13 @@
        if (pose) {
          const view = pose.views[0];
          const viewport = session.renderState.baseLayer.getViewport(view);
-          renderer.setSize(container.clientWidth, container.clientHeight);
+          renderer.setSize(viewport.width, viewport.height);

          camera.matrix.fromArray(view.transform.matrix);
          camera.projectionMatrix.fromArray(view.projectionMatrix);
          camera.updateMatrixWorld(true);

+          // Reticle platzieren
          const hitTestResults = frame.getHitTestResults(hitTestSource);
          if (hitTestResults.length > 0) {
            const hitPose = hitTestResults[0].getPose(referenceSpace);
@@ -155,15 +149,17 @@
      }
    }

+    // Aktuelles Modell ändern
    function setModel(model) {
      selectedModel = model;
      console.log(`${model} ausgewählt`);
    }

+    // AR starten
    if (navigator.xr) {
      const startButton = document.createElement('button');
      startButton.textContent = 'Start AR';
-      startButton.style.cssText = "position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100;";
+      startButton.style.cssText = "position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 15px; font-size: 18px;";
      document.body.appendChild(startButton);
      startButton.onclick = () => {
        startButton.remove();