diff --git a/Week-1/Task-1/vanilla/index.html b/Week-1/Task-1/vanilla/index.html
index 6010e1f..9758311 100644
--- a/Week-1/Task-1/vanilla/index.html
+++ b/Week-1/Task-1/vanilla/index.html
@@ -3,10 +3,11 @@
- My first three.js app
+ Solar System
diff --git a/Week-1/Task-1/vanilla/main.js b/Week-1/Task-1/vanilla/main.js
index 3d97fe8..398679a 100644
--- a/Week-1/Task-1/vanilla/main.js
+++ b/Week-1/Task-1/vanilla/main.js
@@ -1,25 +1,52 @@
-import * as THREE from 'three';
+import * as THREE from "three"
-const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const scene = new THREE.Scene()
-const renderer = new THREE.WebGLRenderer();
-renderer.setSize(window.innerWidth, window.innerHeight);
-renderer.setAnimationLoop(animate);
-document.body.appendChild(renderer.domElement);
+const camera = new THREE.PerspectiveCamera(
+ 75,
+ window.innerWidth / window.innerHeight,
+ 0.1,
+ 1000
+)
+camera.position.z = 15
-const geometry = new THREE.BoxGeometry(1, 1, 1);
-const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
-const cube = new THREE.Mesh(geometry, material);
-scene.add(cube);
+const renderer = new THREE.WebGLRenderer()
+renderer.setSize(window.innerWidth, window.innerHeight)
+renderer.setClearColor(0xffffff, 1)
+document.body.appendChild(renderer.domElement)
-camera.position.z = 5;
+const light = new THREE.PointLight(0xffffff, 2)
+light.position.set(0, 0, 0)
+scene.add(light)
-function animate(time) {
+// Sun
+const sunGeometry = new THREE.SphereGeometry(2, 32, 32)
+const sunMaterial = new THREE.MeshBasicMaterial({ color: "yellow" })
+const sunMesh = new THREE.Mesh(sunGeometry, sunMaterial)
+scene.add(sunMesh)
- cube.rotation.x = time / 2000;
- cube.rotation.y = time / 1000;
+// Earth Orbit Group (pivot)
+const earthOrbit = new THREE.Group()
+sunMesh.add(earthOrbit)
- renderer.render(scene, camera);
+// Earth
+const earthGeometry = new THREE.SphereGeometry(1, 32, 32)
+const earthMaterial = new THREE.MeshStandardMaterial({ color: "blue" })
+const earthMesh = new THREE.Mesh(earthGeometry, earthMaterial)
-}
\ No newline at end of file
+// distance from sun
+earthMesh.position.x = 5
+
+earthOrbit.add(earthMesh)
+
+// Animation
+function animate() {
+ requestAnimationFrame(animate)
+
+ earthOrbit.rotation.y += 0.01 // orbit
+ earthMesh.rotation.y += 0.05 // spin
+
+ renderer.render(scene, camera)
+}
+
+animate()
\ No newline at end of file