Update index.html

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({