feat: added texture switcher for task 2 in vanilla

2026-04-02 19:15:57 +05:30 · 2026-04-02 19:15:57 +05:30 · 5b88f5c625
commit 5b88f5c625
parent ea2edd0ac9
2 changed files with 85 additions and 4 deletions
--- a/Week-2/Task-2/vanilla/index.html
+++ b/Week-2/Task-2/vanilla/index.html
@ -1,11 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Task 2 - Texture / Surface Variant Switcher</title>
+  <meta charset="UTF-8" />
+  <title>Task 2 — Texture / Surface Variant Switcher</title>
 </head>
 <body>
-    <script type="module" src="main.js"></script>
+
+  <div id="controls">
+    <button data-variant="earth" class="active">Earth</button>
+    <button data-variant="moon">Moon</button>
+    <button data-variant="sun">Sun</button>
+  </div>
+
+  <script type="module" src="./main.js"></script>
 </body>
 </html>
--- a/Week-2/Task-2/vanilla/main.js
+++ b/Week-2/Task-2/vanilla/main.js
@ -0,0 +1,75 @@
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color("white");
+
+const camera = new THREE.PerspectiveCamera(
+  75,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  1000
+);
+camera.position.z = 5;
+
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+const geometry = new THREE.SphereGeometry(1.5, 100, 100);
+
+const loader = new THREE.TextureLoader();
+
+const textures = {
+  earth: loader.load('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZVsp7bSmsdGhM1GouOYgZ6l06Za__Z1ZY8A&s'),
+  moon: loader.load('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROh1go667NHsMdzLyvI-0tt9Mn0eugRp0xhQ&s'),
+  sun: loader.load('https://upload.wikimedia.org/wikipedia/commons/a/a4/Solarsystemscope_texture_8k_sun.jpg')
+};
+
+const material = new THREE.MeshStandardMaterial({
+  map: textures.earth,
+  roughness: 0.6
+});
+const mesh = new THREE.Mesh(geometry, material);
+scene.add(mesh);
+
+const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+scene.add(ambientLight);
+
+const pointLight = new THREE.PointLight(0xffffff, 1);
+pointLight.position.set(5, 5, 5);
+scene.add(pointLight);
+
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+
+const buttons = document.querySelectorAll("button");
+
+buttons.forEach((btn) => {
+  btn.addEventListener("click", () => {
+    const variant = btn.getAttribute("data-variant");
+
+    mesh.material.map = textures[variant];
+    mesh.material.needsUpdate = true;
+
+    buttons.forEach((b) => b.classList.remove("active"));
+    btn.classList.add("active");
+  });
+});
+
+function animate() {
+  requestAnimationFrame(animate);
+
+  controls.update();
+
+  mesh.rotation.y += 0.01;
+
+  renderer.render(scene, camera);
+}
+animate();
+
+window.addEventListener("resize", () => {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+});