diff --git a/public/index.html b/public/index.html index fd53d251d82c9340b0c1808322bc804a11f33089..3dbea5c00a5a5a9c6b5e1d179c6eaaf706101b05 100644 --- a/public/index.html +++ b/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({