anshk/builder-research
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
anshk 2026-03-27 19:28:33 +05:30
parent 5d3475ebf0
commit 73034ebf67
3 changed files with 130 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
Week-1/Task-2/vanilla/index.html Normal file
View File

@ -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>

93
Week-1/Task-2/vanilla/main.js Normal file
View File

@ -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);

12
Week-1/Task-2/vanilla/package.json
View File

@ -4,9 +4,15 @@
"version": "0.0.0", "version": "0.0.0",
"packageManager": "yarn@1.22.22", "packageManager": "yarn@1.22.22",
"scripts": { "scripts": {
"dev": "echo 'Add your Three.js dev script here'", "dev": "vite",
"build": "echo 'Add your Three.js build script here'", "build": "vite build",
"lint": "echo 'Add your lint script here'", "lint": "echo 'Add your lint script here'",
"clean": "rm -rf dist build" "clean": "rm -rf dist build"
},
"dependencies": {
"three": "^0.183.2"
},
"devDependencies": {
"vite": "^8.0.3"
} }
} }