Update index.html

e6f1350f · Acosta Vega · c72b45dc · e6f1350f
Commit e6f1350f authored Jun 19, 2024 by Acosta Vega
--- a/public/index.html
+++ b/public/index.html
-<!doctype html>
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
  <meta charset="UTF-8">
-  <meta name="viewport"
-        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-
-<title>Pyramid Demo</title>
-
-<!-- three.js -->
-
-<!-- Starting an immersive WebXR session requires user interaction.
-We start this one with a simple button. -->
-<button>Start Pyramid Demo</button>
-
-async function activateXR() {
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pyramid Demo</title>
+  <!-- Include Three.js library -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+</head>
+<body>
+  <!-- Button to start the AR demo -->
+  <button onclick="activateXR()">Start Pyramid Demo</button>
+  <script>
+    async function activateXR() {
+      try {
        // Add a canvas element and initialize a WebGL context that is compatible with WebXR.
        const canvas = document.createElement("canvas");
        document.body.appendChild(canvas);
@@ -32,7 +31,7 @@ async function activateXR() {
        ];
        
        // Create the pyramid and add it to the demo scene.
-  const pyramid = new THREE.Mesh(new THREE.ConeBufferGeometry(0.5, 1, 4), materials);
+        const pyramid = new THREE.Mesh(new THREE.ConeGeometry(0.5, 1, 4), materials);
        pyramid.position.set(0, 0, -1);
        scene.add(pyramid);
        
@@ -67,7 +66,7 @@ async function activateXR() {
          session.requestAnimationFrame(onXRFrame);
          
          // Bind the graphics framebuffer to the baseLayer's framebuffer
-    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer)
+          gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
          
          // Retrieve the pose of the device.
          // XRFrame.getViewerPose can return null while the session attempts to establish tracking.
@@ -77,20 +76,22 @@ async function activateXR() {
            const view = pose.views[0];
            
            const viewport = session.renderState.baseLayer.getViewport(view);
-      renderer.setSize(viewport.width, viewport.height)
+            renderer.setSize(viewport.width, viewport.height);
            
            // Use the view's transform matrix and projection matrix to configure the THREE.camera.
-      camera.matrix.fromArray(view.transform.matrix)
+            camera.matrix.fromArray(view.transform.matrix);
            camera.projectionMatrix.fromArray(view.projectionMatrix);
            camera.updateMatrixWorld(true);
            
            // Render the scene with THREE.WebGLRenderer.
-      renderer.render(scene, camera)
-    }
+            renderer.render(scene, camera);
          }
+        };
        session.requestAnimationFrame(onXRFrame);
-  
-}
-</script>
+      } catch (error) {
+        console.error("Failed to start XR session:", error);
+      }
+    }
+  </script>
 </body>
-
+</html>