Update 1-Cube.html

public/1-Cube.html

@@ -23,29 +23,26 @@ async function activateXR() {
 
   const scene = new THREE.Scene();
 
-// The cube will have a different color on each side.
-const materials = [
-  new THREE.MeshBasicMaterial({color: 0x744700}),
-  new THREE.MeshBasicMaterial({color: 0x744700}),
-  new THREE.MeshBasicMaterial({color: 0x744700}),
-  new THREE.MeshBasicMaterial({color: 0x744700}),
-  new THREE.MeshBasicMaterial({color: 0x744700}),
-  new THREE.MeshBasicMaterial({color: 0x744700})
-];
-
-// Create the cube and add it to the demo scene.
-const cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.5, 0.5, 0.5), materials);
-cube.position.set(0, 0, -1);
-scene.add(cube);
-
-// Set up the WebGLRenderer, which handles rendering to the session's base layer.
-const renderer = new THREE.WebGLRenderer({
+// Load the texture for the Earth globe.
+  const textureLoader = new THREE.TextureLoader();
+  const texture = textureLoader.load('earth_texture.jpg');
+
+  // Create the Earth sphere and add it to the demo scene.
+  const sphere = new THREE.Mesh(
+    new THREE.SphereBufferGeometry(0.5, 64, 64),  // Adjust the radius as needed.
+    new THREE.MeshBasicMaterial({ map: texture }) // Apply the Earth texture to the sphere.
+  );
+  sphere.position.set(0, 0, -1);
+  scene.add(sphere);
+
+  // Set up the WebGLRenderer, which handles rendering to the session's base layer.
+  const renderer = new THREE.WebGLRenderer({
     alpha: true,
     preserveDrawingBuffer: true,
     canvas: canvas,
     context: gl
-});
-renderer.autoClear = false;
+  });
+  renderer.autoClear = false;
 
 // The API directly updates the camera matrices.
 // Disable matrix auto updates so three.js doesn't attempt