How to make Earth with Space Background?
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.
Step 1. Open your Sublime Text.
Step 2: Create a normal HTML file.
Step 3: Save the HTML file.
Step 4: Create an empty script in your HTML file.
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.
Step 7: Create the Earth
Step 8: Create the Space Background.
Step 9: Create the Sun.
Step 10: Create Light so the Sun can now shine.
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.
Step 13: Make an animation function so we can rotate the Earth.
Step 14: Display and render the rotating Earth.
Step 15: Now you got an Earth with Space Background! Note that you can't render Earth with Background if you have no Internet.
The code used for this project is:
<!DOCTYPE html>
<html>
???<head>
??????<meta charset="utf-8">
??????<title>Earth With Space Background</title>
??????<style>
?????????body { margin: 0; }
??????</style>
???</head>
???<body>
??????<script src="https://threejs.org/build/three.min.js"></script>
??????<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
??????<script>
?????????const scene = new THREE.Scene();?//creates space where we can draw figures
?????????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 call the renderer to draw something
?????????renderer.setSize( window.innerWidth, window.innerHeight ); //We set the viewing size to see what is drawn. The size is the screen's resolution
?????????document.body.appendChild( renderer.domElement ); //We call this to actually display what is drawn by the renderer
?????????//Creates Earth
?????????const geometry = new THREE.SphereGeometry( 15, 32, 16 );?//creates spherical geometry with radius 15, 32 horizontal segments and 16 vertical segments
?????????const texture = new THREE.TextureLoader().load( 'https://i.imgur.com/kFoWvzw.jpg' ); //loads the picture on the spherical geometry
?????????const material = new THREE.MeshPhongMaterial( { map: texture } ); //pastes the picture on the spherical geometry. The geometry is reflected by light
?????????const sphere = new THREE.Mesh( geometry, material ); //creates sphere from spherical geometry and texture
?????????const controls = new THREE.OrbitControls( camera, renderer.domElement ); //positions the camera by moving the mouse
?????????scene.add( sphere ); //displays this sphere
?????????//creates Space Background
?????????const geometry2 = new THREE.SphereGeometry( 500, 32, 16 ); //creates spherical geometry with radius 500, 32 horizontal segments and 16 vertical segments
?????????const texture2 = new THREE.TextureLoader().load( 'https://i.imgur.com/gY9PSFo.jpg' );?//loads the picture on the spherical geometry
?????????const material2 = new THREE.MeshBasicMaterial( { map: texture2 } ); //pastes the picture on the spherical geometry.
?????????const sphere2 = new THREE.Mesh( geometry2, material2 ); //creates sphere from spherical geometry and texture
?????????scene.add( sphere2 );?//displays this another sphere
?????????//Creates Sun
?????????const geometry3 = new THREE.SphereGeometry( 3, 32, 16 ); //creates spherical geometry with radius 3, 32 horizontal segments and 16 vertical segments
?????????const texture3 = new THREE.TextureLoader().load( 'https://i.imgur.com/gWRlaR0.jpg' ); //loads the picture on the spherical geometry
????????const material3 = new THREE.MeshBasicMaterial( { map: texture3 } ); //pastes the picture on the spherical geometry.
????????const sphere3 = new THREE.Mesh( geometry3, material3 );?//creates sphere from spherical geometry and texture
???????scene.add( sphere3 ); //displays this another sphere
???????sphere3.position.set(0, 0, 250); //positions this Sun on 3D point (X = 0, y = 0, z = 250)
?????????//Creates Light
?????????const light = new THREE.PointLight( 0xffffff , 1, 1000, 2 );?//Creates white light with intensity of 1, range of light is 1000 units and pphysically correct lighting is activated when using 2
?????????light.position.set( 0, 0, 250 ); //positions this Light on 3D point (X = 0, y = 0, z = 250)
?????????scene.add( light ); //displays this light
?????????material2.side = THREE.BackSide; //renders the Space Background picture inside of Space backgrond Spherical Geometry, not outside
?????????controls.update(); //used so the Orbit controls will be updated when mouse is moved so the camera cam be moved
?????????function animate()
?????????{
????????????requestAnimationFrame( animate );?//call the animation function
????????????sphere.rotation.x += 0.00;?//rotate the Earth about the x - axis
????????????sphere.rotation.y += 0.005; //rotate the Earth about the y - axis
????????????renderer.render( scene, camera );?//animation will be rendered
?????????};
?????????animate();?//Display and render rotating Earth
??????</script>
???</body>
</html>
Enjoy rendering!