Update index.html

public/index.html

@@ -21,8 +21,6 @@ async function activateXR() {
   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,16 +34,9 @@ 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);
-//scene.add(cube);
-
-const scene = new THREE.Scene();
-
-const directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);
-directionalLight.position.set(10, 15, 10);
-scene.add(directionalLight);
-
+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.
 const renderer = new THREE.WebGLRenderer({
@@ -63,17 +54,15 @@ 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.
 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.
@@ -103,7 +92,6 @@ const onXRFrame = (time, frame) => {
 }
 session.requestAnimationFrame(onXRFrame);
 
-
 }
 </script>
 </body>