From 396471daa0bf8058edf1755e253a3004ec73f089 Mon Sep 17 00:00:00 2001
From: Esguerra Montana <32esla1mpg@hft-stuttgart.de>
Date: Sun, 16 Jun 2024 17:02:23 +0000
Subject: [PATCH] Update index.html
---
public/index.html | 46 +++++++---------------------------------------
1 file changed, 7 insertions(+), 39 deletions(-)
diff --git a/public/index.html b/public/index.html
index 8f7027a..aced098 100644
--- a/public/index.html
+++ b/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
--
GitLab