Update index.html

public/index.html

@@ -23,18 +23,16 @@ async function activateXR() {
 
   const scene = new THREE.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 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(5, 10, 7.5);
-  light.castShadow = true; // Enable shadow casting
+  light.position.set(1, 1, 1).normalize();
   scene.add(light);
 
-
   const ambientLight = new THREE.AmbientLight(0x404040); // soft white light
   scene.add(ambientLight);
 
@@ -91,32 +89,14 @@ async function activateXR() {
   roofGeometry.setIndex(new THREE.BufferAttribute(roofIndices, 1));
 
   // Create materials for walls and roof
-  var wallMaterial = new THREE.MeshPhysicalMaterial({
-    color: 0x8B4513,
-    metalness: 0.7, // Make it metallic
-    roughness: 0.4, // Adjust for shininess
-    clearcoat: 0.3, // Add clear coat for a polished effect
-    clearcoatRoughness: 0.1
-  });
+  var wallMaterial = new THREE.MeshBasicMaterial({ color: 0x8B4513, side: THREE.DoubleSide });
+  var roofMaterial = new THREE.MeshBasicMaterial({ color: 0xFF0000, side: THREE.DoubleSide });
 
-  var roofMaterial = new THREE.MeshPhysicalMaterial({
-    color: 0xFF0000,
-    metalness: 0.9, // Make it more metallic
-    roughness: 0.2, // Adjust for more shininess
-    clearcoat: 0.3,
-    clearcoatRoughness: 0.1
-  });
 
   // Create the wall and roof meshes
   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);
@@ -125,15 +105,6 @@ 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({
     alpha: true,
@@ -142,9 +113,6 @@ 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