From 3dbbd87d29ee151fae0040625146bd90389b59e1 Mon Sep 17 00:00:00 2001
From: Rahman <22raya1mpg@hft-stuttgart.de>
Date: Sat, 8 Jun 2024 09:18:39 +0000
Subject: [PATCH] Update index.html
---
public/index.html | 12 +++++++-----
1 file changed, 7 insertions(+), 5 deletions(-)
diff --git a/public/index.html b/public/index.html
index adb468c..c3759eb 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>
-
--
GitLab