diff --git a/public/index.html b/public/index.html index 503579d987bc234bdfbf2a5d8a596d6fac1cf26a..9051aee82b2933609f5c9404b3bb77ff91faeecb 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,6 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> @@ -7,6 +8,7 @@ <!-- Include Three.js library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> </head> + <body> <!-- Button to start the AR demo --> <button onclick="activateXR()">Start Pyramid Demo</button> @@ -22,12 +24,12 @@ // The pyramid will have a different color on each side. const materials = [ - new THREE.MeshBasicMaterial({color: 0xff0000}), - new THREE.MeshBasicMaterial({color: 0x0000ff}), - new THREE.MeshBasicMaterial({color: 0x00ff00}), - new THREE.MeshBasicMaterial({color: 0xff00ff}), - new THREE.MeshBasicMaterial({color: 0x00ffff}), - new THREE.MeshBasicMaterial({color: 0xffff00}) + new THREE.MeshBasicMaterial({color: 0xff0000}), // Red + new THREE.MeshBasicMaterial({color: 0x00ff00}), // Green + new THREE.MeshBasicMaterial({color: 0x0000ff}), // Blue + new THREE.MeshBasicMaterial({color: 0xffff00}), // Yellow + new THREE.MeshBasicMaterial({color: 0xff00ff}), // Magenta + new THREE.MeshBasicMaterial({color: 0x00ffff}) // Cyan ]; // Create the pyramid and add it to the demo scene. @@ -94,4 +96,5 @@ } </script> </body> + </html>