From d2d440746a823e12033f1516914956a948b1d15e Mon Sep 17 00:00:00 2001
From: Esguerra Montana <32esla1mpg@hft-stuttgart.de>
Date: Sun, 16 Jun 2024 15:36:44 +0000
Subject: [PATCH] Update index.html
---
public/index.html | 69 ++++++++++++++++++++++++++++++++++++++++-------
1 file changed, 60 insertions(+), 9 deletions(-)
diff --git a/public/index.html b/public/index.html
index 7c82a80..2cca873 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,15 +23,66 @@ async function activateXR() {
const scene = new THREE.Scene();
-// Color of the torus geometry.
-const material = new THREE.MeshToonMaterial({ color: 0xc994c7 });
-
-// Create the torus and add it to the demo scene.
-const torus = new THREE.Mesh( new THREE.TorusKnotGeometry(0.3, 0.2, 32, 6, 2, 3), material);
-//position the next geometry (sphere)
-torus.position.set(0, 0, -1);
-// Add the mesh to the scene
-scene.add( torus );
+// Define the vertices
+ var vertices = new Float32Array([
+ -1.0, 0.0, 1.0, // P0
+ 1.0, 0.0, 1.0, // P1
+ 1.0, 0.0, -1.0, // P2
+ -1.0, 0.0, -1.0, // P3
+ -1.0, 2.0, 1.0, // P4
+ 1.0, 2.0, 1.0, // P5
+ 1.0, 2.0, -1.0, // P6
+ -1.0, 2.0, -1.0, // P7
+ 0.0, 3.0, 0.0 // P8
+ ]);
+
+ // Define the indices for the walls
+ var wallIndices = new Uint16Array([
+ 0, 1, 5, 0, 5, 4, // Front face
+ 1, 2, 6, 1, 6, 5, // Right face
+ 2, 3, 7, 2, 7, 6, // Back face
+ 3, 0, 4, 3, 4, 7, // Left face
+ 4, 5, 6, 4, 6, 7 // Top face
+ ]);
+
+ // Define the indices for the roof
+ var roofIndices = new Uint16Array([
+ 4, 5, 8, // Front roof face
+ 5, 6, 8, // Right roof face
+ 6, 7, 8, // Back roof face
+ 7, 4, 8 // Left roof face
+ ]);
+
+ // Create the wall geometry
+ var wallGeometry = new THREE.BufferGeometry();
+ wallGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+ wallGeometry.setIndex(new THREE.BufferAttribute(wallIndices, 1));
+
+ // Create the roof geometry
+ var roofGeometry = new THREE.BufferGeometry();
+ roofGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+ roofGeometry.setIndex(new THREE.BufferAttribute(roofIndices, 1));
+
+ // Create materials for walls and roof
+ var wallMaterial = new THREE.MeshBasicMaterial({ color: 0x8B4513, side: THREE.DoubleSide });
+ var roofMaterial = new THREE.MeshBasicMaterial({ color: 0xFF0000, side: THREE.DoubleSide });
+
+ // Create the wall and roof meshes
+ var wallMesh = new THREE.Mesh(wallGeometry, wallMaterial);
+ var roofMesh = new THREE.Mesh(roofGeometry, roofMaterial);
+
+ // Add the meshes to the scene
+ scene.add(wallMesh);
+ scene.add(roofMesh);
+
+ // Render the scene
+ function animate() {
+ requestAnimationFrame(animate);
+ wallMesh.rotation.y += 0.01;
+ roofMesh.rotation.y += 0.01;
+ renderer.render(scene, camera);
+ }
+ animate();
// Set up the WebGLRenderer, which handles rendering to the session's base layer.
const renderer = new THREE.WebGLRenderer({
--
GitLab