How to make an Earth with Space Background.pdf

How To Make An Earth with Space Background?
Fitzmerl Duron
September 16, 2022
I stumbled upon some techniques on how to create objects that can be displayed on a webpage while
admiring how some people created marvels such as this one:
and
I’m curious how to create objects such as those on above. After a little bit of research, I discovered a
way to create this like globes and space. This software is called ”three.js” and it is essentially a library
of ready - made Javascript codes that are used to render objects on a webpage.
Three.js was somewhat easy to use but if you like to deepen your knowledge of rendering things on
webpage using three.js, you can choose a slightly more difficult versions of easy projects. My ”Earth
With Space Background” render was an easy one so I wasn’t able to use the more advanced capabilities
of three.js, but it gets the job done.
This is how you create Earth With Space Background using three.js.
1

Step 1. Open your Sublime Text.
Step 2. Create a normal HTML file.
2

Step 3. Save the HTML file.
Step 4. Create an empty script in your HTML file.
3

Step 5. Call the Javascript library ”three.js” so we can use the three.js - specific commands later.
Step 6. Create the scene, camera and renderer so we can display anything on the web browser.
4

Step 7. Create the Earth
Step 8. Create the Space Background.
5

Step 9. Create the Sun.
Step 10. Create Light so the Sun can now shine.
6

Step 11. Paste the Space Background image inside the Space Background Sphere.
Step 12. Update the Orbit Controls so that the camera can be moved when mouse is moved.
7

Step 13. Make an animation function so we can rotate the Earth.
Step 14. Display and render the rotating Earth.
8

Step 15. Now you got an Earth with Space Background! Note that you can’t render Earth with
Background if you have no Internet.
9

The code I used to create the Earth with Space Background is:
<!DOCTYPE html>
<html>
<head>
<meta charset=” utf =8”>
<t i t l e>Earth With Space Background</ t i t l e>
<style>
body { margin : 0; }
</ style>
</head>
<body>
<script src=” https :// t h r e e j s . org/ build / three . min . j s ”></
script>
<script src=” https :// t h r e e j s . org/examples/ j s / controls /
OrbitControls . j s ”></ script>
<script>
const scene = new THREE. Scene () ; // creates space
where we can draw f i g u r e s
const camera = new THREE. PerspectiveCamera ( 75 ,
window . innerWidth / window . innerHeight , 0.1 ,
1000 ) ; // creates Camera
camera . position . set ( 0 , 0 , 50 ) ; //We put the
camera on the 3D point (x = 0 , y = 0 , z = 50)
camera . lookAt ( 0 , 0 , 0 ) ; //We focus the camera to the 3D
point (x = 0 , y = 0 , z = 0)
const renderer = new THREE. WebGLRenderer () ; //We
c a l l the renderer to draw something
renderer . s e t S i z e ( window . innerWidth , window .
innerHeight ) ; //We set the viewing s i z e to see
what i s drawn . The s i z e i s the screen ’ s
r e s o l u t i o n
document . body . appendChild ( renderer . domElement ) ;
//We c a l l t h i s to actually display what i s
drawn by the renderer
// Creates Earth
const geometry = new THREE. SphereGeometry ( 15 , 32 ,
16 ) ; // creates s p h e r i c a l geometry with
10

radius 15 , 32 horizontal segments and 16
v e r t i c a l segments
const texture = new THREE. TextureLoader () . load ( ’
https :// i . imgur . com/kFoWvzw. jpg ’ ) ; // loads the
picture on the s p h e r i c a l geometry
const material = new THREE. MeshPhongMaterial ( {
map: texture } ) ; // pastes the picture on the
s p h e r i c a l geometry . The geometry i s r e f l e c t e d
by l i g h t
const sphere = new THREE. Mesh( geometry , material
) ; // creates sphere from s p h e r i c a l geometry and
texture
const controls = new THREE. OrbitControls ( camera ,
renderer . domElement ) ; // p o s i t i o n s the camera
by moving the mouse
scene . add( sphere ) ; // displays t h i s sphere
// creates Space Background
const geometry2 = new THREE. SphereGeometry ( 500 ,
32 , 16 ) ; // creates s p h e r i c a l geometry with
radius 500 , 32 horizontal segments and 16
v e r t i c a l segments
const texture2 = new THREE. TextureLoader () . load ( ’
https :// i . imgur . com/gY9PSFo . jpg ’ ) ; // loads
the picture on the s p h e r i c a l geometry
const material2 = new THREE. MeshBasicMaterial ( {
map: texture2 } ) ; // pastes the picture on the
s p h e r i c a l geometry .
const sphere2 = new THREE. Mesh( geometry2 ,
material2 ) ; // creates sphere from s p h e r i c a l
geometry and texture
scene . add( sphere2 ) ; // displays t h i s another
sphere
// Creates Sun
const geometry3 = new THREE. SphereGeometry ( 3 , 32 ,
16 ) ; // creates s p h e r i c a l geometry with radius
3 , 32 horizontal segments and 16 v e r t i c a l
segments
const texture3 = new THREE. TextureLoader () . load ( ’
11

https :// i . imgur . com/gWRlaR0. jpg ’ ) ; // loads the
picture on the s p h e r i c a l geometry
const material3 = new THREE. MeshBasicMaterial ( {
map: texture3 } ) ; // pastes the picture on the
s p h e r i c a l geometry .
const sphere3 = new THREE. Mesh( geometry3 ,
material3 ) ; // creates sphere from s p h e r i c a l
geometry and texture
scene . add( sphere3 ) ; // displays t h i s another
sphere
sphere3 . position . set (0 , 0 , 250) ; // p o s i t i o n s t h i s
Sun on 3D point (X = 0 , y = 0 , z = 250)
// Creates Light
const l i g h t = new THREE. PointLight ( 0 x f f f f f f , 1 ,
1000 , 2 ) ; // Creates white l i g h t with
i n t e n s i t y of 1 , range of l i g h t i s 1000 units
and pphysically correct l i g h t i n g i s activated
when using 2
l i g h t . position . set ( 0 , 0 , 250 ) ; // p o s i t i o n s t h i s
Light on 3D point (X = 0 , y = 0 , z = 250)
scene . add( l i g h t ) ; // displays t h i s l i g h t
material2 . side = THREE. BackSide ; // renders the
Space Background picture i n s i d e of Space
backgrond Spherical Geometry , not outside
controls . update () ; // used so the Orbit controls
w i l l be updated when mouse i s moved so the
camera cam be moved
function animate ()
{
requestAnimationFrame ( animate ) ; // c a l l
the animation function
sphere . rotation . x += 0 . 0 0 ; // rotate the
12

Earth about the x = axis
sphere . rotation . y += 0.005; // rotate the
Earth about the y = axis
renderer . render ( scene , camera ) ; //
animation w i l l be rendered
};
animate () ; // Display and render rotating Earth
</ script>
</body>
</html>
And that’s how you create Earth with Space Background, rendered by three.js...:-)
13

How to make an Earth with Space Background.pdf

Recommandé

Recommandé

Contenu connexe

Similaire à How to make an Earth with Space Background.pdf

Similaire à How to make an Earth with Space Background.pdf (20)

Dernier

Dernier (20)

How to make an Earth with Space Background.pdf