diff --git a/public/webXR.html b/public/webXR.html index 210631383299c18d6c5e3df6ec7cfc65c9bbfba9..0bd50b36adc5d078a4ca29878321da8a82b4e254 100644 --- a/public/webXR.html +++ b/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>