Commit 3674c50e authored by Alfakhori's avatar Alfakhori
Browse files

Update public/webXR.html

parent 1c1a7e78
Pipeline #7391 passed with stage
in 8 seconds
Showing with 8 additions and 19 deletions
+8 -19
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 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 --> <!-- three.js -->
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script> <script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
...@@ -21,7 +21,11 @@ async function activateXR() { ...@@ -21,7 +21,11 @@ async function activateXR() {
document.body.appendChild(canvas); document.body.appendChild(canvas);
const gl = canvas.getContext("webgl", {xrCompatible: true}); 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. // The cube will have a different color on each side.
const materials = [ const materials = [
...@@ -53,21 +57,6 @@ renderer.autoClear = false; ...@@ -53,21 +57,6 @@ renderer.autoClear = false;
const camera = new THREE.PerspectiveCamera(); const camera = new THREE.PerspectiveCamera();
camera.matrixAutoUpdate = false; 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". // Initialize a WebXR session using "immersive-ar".
const session = await navigator.xr.requestSession("immersive-ar"); const session = await navigator.xr.requestSession("immersive-ar");
session.updateRenderState({ session.updateRenderState({
...@@ -108,7 +97,7 @@ const onXRFrame = (time, frame) => { ...@@ -108,7 +97,7 @@ const onXRFrame = (time, frame) => {
session.requestAnimationFrame(onXRFrame); session.requestAnimationFrame(onXRFrame);
}
</script>
</body> </body>
</html> </html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment