From 98fe175da8a30c10475acd0ab333b2e01ebf3c79 Mon Sep 17 00:00:00 2001
From: Riegel <22rial1mpg@hft-stuttgart.de>
Date: Sat, 17 Jun 2023 14:59:38 +0000
Subject: [PATCH] Update public/index.html
---
public/index.html | 32 ++++++++++++++++++++++++++++++++
1 file changed, 32 insertions(+)
diff --git a/public/index.html b/public/index.html
index b6ba400..db8a4e4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,7 +22,39 @@ async function activateXR() {
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.
+const materials = [
+ new THREE.MeshBasicMaterial({color: 0xff0000}),
+ new THREE.MeshBasicMaterial({color: 0x0000ff}),
+ new THREE.MeshBasicMaterial({color: 0x00ff00}),
+ new THREE.MeshBasicMaterial({color: 0xff00ff}),
+ new THREE.MeshBasicMaterial({color: 0x00ffff}),
+ new THREE.MeshBasicMaterial({color: 0xffff00})
+];
+
+// 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);
+scene.add(cube);
+// 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;
+
}
+
</script>
</body>
</html>
--
GitLab