diff --git a/public/index.html b/public/index.html index 08a1cd299009cfacd8e36349863004a0a288e434..120d5714c2388ad5c962a7c1658ae384362ba4cb 100644 --- a/public/index.html +++ b/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({