Update public/webXR.html

public/webXR.html

@@ -4,7 +4,7 @@
   <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>Hello WebXR!</title>
+  <title>Hello WebXR 2.0</title>
 
   <!-- three.js -->
   <script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
@@ -21,7 +21,11 @@ async function activateXR() {
   document.body.appendChild(canvas);
   const gl = canvas.getContext("webgl", {xrCompatible: true});
 
-  const scene = new THREE.Scene();
+  // To be continued in upcoming steps.
+}
+</script>
+
+const scene = new THREE.Scene();
 
 // The cube will have a different color on each side.
 const materials = [
@@ -53,21 +57,6 @@ renderer.autoClear = false;
 const camera = new THREE.PerspectiveCamera();
 camera.matrixAutoUpdate = false;
 
-// Set up the WebGLRenderer, which handles rendering to the session's base layer.
-const renderer = new THREE.WebGLRenderer({
-  alpha: true,
-  preserveDrawingBuffer: true,
-  canvas: canvas,
-  context: gl
-});
-renderer.autoClear = false;
-
-// The API directly updates the camera matrices.
-// Disable matrix auto updates so three.js doesn't attempt
-// 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({
@@ -108,7 +97,7 @@ const onXRFrame = (time, frame) => {
 session.requestAnimationFrame(onXRFrame);
 
 
-}
-</script>
+
+
 </body>
 </html>