From 73034ebf67b0258403e6aa48e9b5b19773c93af4 Mon Sep 17 00:00:00 2001 From: anshk Date: Fri, 27 Mar 2026 19:28:33 +0530 Subject: [PATCH] feat: added the sun, earth and moon models as parent ,child and grandchild in vanilla. --- Week-1/Task-2/vanilla/index.html | 28 +++++++++ Week-1/Task-2/vanilla/main.js | 93 ++++++++++++++++++++++++++++++ Week-1/Task-2/vanilla/package.json | 12 +++- 3 files changed, 130 insertions(+), 3 deletions(-) create mode 100644 Week-1/Task-2/vanilla/index.html create mode 100644 Week-1/Task-2/vanilla/main.js 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 +}