diff --git a/public/index.html b/public/index.html
index 40272b64d520f88cd056ee074e34c06db09cef25..a5b0fd78ffd5c7b7b142f552871b269e4dfb5621 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,12 +25,12 @@ async function activateXR() {
 
 // The cube will have a different color on each side.
 const materials = [
-  new THREE.MeshNormalMaterial({color: 0xff0000}),
-  new THREE.MeshNormalMaterial({color: 0x0000ff}),
-  new THREE.MeshNormalMaterial({color: 0x00ff00}),
-  new THREE.MeshNormalMaterial({color: 0xff00ff}),
-  new THREE.MeshNormalMaterial({color: 0x00ffff}),
-  new THREE.MeshNormalMaterial({color: 0xffff00})
+  new THREE.MeshPhongMaterial({color: 0x000000}),
+  new THREE.MeshPhongMaterial({color: 0x0000ff}),
+  new THREE.MeshPhongMaterial({color: 0x00ff00}),
+  new THREE.MeshPhongMaterial({color: 0xff00ff}),
+  new THREE.MeshPhongMaterial({color: 0xffffff}),
+  new THREE.MeshPhongMaterial({color: 0xffff00})
 ];
 
 // Create the cube and add it to the demo scene.