Update index.html

61d4dc90 · Esguerra Montana · 15c4933a · 61d4dc90
Commit 61d4dc90 authored Jun 09, 2024 by Esguerra Montana
--- a/public/index.html
+++ b/public/index.html
@@ -8,8 +8,6 @@

  <!-- three.js -->
  <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>

@@ -23,12 +21,10 @@ async function activateXR() {
  document.body.appendChild(canvas);
  const gl = canvas.getContext("webgl", {xrCompatible: true});

-  const scene = new THREE.Scene();
-
-  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);
-  directionalLight.position.set(10, 15, 10);
-  scene.add(directionalLight);
+  // To be continued in upcoming steps.
+}

+const scene = new THREE.Scene();

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

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

 // Set up the WebGLRenderer, which handles rendering to the session's base layer.
@@ -61,7 +57,10 @@ const camera = new THREE.PerspectiveCamera();
 camera.matrixAutoUpdate = false;

 // Initialize a WebXR session using "immersive-ar".
-const session = await navigator.xr.requestSession("immersive-ar", {requiredFeatures: ['hit-test']});
+const session = await navigator.xr.requestSession("immersive-ar");
+session.updateRenderState({
+  baseLayer: new XRWebGLLayer(session, gl)
+});

 // A 'local' reference space has a native origin that is located
 // near the viewer's position at the time the session was created.
@@ -96,7 +95,7 @@ const onXRFrame = (time, frame) => {
 }
 session.requestAnimationFrame(onXRFrame);

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