diff --git a/public/index.html b/public/index.html
index b5f185fb04a574d3bc297ccef43bbe12091d76e6..559cab087a47f2fed603ba4f9a09f5f685ae9431 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,19 +23,24 @@ async function activateXR() {
 
   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})
-];
+
+
+// Enable shadows in the renderer.
+renderer.shadowMap.enabled = true;
 
 // Create the cube and add it to the demo scene.
-const cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.5, 0.5, 0.5), materials);
+const cubeGeometry = new THREE.BoxBufferGeometry(0.5, 0.5, 0.5);
+const cubeMaterials = [
+  new THREE.MeshLambertMaterial({ color: 0xff0000 }), // Red
+  new THREE.MeshLambertMaterial({ color: 0x0000ff }), // Blue
+  new THREE.MeshLambertMaterial({ color: 0x00ff00 }), // Green
+  new THREE.MeshLambertMaterial({ color: 0xff00ff }), // Magenta
+  new THREE.MeshLambertMaterial({ color: 0x00ffff }), // Cyan
+  new THREE.MeshLambertMaterial({ color: 0xffff00 })  // Yellow
+];
+const cube = new THREE.Mesh(cubeGeometry, cubeMaterials);
 cube.position.set(0, 0, -1);
+cube.castShadow = true; // Enable shadow casting
 scene.add(cube);