From a4044c47a3e0a66f8a2e4f071b3ecbc50a1ec101 Mon Sep 17 00:00:00 2001 From: anshk Date: Wed, 25 Mar 2026 17:34:44 +0530 Subject: [PATCH] Feat: added a sun and earth orbiting it in vanilla. --- Week-1/Task-1/vanilla/index.html | 3 +- Week-1/Task-1/vanilla/main.js | 61 +++++++++++++++++++++++--------- 2 files changed, 46 insertions(+), 18 deletions(-) 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