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

---
 public/index.html | 79 ++++++++++++++++-------------------------------
 1 file changed, 26 insertions(+), 53 deletions(-)

diff --git a/public/index.html b/public/index.html
index 65b5cd6..23535d5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,12 +24,9 @@
 </head>
 <body>
   <script>
-    let selectedModel = 'robot';
+    let selectedModel = 'robot'; // Standardauswahl
     let models = {};
     let reticle;
-    let currentModel = null;
-    let scene, camera, hitTestSource;
-    let hitTestResults = [];
 
     async function activateXR() {
       const canvas = document.createElement('canvas');
@@ -38,11 +35,11 @@
       const renderer = new THREE.WebGLRenderer({ alpha: true, canvas, context: gl });
       renderer.autoClear = false;
 
-      scene = new THREE.Scene();
-      camera = new THREE.PerspectiveCamera();
+      const scene = new THREE.Scene();
+      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);
@@ -55,23 +52,28 @@
         scene.add(reticle);
       });
 
-      // Modelle
+      // Modelle laden
       loader.load("https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb", (gltf) => {
         models.robot = gltf.scene;
+        models.robot.visible = false; // Start ohne sichtbar
+        scene.add(models.robot);
       });
       loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", (gltf) => {
         models.flower = gltf.scene;
+        models.flower.visible = false; // Start ohne sichtbar
+        scene.add(models.flower);
       });
 
-      // XR-Session
+      // 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');
-      hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
+      const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
 
       session.requestAnimationFrame(onXRFrame);
 
+      // AR-Rendering
       function onXRFrame(time, frame) {
         session.requestAnimationFrame(onXRFrame);
         gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
@@ -86,12 +88,24 @@
           camera.projectionMatrix.fromArray(view.projectionMatrix);
           camera.updateMatrixWorld(true);
 
-          hitTestResults = frame.getHitTestResults(hitTestSource);
+          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);
+
+            // Interaktive Modellwahl
+            const distanceToRobot = hitTestResults[0].distanceTo(models.robot.position);
+            const distanceToFlower = hitTestResults[0].distanceTo(models.flower.position);
+
+            if (distanceToRobot < distanceToFlower) {
+              models.robot.visible = true;
+              models.flower.visible = false;
+            } else {
+              models.flower.visible = true;
+              models.robot.visible = false;
+            }
           }
 
           renderer.render(scene, camera);
@@ -99,48 +113,7 @@
       }
     }
 
-    // Touch-Logik zur Unterscheidung zwischen Swipe und Tap
-    let startX = 0, startY = 0, endX = 0, endY = 0;
-    const swipeThreshold = 50; // Minimale Swipe-Distanz
-
-    document.body.addEventListener('touchstart', (e) => {
-      startX = e.touches[0].clientX;
-      startY = e.touches[0].clientY;
-    });
-
-    document.body.addEventListener('touchend', (e) => {
-      endX = e.changedTouches[0].clientX;
-      endY = e.changedTouches[0].clientY;
-
-      const deltaX = endX - startX;
-      const deltaY = endY - startY;
-
-      // Unterscheidung zwischen Swipe und Tap
-      if (Math.abs(deltaX) > swipeThreshold) {
-        if (deltaX > 0) {
-          switchModel('next');
-        } else {
-          switchModel('previous');
-        }
-      } else if (Math.abs(deltaY) < swipeThreshold) {
-        placeModel(); // Nur platzieren, wenn keine große Bewegung erkannt wurde
-      }
-    });
-
-    function placeModel() {
-      if (reticle && reticle.visible && models[selectedModel]) {
-        const newModel = models[selectedModel].clone();
-        newModel.position.copy(reticle.position);
-        scene.add(newModel);
-      }
-    }
-
-    function switchModel(direction) {
-      selectedModel = direction === 'next' ? 
-        (selectedModel === 'robot' ? 'flower' : 'robot') : 
-        (selectedModel === 'robot' ? 'flower' : 'robot');
-    }
-
+    // AR starten
     if (navigator.xr) {
       const startButton = document.createElement('button');
       startButton.textContent = 'Start AR';
-- 
GitLab