From 91f23d187b91e85b9fedaefe3e8243ac86b49694 Mon Sep 17 00:00:00 2001
From: Percen <21pesi1bif@hft-stuttgart.de>
Date: Sat, 14 Dec 2024 14:20:38 +0000
Subject: [PATCH] Update public/index.html

---
 public/index.html | 282 ++++++++++++++++++++--------------------------
 1 file changed, 122 insertions(+), 160 deletions(-)

diff --git a/public/index.html b/public/index.html
index f20a77c..18cc291 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,171 +3,133 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AR-Menü Overlay</title>
-  <style>
-    body {
-      margin: 0;
-      overflow: hidden;
-    }
-
-    /* Container für das WebXR Canvas */
-    #ar-container {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: black;
-    }
-
-    /* Menü-Leiste */
-    #menu {
-      position: fixed;
-      bottom: 20px;
-      left: 50%;
-      transform: translateX(-50%);
-      display: flex;
-      gap: 10px;
-      z-index: 10; /* Stellt sicher, dass es über dem Canvas liegt */
-    }
-
-    button {
-      background-color: #2196F3;
-      color: white;
-      border: none;
-      padding: 10px 20px;
-      font-size: 16px;
-      border-radius: 5px;
-      cursor: pointer;
-    }
-
-    button:hover {
-      background-color: #1976D2;
-    }
-  </style>
-</head>
-<body>
-  <!-- AR-Container -->
-  <div id="ar-container"></div>
-
-  <!-- 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 & WebXR -->
+  <title>3D-Menü in AR</title>
   <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>
-
-  <script>
-    let selectedModel = 'car';
-    let models = {};
-    let reticle;
-
-    async function activateXR() {
-      const container = document.getElementById('ar-container');
-
-      const canvas = document.createElement('canvas');
-      container.appendChild(canvas);
-
-      const gl = canvas.getContext('webgl', { xrCompatible: true });
-      const renderer = new THREE.WebGLRenderer({ alpha: true, canvas, context: gl });
-      renderer.autoClear = false;
-
-      const scene = new THREE.Scene();
-      const camera = new THREE.PerspectiveCamera();
-      camera.matrixAutoUpdate = false;
-
-      // Licht hinzufügen
-      const light = new THREE.DirectionalLight(0xffffff, 1);
-      light.position.set(10, 10, 10);
-      scene.add(light);
-
-      // GLTF-Modelle laden
-      const loader = new THREE.GLTFLoader();
-      loader.load("https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb", (gltf) => {
-        models.robot = gltf.scene;
-      });
-      loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", (gltf) => {
-        models.tree = gltf.scene;
-      });
-
-      // 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');
-      const viewerSpace = await session.requestReferenceSpace('viewer');
-      const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
-
-      session.requestAnimationFrame(onXRFrame);
-
-      // Interaktion für Modellplatzierung
-      session.addEventListener("select", () => {
-        if (reticle && models[selectedModel]) {
-          const clone = models[selectedModel].clone();
-          clone.position.copy(reticle.position);
-          scene.add(clone);
-          console.log(`${selectedModel} platziert`);
-        }
-      });
-
-      function onXRFrame(time, frame) {
-        session.requestAnimationFrame(onXRFrame);
-        gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
-
-        const pose = frame.getViewerPose(referenceSpace);
-        if (pose) {
-          const view = pose.views[0];
-          const viewport = session.renderState.baseLayer.getViewport(view);
-          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);
-            reticle.visible = true;
-            reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
-          }
-
-          renderer.render(scene, camera);
-        }
+</head>
+<body>
+<script>
+let selectedModel = 'car'; // Standardmodell
+let models = {};
+let reticle;
+
+// Aktiviert die AR-Session
+async function activateXR() {
+  const canvas = document.createElement('canvas');
+  document.body.appendChild(canvas);
+
+  const gl = canvas.getContext('webgl', { xrCompatible: true });
+  const renderer = new THREE.WebGLRenderer({ alpha: true, canvas, context: gl });
+  renderer.autoClear = false;
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera();
+  camera.matrixAutoUpdate = false;
+
+  // Licht hinzufügen
+  const light = new THREE.DirectionalLight(0xffffff, 1);
+  light.position.set(10, 10, 10);
+  scene.add(light);
+
+  // Reticle zum Platzieren der Modelle
+  const loader = new THREE.GLTFLoader();
+  loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", (gltf) => {
+    reticle = gltf.scene;
+    reticle.visible = false;
+    scene.add(reticle);
+  });
+
+  // Modelle laden
+  loader.load("https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb", (gltf) => models.car = gltf.scene);
+  loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", (gltf) => models.tree = gltf.scene);
+
+  // 3D-Menü erstellen
+  const buttonGeometry = new THREE.PlaneGeometry(0.2, 0.1);
+  const carMaterial = new THREE.MeshBasicMaterial({ color: 0x2196F3 });
+  const treeMaterial = new THREE.MeshBasicMaterial({ color: 0x4CAF50 });
+
+  const carButton = new THREE.Mesh(buttonGeometry, carMaterial);
+  carButton.position.set(-0.3, -0.5, -1); // Links
+  scene.add(carButton);
+
+  const treeButton = new THREE.Mesh(buttonGeometry, treeMaterial);
+  treeButton.position.set(0.3, -0.5, -1); // Rechts
+  scene.add(treeButton);
+
+  // Raycaster für Interaktionen
+  const raycaster = new THREE.Raycaster();
+  const pointer = new THREE.Vector2();
+
+  // 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');
+  const viewerSpace = await session.requestReferenceSpace('viewer');
+  const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
+
+  session.requestAnimationFrame(onXRFrame);
+
+  session.addEventListener("select", () => {
+    raycaster.setFromCamera(pointer, camera);
+    const intersects = raycaster.intersectObjects([carButton, treeButton]);
+
+    if (intersects.length > 0) {
+      const clickedButton = intersects[0].object;
+      if (clickedButton === carButton) {
+        selectedModel = 'car';
+        console.log('Auto ausgewählt');
+      } else if (clickedButton === treeButton) {
+        selectedModel = 'tree';
+        console.log('Baum ausgewählt');
       }
+    } else if (reticle && models[selectedModel]) {
+      const clone = models[selectedModel].clone();
+      clone.position.copy(reticle.position);
+      clone.scale.set(0.5, 0.5, 0.5);
+      scene.add(clone);
+      console.log(`${selectedModel} platziert`);
     }
+  });
+
+  function onXRFrame(time, frame) {
+    session.requestAnimationFrame(onXRFrame);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
+
+    const pose = frame.getViewerPose(referenceSpace);
+    if (pose) {
+      const view = pose.views[0];
+      const viewport = session.renderState.baseLayer.getViewport(view);
+      renderer.setSize(viewport.width, viewport.height);
+
+      camera.matrix.fromArray(view.transform.matrix);
+      camera.projectionMatrix.fromArray(view.projectionMatrix);
+      camera.updateMatrixWorld(true);
+
+      const hitTestResults = frame.getHitTestResults(hitTestSource);
+      if (hitTestResults.length > 0) {
+        const hitPose = hitTestResults[0].getPose(referenceSpace);
+        reticle.visible = true;
+        reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
+      }
 
-    // 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%); padding: 15px; font-size: 18px;";
-      document.body.appendChild(startButton);
-      startButton.onclick = () => {
-        startButton.remove();
-        activateXR();
-      };
-    } else {
-      alert('WebXR wird nicht unterstützt.');
+      renderer.render(scene, camera);
     }
-  </script>
+  }
+}
+
+// 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%); padding: 15px; font-size: 18px;";
+  document.body.appendChild(startButton);
+  startButton.onclick = () => {
+    startButton.remove();
+    activateXR();
+  };
+} else {
+  alert('WebXR wird nicht unterstützt.');
+}
+</script>
 </body>
 </html>
-- 
GitLab