Update public/index.html

fb6583bc · Percen · eef6999a · fb6583bc
Commit fb6583bc authored 4 months ago by Percen
Hide whitespace changes
Inline Side-by-side

Showing

with 26 additions and 53 deletions
+26 -53
--- 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';