Scribd
Upload
23 views4 pages

Programming Assignment Unit 6

Uploaded by

ppszp8142
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views4 pages

Programming Assignment Unit 6

Uploaded by

ppszp8142
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Programming Assignment Unit 6

>>>Earth Moon Animation

>>>html
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

>>>javascript
// Create a scene
const scene = new THREE.Scene();

// Create a camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,
0.1, 1000);

// Create a renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Add a light source to simulate the sun


const light = new THREE.PointLight(0xffffff, 1, 0);
light.position.set(10, 0, 0); // Positioned to the right of the earth
scene.add(light);

// Create the earth sphere


const earthGeometry = new THREE.SphereGeometry(1, 32, 32);
const earthTexture = new
THREE.TextureLoader().load('https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Th
e_Earth_seen_from_Apollo_17.jpg/300px-The_Earth_seen_from_Apollo_17.jpg');
const earthMaterial = new THREE.MeshPhongMaterial({ map: earthTexture });
const earth = new THREE.Mesh(earthGeometry, earthMaterial);
earth.position.set(0, 0, 0); // Centered in the scene
scene.add(earth);

// Create the moon sphere


const moonGeometry = new THREE.SphereGeometry(0.3, 32, 32);
const moonTexture = new
THREE.TextureLoader().load('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Ful
lMoon2010.jpg/280px-FullMoon2010.jpg');
const moonMaterial = new THREE.MeshPhongMaterial({ map: moonTexture });
const moon = new THREE.Mesh(moonGeometry, moonMaterial);
scene.add(moon);

// Set camera position


camera.position.z = 5;

// Animation parameters
let moonOrbitRadius = 2;
let moonOrbitAngle = 0;
let moonRotationSpeed = 0.02;
let earthRotationSpeed = 0.01;

// Animation loop
function animate() {
requestAnimationFrame(animate);

// Rotate the earth on its axis


earth.rotation.y += earthRotationSpeed;

// Rotate the moon on its axis


moon.rotation.y += moonRotationSpeed;

// Move the moon in an orbit around the earth


moonOrbitAngle += 0.01; // Increment the orbit angle
moon.position.x = moonOrbitRadius * Math.cos(moonOrbitAngle);
moon.position.z = moonOrbitRadius * Math.sin(moonOrbitAngle);

// Render the scene


renderer.render(scene, camera);
}

animate();
1. Earth and Moon Geometries:
○ The Earth is represented by a sphere with a realistic texture applied using a
TextureLoader.
○ The Moon is a smaller sphere with its own texture applied.
2. Lighting:
○ A point light is positioned to the right to simulate sunlight, casting shadows and
illuminating one side of the Earth and Moon.
3. Rotations:
○ The Earth rotates on its axis to simulate day and night.
○ The Moon rotates on its axis for realism.
4. Moon's Orbit:
○ The Moon orbits around the Earth in a circular path, calculated using sine and
cosine functions.
5. Renderer:
○ The WebGLRenderer is used to display the scene in the browser, and its size
matches the window dimensions.

References:

1. Massachusetts Institute of Technology. (2020). Coordinates and transformations. MIT


OpenCourseware.
https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-837-computer
-graphics-fall-2012/lecture-notes/. (Original work published 2001).
2. National Open University of Nigeria. (2009). Introduction to computer graphics and
animation. https://nou.edu.ng/coursewarecontent/CIT371.pdf
3. Bloop Animation. (2015, September 14). The 5 types of animation [Video]. YouTube.
https://www.youtube.com/watch?v=8WmoK8c5Z4M
4. I Want to Be an Animator - Animation tutorials. (2017). Lesson 05 - Timing & spacing
(animation principles) [Video]. YouTube.
https://www.youtube.com/watch?v=9vJwKP0KgI0
5. KidsCanCode. (2016, July). Gamedev in-depth topics: Time-based vs frame-based
movement [Video]. YouTube. https://www.youtube.com/watch?v=2Qd7ZClpSYw

Textures:

● Earth Texture: NASA Earth Texture


https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Ap
ollo_17.jpg/300px-The_Earth_seen_from_Apollo_17.jpg
● Moon Texture: NASA Moon Texture
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/280px-
FullMoon2010.jpg
● World Map Texture: World Map
https://upload.wikimedia.org/wikipedia/commons/c/cf/WorldMap-A_non-Frame.png
● Moon Map Texture: Clementine Moon Map
https://upload.wikimedia.org/wikipedia/commons/d/db/Moonmap_from_clementine_data
.png

You might also like