feat: added the sun, earth and moon models as parent ,child and grandchild in vanilla.

2026-03-27 19:28:33 +05:30 · 2026-03-27 19:28:33 +05:30 · 73034ebf67
commit 73034ebf67
parent 5d3475ebf0
3 changed files with 130 additions and 3 deletions
--- a/Week-1/Task-2/vanilla/index.html
+++ b/Week-1/Task-2/vanilla/index.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Solar System</title>
+    <style>
+        html,
+        body {
+            margin: 0;
+            background: white;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>    <script type="module" src="/main.js"></script>
+</body>
+
+</html>
--- a/Week-1/Task-2/vanilla/main.js
+++ b/Week-1/Task-2/vanilla/main.js
@ -0,0 +1,93 @@
+import * as THREE from 'three';
+
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+document.body.appendChild(renderer.domElement);
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x000000);
+
+const camera = new THREE.PerspectiveCamera(60, 2, 0.1, 100);
+camera.position.set(0, 0, 22);
+camera.lookAt(0, 0, 0);
+
+const ambientLight = new THREE.AmbientLight(0xffffff, 0.18);
+scene.add(ambientLight);
+
+const sunlight = new THREE.PointLight(0xffffff, 350, 300);
+scene.add(sunlight);
+
+const solarSystem = new THREE.Object3D();
+scene.add(solarSystem);
+
+const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
+
+const sunMaterial = new THREE.MeshStandardMaterial({
+	color: 0xffcc55,
+	emissive: 0xffaa00,
+	emissiveIntensity: 1.2,
+});
+const sun = new THREE.Mesh(sphereGeometry, sunMaterial);
+sun.scale.set(2.4, 2.4, 2.4);
+solarSystem.add(sun);
+
+const earthOrbit = new THREE.Object3D();
+earthOrbit.position.set(0, 0, 0);
+sun.add(earthOrbit);
+
+const earthMaterial = new THREE.MeshStandardMaterial({
+	color: 0x2a66ff,
+	roughness: 0.9,
+	metalness: 0.05,
+});
+const earth = new THREE.Mesh(sphereGeometry, earthMaterial);
+earth.scale.set(0.65, 0.65, 0.65);
+earth.position.x = 8;
+earthOrbit.add(earth);
+
+const moonOrbit = new THREE.Object3D();
+moonOrbit.position.set(0, 0, 0);
+earth.add(moonOrbit);
+
+const moonMaterial = new THREE.MeshStandardMaterial({
+	color: 0xbbbbbb,
+	roughness: 1,
+	metalness: 0,
+});
+const moon = new THREE.Mesh(sphereGeometry, moonMaterial);
+moon.scale.set(0.28, 0.28, 0.28);
+moon.position.x = 2.2;
+moonOrbit.add(moon);
+
+const EARTH_SPIN_SPEED = 2.1;
+
+let previousTime = 0;
+
+function resizeRendererToDisplaySize() {
+	const width = window.innerWidth;
+	const height = window.innerHeight;
+	const needResize = renderer.domElement.width !== width || renderer.domElement.height !== height;
+	if (needResize) {
+		renderer.setSize(width, height, false);
+		camera.aspect = width / height;
+		camera.updateProjectionMatrix();
+	}
+}
+
+function render(time) {
+	const seconds = time * 0.001;
+	const delta = seconds - previousTime;
+	previousTime = seconds;
+
+	resizeRendererToDisplaySize();
+
+	sun.rotation.y = seconds * 0.3;
+	earthOrbit.rotation.y = seconds * 0.9;
+	earth.rotation.y += delta * EARTH_SPIN_SPEED;
+	moonOrbit.rotation.y = seconds * 2.2;
+
+	renderer.render(scene, camera);
+	requestAnimationFrame(render);
+}
+
+requestAnimationFrame(render);
--- a/Week-1/Task-2/vanilla/package.json
+++ b/Week-1/Task-2/vanilla/package.json
@ -4,9 +4,15 @@
  "version": "0.0.0",
  "packageManager": "yarn@1.22.22",
  "scripts": {
-    "dev": "echo 'Add your Three.js dev script here'",
-    "build": "echo 'Add your Three.js build script here'",
+    "dev": "vite",
+    "build": "vite build",
    "lint": "echo 'Add your lint script here'",
    "clean": "rm -rf dist build"
+  },
+  "dependencies": {
+    "three": "^0.183.2"
+  },
+  "devDependencies": {
+    "vite": "^8.0.3"
  }
 }