Update index.html

public/index.html

@@ -32,16 +32,74 @@ async function activateXR() {
   scene.add(ambientLight);
 
   // Color of the tetrahedron geometry.
-  const material = new THREE.MeshPhysicalMaterial({ color: 0xC70039, roughness: 0.5, metalness: 0.5, clearcoat: 1.0, clearcoatRoughness: 0.1 });
+  //const material = new THREE.MeshPhysicalMaterial({ color: 0xC70039, roughness: 0.5, metalness: 0.5, clearcoat: 1.0, clearcoatRoughness: 0.1 });
 
   // Create the tetrahedron and add it to the demo scene.
-  const tetrahedron = new THREE.Mesh(new THREE.TetrahedronGeometry(0.5), material);
+  //const tetrahedron = new THREE.Mesh(new THREE.TetrahedronGeometry(0.5), material);
   
   // Position the tetrahedron
-  tetrahedron.position.set(0, 0, -1);
+  //tetrahedron.position.set(0, 0, -1);
 
   // Add the mesh to the scene
-  scene.add(tetrahedron);
+  //scene.add(tetrahedron);
+
+// 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);
+
+  // Position the house
+  wallMesh.position.set(0, 0, -3);
+  roofMesh.position.set(0, 0, -3);
+
+  // Add the meshes to the scene
+  scene.add(wallMesh);
+  scene.add(roofMesh);
+
+
 
   // Set up the WebGLRenderer, which handles rendering to the session's base layer.
   const renderer = new THREE.WebGLRenderer({