diff --git a/public/index.html b/public/index.html index adb468c99aa586e6f5ef40d051b3f6bd3329c21f..c3759eb6001bbf5e639da75d5781392732dc5a35 100644 --- a/public/index.html +++ b/public/index.html @@ -20,7 +20,8 @@ async function activateXR() { const canvas = document.createElement("canvas"); document.body.appendChild(canvas); const gl = canvas.getContext("webgl", {xrCompatible: true}); -const scene = new THREE.Scene(); + + const scene = new THREE.Scene(); // The cube will have a different color on each side. const materials = [ @@ -33,9 +34,10 @@ 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. const renderer = new THREE.WebGLRenderer({ alpha: true, @@ -50,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({ @@ -59,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. @@ -88,9 +92,7 @@ const onXRFrame = (time, frame) => { } session.requestAnimationFrame(onXRFrame); - // To be continued in upcoming steps. } </script> </body> </html> -