Update index.html

public/index.html

@@ -13,7 +13,7 @@
 
 <!-- Starting an immersive WebXR session requires user interaction.
     We start this one with a simple button. -->
-<button onclick="activateXR()">Start HOuse</button>
+<button onclick="activateXR()">Start Torus</button>
 <script>
 async function activateXR() {
   // Add a canvas element and initialize a WebGL context that is compatible with WebXR.
@@ -23,66 +23,15 @@ async function activateXR() {
 
   const scene = new THREE.Scene();
 
-// Define the vertices
- const 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
-        const 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
-        const 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
-        const wallGeometry = new THREE.BufferGeometry();
-          wallGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
-          wallGeometry.setIndex(new THREE.BufferAttribute(wallIndices, 1));
-
-        // Create the roof geometry
-        const 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
-        const wallMaterial = new THREE.MeshBasicMaterial({ color: 0x8B4513, side: THREE.DoubleSide });
-        const roofMaterial = new THREE.MeshBasicMaterial({ color: 0xFF0000, side: THREE.DoubleSide });
-
-        // Create the wall and roof meshes
-        const wallMesh = new THREE.Mesh(wallGeometry, wallMaterial);
-        const 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();
+// 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.PolyhedronBufferGeometry(6, 2, 3), material);
+//position the next geometry (sphere)
+torus.position.set(0, 0, -1);
+// Add the mesh to the scene
+scene.add( torus );
 
 // Set up the WebGLRenderer, which handles rendering to the session's base layer.
 const renderer = new THREE.WebGLRenderer({