Update index.html

public/index.html

@@ -15,93 +15,97 @@
 <button onclick="activateXR()">Start Hit to Place Demo</button>
 <script>
 async function activateXR() {
-  const canvas = document.createElement("canvas");
-  document.body.appendChild(canvas);
-  const gl = canvas.getContext("webgl", {xrCompatible: true});
-
-  const scene = new THREE.Scene();
-
-  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
-  directionalLight.position.set(10, 15, 10);
-  scene.add(directionalLight);
-
-  const renderer = new THREE.WebGLRenderer({
-    alpha: true,
-    preserveDrawingBuffer: true,
-    canvas: canvas,
-    context: gl
-  });
-  renderer.autoClear = false;
-
-  const camera = new THREE.PerspectiveCamera();
-  camera.matrixAutoUpdate = false;
-
-  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');
-  const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
-
-  const loader = new THREE.GLTFLoader();
-  let reticle;
-  loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", function(gltf) {
-    reticle = gltf.scene;
-    reticle.visible = false;
-    scene.add(reticle);
-    console.log("Reticle loaded successfully");
-  }, undefined, function(error) {
-    console.error("Error loading reticle:", error);
-  });
-
-  let model;
-  loader.load("https://transfer.hft-stuttgart.de/pages/32esla1mpg/webarTTP/media/sunflower.gltf", function(gltf) {
-    model = gltf.scene;
-    console.log("Model loaded successfully");
-  }, undefined, function(error) {
-    console.error("Error loading model:", error);
-  });
-
-  session.addEventListener("select", (event) => {
-    if (model && reticle.visible) {
-      const clone = model.clone();
-      clone.position.copy(reticle.position);
-      scene.add(clone);
-      console.log("Model placed in scene");
-    }
-  });
-
-  const 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);
-
-      const hitTestResults = frame.getHitTestResults(hitTestSource);
-      if (hitTestResults.length > 0 && reticle) {
-        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);
-      } else if (reticle) {
-        reticle.visible = false;
+  try {
+    const canvas = document.createElement("canvas");
+    document.body.appendChild(canvas);
+    const gl = canvas.getContext("webgl", {xrCompatible: true});
+
+    const scene = new THREE.Scene();
+
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
+    directionalLight.position.set(10, 15, 10);
+    scene.add(directionalLight);
+
+    const renderer = new THREE.WebGLRenderer({
+      alpha: true,
+      preserveDrawingBuffer: true,
+      canvas: canvas,
+      context: gl
+    });
+    renderer.autoClear = false;
+
+    const camera = new THREE.PerspectiveCamera();
+    camera.matrixAutoUpdate = false;
+
+    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');
+    const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
+
+    const loader = new THREE.GLTFLoader();
+    let reticle;
+    loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", function(gltf) {
+      reticle = gltf.scene;
+      reticle.visible = false;
+      scene.add(reticle);
+      console.log("Reticle loaded successfully");
+    }, undefined, function(error) {
+      console.error("Error loading reticle:", error);
+    });
+
+    let model;
+    loader.load("https://transfer.hft-stuttgart.de/pages/32esla1mpg/webarTTP/media/sunflower.gltf", function(gltf) {
+      model = gltf.scene;
+      console.log("Model loaded successfully");
+    }, undefined, function(error) {
+      console.error("Error loading model:", error);
+    });
+
+    session.addEventListener("select", (event) => {
+      if (model && reticle.visible) {
+        const clone = model.clone();
+        clone.position.copy(reticle.position);
+        scene.add(clone);
+        console.log("Model placed in scene");
       }
-
-      renderer.render(scene, camera);
-    }
-  };
-  session.requestAnimationFrame(onXRFrame);
+    });
+
+    const 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);
+
+        const hitTestResults = frame.getHitTestResults(hitTestSource);
+        if (hitTestResults.length > 0 && reticle) {
+          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);
+        } else if (reticle) {
+          reticle.visible = false;
+        }
+
+        renderer.render(scene, camera);
+      }
+    };
+    session.requestAnimationFrame(onXRFrame);
+  } catch (error) {
+    console.error("Error in activateXR:", error);
+  }
 }
 </script>
 </body>