Update public/index.html

298900fa · Percen · 19e51950 · 298900fa
Commit 298900fa authored 4 months ago by Percen
Hide whitespace changes
Inline Side-by-side

Showing

with 38 additions and 36 deletions
+38 -36
--- a/public/index.html
+++ b/public/index.html
@@ -18,45 +18,38 @@
      background-size: cover;
      background-position: center;
    }
-    button {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      padding: 15px;
-      font-size: 18px;
-    }
  </style>
  <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>
 </head>
 <body>
  <script>
-    let selectedModel = 'robot';
+    let selectedModel = 'robot'; // Standardauswahl
    let models = {};
    let reticle;
    let currentModel = null;
-    let scene, camera, hitTestSource, renderer;
-    let lastTouchTime = 0;
+    let scene, camera, hitTestSource;
+    let hitTestResults = [];
+    let isSwipe = false;

    async function activateXR() {
      const canvas = document.createElement('canvas');
      document.body.appendChild(canvas);
      const gl = canvas.getContext('webgl', { xrCompatible: true });
-      renderer = new THREE.WebGLRenderer({ alpha: true, canvas, context: gl });
+      const renderer = new THREE.WebGLRenderer({ alpha: true, canvas, context: gl });
      renderer.autoClear = false;

      scene = new THREE.Scene();
      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();
-
-      // Reticle laden
      loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", (gltf) => {
        reticle = gltf.scene;
        reticle.visible = false;
@@ -71,13 +64,15 @@
        models.flower = gltf.scene;
      });

+      // 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 });

-      session.addEventListener('select', placeModel);
+      session.addEventListener('select', onPlaceModel);
+
      session.requestAnimationFrame(onXRFrame);

      function onXRFrame(time, frame) {
@@ -94,7 +89,7 @@
          camera.projectionMatrix.fromArray(view.projectionMatrix);
          camera.updateMatrixWorld(true);

-          const hitTestResults = frame.getHitTestResults(hitTestSource);
+          hitTestResults = frame.getHitTestResults(hitTestSource);
          if (hitTestResults.length > 0) {
            const hitPose = hitTestResults[0].getPose(referenceSpace);
            reticle.visible = true;
@@ -107,50 +102,57 @@
      }
    }

-    // Modell platzieren
-    function placeModel() {
-      if (!reticle || !reticle.visible || !models[selectedModel]) return;
-      const model = models[selectedModel].clone();
-      model.position.copy(reticle.position);
-      scene.add(model);
+    function onPlaceModel() {
+      if (isSwipe) return; // Verhindere Platzieren bei Swipe
+
+      if (reticle && reticle.visible && models[selectedModel]) {
+        const newModel = models[selectedModel].clone();
+        newModel.position.copy(reticle.position);
+        scene.add(newModel);
+      }
    }

-    // Swipe-Gesten erkennen
-    let touchStartX = 0;
-    let touchEndX = 0;
+    // Swipe-Logik
+    let startX = 0, endX = 0;
+    const threshold = 50; // Mindestdistanz für Swipe

    document.body.addEventListener('touchstart', (e) => {
-      touchStartX = e.touches[0].clientX;
+      startX = e.touches[0].clientX;
+      isSwipe = false;
    });

    document.body.addEventListener('touchend', (e) => {
-      touchEndX = e.changedTouches[0].clientX;
-      handleSwipe();
-    });
+      endX = e.changedTouches[0].clientX;
+      const deltaX = endX - startX;

-    function handleSwipe() {
-      const deltaX = touchEndX - touchStartX;
-      if (Math.abs(deltaX) > 50) {
+      if (Math.abs(deltaX) > threshold) {
+        isSwipe = true; // Swipe erkannt
        if (deltaX > 0) {
          switchModel('next');
        } else {
          switchModel('previous');
        }
      }
-    }
+    });

    function switchModel(direction) {
+      if (currentModel) scene.remove(currentModel);
+
      if (direction === 'next') {
        selectedModel = selectedModel === 'robot' ? 'flower' : 'robot';
-      } else {
-        selectedModel = selectedModel === 'flower' ? 'robot' : 'flower';
+      } else if (direction === 'previous') {
+        selectedModel = selectedModel === 'robot' ? 'flower' : 'robot';
      }
-      console.log(`Modell gewechselt zu: ${selectedModel}`);
+
+      currentModel = models[selectedModel].clone();
+      currentModel.position.copy(reticle.position);
+      scene.add(currentModel);
    }

    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();