diff --git a/public/index.html b/public/index.html index c3759eb6001bbf5e639da75d5781392732dc5a35..87f482f596105a6b4a57476c92c49fec62dbb34e 100644 --- a/public/index.html +++ b/public/index.html @@ -8,6 +8,8 @@ <!-- three.js --> <script src="https://unpkg.com/three@0.126.0/build/three.js"></script> + <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script> + </head> <body> @@ -23,6 +25,11 @@ async function activateXR() { const scene = new THREE.Scene(); + const directionalLight = new THREE.DirectionalLight(0xffffff, 0.3); + directionalLight.position.set(10, 15, 10); + scene.add(directionalLight); + + // The cube will have a different color on each side. const materials = [ new THREE.MeshBasicMaterial({color: 0xff0000}), @@ -54,10 +61,7 @@ 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({ - baseLayer: new XRWebGLLayer(session, gl) -}); +const session = await navigator.xr.requestSession("immersive-ar", {requiredFeatures: ['hit-test']}); // A 'local' reference space has a native origin that is located // near the viewer's position at the time the session was created.