Update public/index.html

public/index.html

@@ -27,16 +27,17 @@
     let selectedModel = 'flower'; // Standardauswahl
     let models = {};
     let reticle;
+    let scene, camera, renderer, 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 = new THREE.WebGLRenderer({ alpha: true, canvas, context: gl });
       renderer.autoClear = false;
 
-      const scene = new THREE.Scene();
-      const camera = new THREE.PerspectiveCamera();
+      scene = new THREE.Scene();
+      camera = new THREE.PerspectiveCamera();
       camera.matrixAutoUpdate = false;
 
       // Licht hinzufügen
@@ -61,7 +62,7 @@
       });
 
       // AR-Session starten
-      const session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['hit-test'] });
+      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');
@@ -69,8 +70,6 @@
 
       session.requestAnimationFrame(onXRFrame);
 
-     
-
       // AR-Rendering
       function onXRFrame(time, frame) {
         session.requestAnimationFrame(onXRFrame);
@@ -99,6 +98,18 @@
       }
     }
 
+    // Modell platzieren
+    function placeModel() {
+      if (reticle.visible) {
+        const model = models[selectedModel];
+        if (model) {
+          const clonedModel = model.clone();
+          clonedModel.position.set(reticle.position.x, reticle.position.y, reticle.position.z);
+          scene.add(clonedModel);
+        }
+      }
+    }
+
     // AR starten
     if (navigator.xr) {
       const startButton = document.createElement('button');
@@ -109,6 +120,9 @@
         startButton.remove();
         activateXR();
       };
+
+      // Touch- oder Klick-Event, um das Modell zu platzieren
+      document.body.addEventListener('click', placeModel);
     } else {
       alert('WebXR wird nicht unterstützt.');
     }