Update index.html

018b413d · Rafiei · a44edc4a · 018b413d
Commit 018b413d authored Jun 17, 2024 by Rafiei
--- a/public/index.html
+++ b/public/index.html
@@ -9,20 +9,18 @@
  <!-- three.js -->
  <script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
 </head>
-
 <body>

-  <!-- Starting an immersive WebXR session requires user interaction.
+<!-- Starting an immersive WebXR session requires user interaction.
    We start this one with a simple button. -->
-  <button onclick="activateXR()">Start Cube Demo</button>
-  <script>
-    async function activateXR() {
+<button onclick="activateXR()">Start Cube Demo</button>
+<script>
+async function activateXR() {
  // Add a canvas element and initialize a WebGL context that is compatible with WebXR.
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  const gl = canvas.getContext("webgl", {xrCompatible: true});

-  // To be continued in upcoming steps.
  const scene = new THREE.Scene();

 // The cube will have a different color on each side.
@@ -36,8 +34,8 @@ const materials = [
 ];

 // Create the cube and add it to the demo scene.
-const cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.2, 0.2, 0.2), materials);
-cube.position.set(1, 1, 1);
+const cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.5, 0.5, 0.5), materials);
+cube.position.set(0, 0, -1);
 scene.add(cube);

 // Set up the WebGLRenderer, which handles rendering to the session's base layer.
@@ -54,6 +52,7 @@ renderer.autoClear = false;
 // to handle the matrices independently.
 const camera = new THREE.PerspectiveCamera();
 camera.matrixAutoUpdate = false;
+
 // Initialize a WebXR session using "immersive-ar".
 const session = await navigator.xr.requestSession("immersive-ar");
 session.updateRenderState({
@@ -63,6 +62,7 @@ session.updateRenderState({
 // A 'local' reference space has a native origin that is located
 // near the viewer's position at the time the session was created.
 const referenceSpace = await session.requestReferenceSpace('local');
+
 // Create a render loop that allows us to draw on the AR view.
 const onXRFrame = (time, frame) => {
  // Queue up the next draw request.
@@ -92,9 +92,7 @@ const onXRFrame = (time, frame) => {
 }
 session.requestAnimationFrame(onXRFrame);

-
 }
-  </script>
+</script>
 </body>
-
 </html>