From 9435d166d49edd58b9936d00c773f190472ae737 Mon Sep 17 00:00:00 2001
From: Esguerra Montana <32esla1mpg@hft-stuttgart.de>
Date: Sun, 16 Jun 2024 16:54:02 +0000
Subject: [PATCH] Update index.html
---
public/index.html | 29 ++++++++++++++++++++++++++---
1 file changed, 26 insertions(+), 3 deletions(-)
diff --git a/public/index.html b/public/index.html
index f096dec..7528310 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
--
GitLab