Update index.html

public/index.html

@@ -23,11 +23,18 @@ async function activateXR() {
 
   const scene = new THREE.Scene();
 
-  // Add lighting to the scene
+  // Add lighting to the tetrahedro scene
+  //const light = new THREE.DirectionalLight(0xffffff, 1);
+  //light.position.set(1, 1, 1).normalize();
+  //scene.add(light);
+
+   // Add lighting to the house scene
   const light = new THREE.DirectionalLight(0xffffff, 1);
-  light.position.set(1, 1, 1).normalize();
+  light.position.set(5, 10, 7.5);
+  light.castShadow = true; // Enable shadow casting
   scene.add(light);
 
+
   const ambientLight = new THREE.AmbientLight(0x404040); // soft white light
   scene.add(ambientLight);
 
@@ -104,6 +111,12 @@ async function activateXR() {
   var wallMesh = new THREE.Mesh(wallGeometry, wallMaterial);
   var roofMesh = new THREE.Mesh(roofGeometry, roofMaterial);
 
+  // Enable shadows for the house meshes
+  wallMesh.castShadow = true;
+  wallMesh.receiveShadow = true;
+  roofMesh.castShadow = true;
+  roofMesh.receiveShadow = true;
+
   // Position the house
   wallMesh.position.set(0, -1.5, -3);
   roofMesh.position.set(0, -1.5, -3);
@@ -112,7 +125,14 @@ async function activateXR() {
   scene.add(wallMesh);
   scene.add(roofMesh);
 
-
+  // Add a ground plane to receive shadows
+  const groundGeometry = new THREE.PlaneGeometry(10, 10);
+  const groundMaterial = new THREE.ShadowMaterial({ opacity: 0.5 });
+  const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
+  groundMesh.rotation.x = -Math.PI / 2; // Rotate to lie flat
+  groundMesh.position.y = -1; // Position it below the house
+  groundMesh.receiveShadow = true;
+  scene.add(groundMesh);
 
   // Set up the WebGLRenderer, which handles rendering to the session's base layer.
   const renderer = new THREE.WebGLRenderer({
@@ -122,6 +142,9 @@ async function activateXR() {
     context: gl
   });
   renderer.autoClear = false;
+  renderer.shadowMap.enabled = true; 
+  renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
+
 
   // The API directly updates the camera matrices.
   // Disable matrix auto updates so three.js doesn't attempt