diff --git a/public/index.html b/public/index.html index f096dec05edc3cb69233bb01a6b3a2f3ac946cdb..75283108a7b6a8bda432bb131a92e9ef153f3af9 100644 --- a/public/index.html +++ b/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