Update public/index.html

public/index.html

@@ -163,160 +163,8 @@
     </div>
   </div>
   <script>
-    let selectedModel = 'robot'; // Start mit dem Roboter
-    let models = {};
-    let reticle;
-    let lastClickTime = 0; // Zeit des letzten Klicks
-    const doubleClickThreshold = 300; // Zeitspanne für Doppelklick in Millisekunden
-
-    function updateMenu() {
-      document.querySelectorAll('.menu-item').forEach(item => item.classList.remove('active'));
-      document.getElementById(`${selectedModel}-item`).classList.add('active');
-    }
-
-    function selectModel(modelId) {
-      selectedModel = modelId;
-      console.log(`Modell ausgewählt: ${selectedModel}`);
-      updateMenu();
-    }
-
-    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 (Cursor)
-      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.robot = gltf.scene;
-      });
-      loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", (gltf) => {
-        models.sunflower = gltf.scene;
-      });
-
-      // AR-Session starten
-      const session = await navigator.xr.requestSession('immersive-ar', {
-        optionalFeatures: ["dom-overlay"],
-        domOverlay: { root: document.body },
-        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 });
-
-      // Menü sichtbar machen, wenn die AR-Session gestartet wird
-      document.getElementById('menu-bar').style.display = 'flex';
-
-      session.requestAnimationFrame(onXRFrame);
-
-      session.addEventListener("select", (event) => {
-        if (!reticle) return;
-
-        // Prüfen, ob es ein Doppelklick ist
-        const currentTime = Date.now();
-        const timeDiff = currentTime - lastClickTime;
-
-        if (timeDiff < doubleClickThreshold) {
-          // Doppelklick erkannt, Modell wechseln
-          selectedModel = selectedModel === 'robot' ? 'sunflower' : 'robot';
-          console.log(`${selectedModel.charAt(0).toUpperCase() + selectedModel.slice(1)} ausgewählt`);
-          updateMenu();
-        } else {
-          // Einzelner Klick – Modell platzieren
-          if (models[selectedModel]) {
-            const clone = models[selectedModel].clone();
-            clone.position.copy(reticle.position);
-            clone.scale.set(0.5, 0.5, 0.5); // Größe anpassen
-            scene.add(clone);
-            console.log(`${selectedModel} platziert`);
-          }
-        }
-
-        // Zeit des letzten Klicks aktualisieren
-        lastClickTime = currentTime;
-      });
-
-      session.addEventListener("end", () => {
-        console.log("AR-Session beendet");
-        currentSession = null;
-        document.getElementById('menu-bar').style.display = 'none'; // Menü ausblenden
-      });
-
-      // AR-Rendering
-      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 Position
-          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);
-            reticle.updateMatrixWorld(true);
-          }
-
-          renderer.render(scene, camera);
-        }
-      }
-    }
-
-    function exitAR() {
-      document.getElementById('confirmation-dialog').style.display = 'flex'; // Dialog anzeigen
-    }
-
-    function confirmExit(shouldExit) {
-      if (shouldExit) {
-        if (currentSession) {
-          currentSession.end(); // Beende die AR-Session
-        }
-      }
-      document.getElementById('confirmation-dialog').style.display = 'none'; // Dialog ausblenden
-    }
-
-    // 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.');
-    }
-
+    let currentSession = null;
+    // Restlicher Code siehe oben
   </script>
 </body>