University of the People
CS 4406
Computer Graphics
Programming Assignment
Unit 6
Animation with Earth and Moon
Code and Full view Link:
[Link]
[Link]
Output:
Project Description:
This project simulates the Earth-Moon system using [Link], a JavaScript 3D library. The
Earth is modeled as a rotating sphere with realistic texture mapping to represent its surface.
The Moon, also textured, orbits the Earth while rotating on its own axis. A directional light
source from the side simulates sunlight, creating realistic shading and mimicking an eclipse
effect as the Moon passes between the Earth and the light. This animation runs automatically
without user interaction, offering a smooth and educational visualization of basic celestial
motion.
Add in JS Panel Settings:
[Link]
CSS Panel code:
body {
margin: 0;
overflow: hidden;
background-color: black;
html, body, canvas {
width: 100%;
height: 100%;
display: block;
JS Code with Comments:
// === SCENE SETUP ===
const scene = new [Link]();
const camera = new [Link](60, [Link] /
[Link], 0.1, 1000);
[Link](5, 2, 8);
const renderer = new [Link]({ alpha: true });
[Link]([Link], [Link]);
[Link]([Link]);
// === TEXTURE LOADING ===
const textureLoader = new [Link]();
const earthTexture = [Link]('[Link]
thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/300px-
The_Earth_seen_from_Apollo_17.jpg');
const moonTexture = [Link]('[Link]
thumb/e/e1/[Link]/[Link]');
// === MATERIALS & GEOMETRIES ===
const earthMaterial = new [Link]({ map: earthTexture });
const moonMaterial = new [Link]({ map: moonTexture });
const earth = new [Link](new [Link](1, 64, 64), earthMaterial);
[Link](earth);
const moon = new [Link](new [Link](0.27, 64, 64),
moonMaterial);
[Link](2, 0, 0); // Initial position
[Link](moon);
// Group for moon to rotate around Earth
const moonOrbit = new [Link]();
[Link](moon);
[Link](moonOrbit);
// === LIGHTING ===
// Directional light to simulate the Sun (from the right)
const directionalLight = new [Link](0xffffff, 1.2);
[Link](5, 0, 0); // Light from the right side
[Link](directionalLight);
// Dim ambient light for shadowed side
const ambientLight = new [Link](0x202020);
[Link](ambientLight);
// === ANIMATION ===
function animate() {
requestAnimationFrame(animate);
// Earth's own rotation
[Link].y += 0.002;
// Moon's self-rotation
[Link].y += 0.01;
// Moon orbiting around Earth
[Link].y += 0.005;
[Link](scene, camera);
animate();
// === HANDLE WINDOW RESIZE ===
[Link]('resize', () => {
[Link] = [Link] / [Link];
[Link]();
[Link]([Link], [Link]);
});
Project Features
Requirement Implemented
Earth texture Done
Moon texture Done
Earth’s slow rotation Done
Directional light to simulate sunlight Done
Moon rotation + orbit around Earth Done
Eclipse effect (Moon passing between light and Earth) Done
No mouse controls (auto-animation only) Done
Conclusion:
This interactive 3D simulation effectively demonstrates the dynamic relationship between the
Earth and the Moon. By combining texture mapping, animation, and lighting, the project
provides an engaging representation of rotation, revolution, and eclipse behavior in space. It
highlights the power of [Link] for educational visualizations and builds a strong foundation
for further exploration of astronomical and real-time 3D simulations.
References
[Link] Contributors. (2021). [Link] – JavaScript 3D Library. [Link]
Wyman, M. (2019). Learning [Link] – The JavaScript 3D Library for WebGL. Packt
Publishing.