Scribd
Upload
21 views4 pages

Earth-Moon Animation in JavaScript

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
21 views4 pages

Earth-Moon Animation in JavaScript

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

Programming Assignment Unit 6

>>>Earth Moon Animation

>>>html
<script src="[Link]

>>>javascript
// Create a scene
const scene = new [Link]();

// Create a camera
const camera = new [Link](75, [Link] / [Link],
0.1, 1000);

// Create a renderer
const renderer = new [Link]();
[Link]([Link], [Link]);
[Link]([Link]);

// Add a light source to simulate the sun


const light = new [Link](0xffffff, 1, 0);
[Link](10, 0, 0); // Positioned to the right of the earth
[Link](light);

// Create the earth sphere


const earthGeometry = new [Link](1, 32, 32);
const earthTexture = new
[Link]().load('[Link]
e_Earth_seen_from_Apollo_17.jpg/300px-The_Earth_seen_from_Apollo_17.jpg');
const earthMaterial = new [Link]({ map: earthTexture });
const earth = new [Link](earthGeometry, earthMaterial);
[Link](0, 0, 0); // Centered in the scene
[Link](earth);

// Create the moon sphere


const moonGeometry = new [Link](0.3, 32, 32);
const moonTexture = new
[Link]().load('[Link]
[Link]/[Link]');
const moonMaterial = new [Link]({ map: moonTexture });
const moon = new [Link](moonGeometry, moonMaterial);
[Link](moon);

// Set camera position


[Link].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


[Link].y += earthRotationSpeed;

// Rotate the moon on its axis


[Link].y += moonRotationSpeed;

// Move the moon in an orbit around the earth


moonOrbitAngle += 0.01; // Increment the orbit angle
[Link].x = moonOrbitRadius * [Link](moonOrbitAngle);
[Link].z = moonOrbitRadius * [Link](moonOrbitAngle);

// Render the scene


[Link](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.
[Link]
-graphics-fall-2012/lecture-notes/. (Original work published 2001).
2. National Open University of Nigeria. (2009). Introduction to computer graphics and
animation. [Link]
3. Bloop Animation. (2015, September 14). The 5 types of animation [Video]. YouTube.
[Link]
4. I Want to Be an Animator - Animation tutorials. (2017). Lesson 05 - Timing & spacing
(animation principles) [Video]. YouTube.
[Link]
5. KidsCanCode. (2016, July). Gamedev in-depth topics: Time-based vs frame-based
movement [Video]. YouTube. [Link]

Textures:

● Earth Texture: NASA Earth Texture


[Link]
ollo_17.jpg/300px-The_Earth_seen_from_Apollo_17.jpg
● Moon Texture: NASA Moon Texture
[Link]
[Link]
● World Map Texture: World Map
[Link]
● Moon Map Texture: Clementine Moon Map
[Link]
.png

Common questions

Powered by AI

The animation controls the speed of the moon's orbit using the 'moonOrbitAngle' variable, incremented at each frame within the animation loop. By adjusting the speed of this incrementation, developers can simulate realistic or exaggerated orbital speeds, influencing the pacing of the visual narrative. A suitable orbital speed ensures the animation remains engaging without compromising on naturalism, vital for maintaining viewer engagement and realism .

The WebGLRenderer is crucial in the Earth-Moon animation scene as it converts the 3D scene into a 2D image that can be rendered in the browser. It sets the output size to match window dimensions using 'renderer.setSize(window.innerWidth, window.innerHeight)', thus ensuring that the scene adjusts to fit the browser window effectively, providing an optimal viewing experience across different devices .

The rotational effect of the Earth is achieved by incrementing its rotation on its axis in the y-direction using 'earth.rotation.y += earthRotationSpeed'. Similarly, the Moon's rotation on its axis is updated using 'moon.rotation.y += moonRotationSpeed'. The main difference lies in the rotation speeds applied, with the simulation assigning different values to the Earth and Moon, enhancing realism by allowing for distinct rotational subtleties relevant to their real-world counterparts .

The Earth's Moon is made to orbit around the Earth by altering its position based on trigonometric functions. The orbit is calculated by 'moon.position.x = moonOrbitRadius * Math.cos(moonOrbitAngle)' and 'moon.position.z = moonOrbitRadius * Math.sin(moonOrbitAngle)', where 'moonOrbitAngle' is incremented steadily. This technique uses sine and cosine functions to create a circular orbit around the Earth simulating the natural orbital path .

THREE.js enhances both the development efficiency and the visual quality of the Earth-Moon animation by providing a rich set of 3D graphics features and abstractions such as textured meshes, lighting, shading models, and camera management. These tools reduce the complexity of coding low-level graphics operations, allowing developers to focus on creative elements and interactive physics simulations, ultimately achieving high-quality graphics with less effort .

The Earth-Moon animation scene simulates sunlight by using a PointLight in the scene. This light source is positioned to the right of the Earth, which mimics the sun's illumination, providing light and casting shadows on both the Earth and the Moon. This setup highlights one side of each celestial body, effectively creating a realistic representation of sunlight .

The choice of spherical geometries for Earth and the Moon is pivotal in imparting an educational understanding of celestial bodies. The spheres, combined with appropriate textures and orbital dynamics, enable a visually insightful demonstration of rotation and revolution. These choices allow viewers not only to observe familiar planetary motion but also to understand the interaction of light, texture, and movement, thereby offering a comprehensive visual aid in learning about celestial dynamics .

The PerspectiveCamera in the Earth-Moon animation serves to simulate a more realistic human eye perspective, improving depth perception in the scene. It is defined with a field of view (75 degrees) and an aspect ratio based on window dimensions, making sure that the perspective view resembles what a human would see, which helps in providing a more immersive and engaging experience .

Static textures provide a high degree of realism by accurately displaying surface details, enhancing visual appeal and educational clarity. However, they limit dynamism, as any events that change the surface features like asteroid impacts or volcanic activities would remain unexplored without dynamic updating. Thus, while they offer a visually compelling representation of the celestial bodies, they do not depict temporal changes in surface features .

Textures significantly enhance realism in the animation by providing detailed visual surfaces to the spheres representing Earth and the Moon. The Earth is mapped with a high-resolution NASA Earth Texture, depicting landmasses and oceans accurately. Similarly, the Moon uses a NASA Moon Texture that emphasizes its cratered surface. These textures make the spheres look lifelike, as opposed to plain, uniform-colored spheres, effectively contributing to a realistic portrayal of celestial bodies .

You might also like