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

Feat: added a sun and earth orbiting it in vanilla.

Browse Source
This commit is contained in:
anshk 2026-03-25 17:34:44 +05:30
parent 1e79754534
commit a4044c47a3
2 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Week-1/Task-1/vanilla/index.html
View File

@ -3,10 +3,11 @@
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<title>Solar System</title>
<style>
body {
margin: 0;
background: white;
}
</style>
</head>

59
Week-1/Task-1/vanilla/main.js
View File

@ -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)
// 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()