From af6859ecfe246f1c8fb5ec3c4cb428b63e5e5869 Mon Sep 17 00:00:00 2001
From: Thapa <luxthapa6363@gmail.com>
Date: Tue, 20 Jun 2023 15:16:40 +0000
Subject: [PATCH] Update 1-Cube.html
---
public/1-Cube.html | 43 ++++++++++++++++++++-----------------------
1 file changed, 20 insertions(+), 23 deletions(-)
diff --git a/public/1-Cube.html b/public/1-Cube.html
index 9bdec17..b901b36 100644
--- a/public/1-Cube.html
+++ b/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({
- alpha: true,
- preserveDrawingBuffer: true,
- canvas: canvas,
- context: gl
-});
-renderer.autoClear = false;
+// 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;
// The API directly updates the camera matrices.
// Disable matrix auto updates so three.js doesn't attempt
--
GitLab