From 018b413d750959da56f5bcb74c89667efb855a6c Mon Sep 17 00:00:00 2001
From: Rafiei <32rafa1mpg@hft-stuttgart.de>
Date: Mon, 17 Jun 2024 19:41:22 +0000
Subject: [PATCH] Update index.html
---
public/index.html | 22 ++++++++++------------
1 file changed, 10 insertions(+), 12 deletions(-)
diff --git a/public/index.html b/public/index.html
index 63d559a..c3759eb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,26 +3,24 @@
<head>
<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">
+ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Cube Demo</title>
<!-- three.js -->
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
</head>
-
<body>
- <!-- Starting an immersive WebXR session requires user interaction.
+<!-- Starting an immersive WebXR session requires user interaction.
We start this one with a simple button. -->
- <button onclick="activateXR()">Start Cube Demo</button>
- <script>
- async function activateXR() {
+<button onclick="activateXR()">Start Cube Demo</button>
+<script>
+async function activateXR() {
// Add a canvas element and initialize a WebGL context that is compatible with WebXR.
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
const gl = canvas.getContext("webgl", {xrCompatible: true});
- // To be continued in upcoming steps.
const scene = new THREE.Scene();
// The cube will have a different color on each side.
@@ -36,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.
@@ -54,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({
@@ -63,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.
@@ -92,9 +92,7 @@ const onXRFrame = (time, frame) => {
}
session.requestAnimationFrame(onXRFrame);
-
}
- </script>
+</script>
</body>
-
</html>
--
GitLab