diff --git a/public/index.html b/public/index.html
index 7d2fe4b28b2bfbf86d4294d9feb99308b06efb0f..569b771d61eaaf544104664ce7ccdaa5aa9a5347 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,6 +22,23 @@ 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);
+
 }
 </script>
 </body>