diff --git a/public/index.html b/public/index.html index 4cbb5876ddefcaa1cb47ff51d766c02910a335c6..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,8 +34,8 @@ 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. @@ -61,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. @@ -90,8 +92,6 @@ const onXRFrame = (time, frame) => { } session.requestAnimationFrame(onXRFrame); - - // To be continued in upcoming steps. } </script> </body>