diff --git a/Week-1/Task-2/vanilla/index.html b/Week-1/Task-2/vanilla/index.html
new file mode 100644
index 0000000..da84793
--- /dev/null
+++ b/Week-1/Task-2/vanilla/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ Solar System
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Week-1/Task-2/vanilla/main.js b/Week-1/Task-2/vanilla/main.js
new file mode 100644
index 0000000..237b61d
--- /dev/null
+++ 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);
diff --git a/Week-1/Task-2/vanilla/package.json b/Week-1/Task-2/vanilla/package.json
index a98d91a..1312ec4 100644
--- 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"
}
-}
\ No newline at end of file
+}