3D EARTH MODEL WITH HTML, CSS, JAVA SCRIPT & THREE.JS


WebGL is a JavaScript API for rendering interactive 3D graphics in modern web browsers without the use of plug-ins. Three.js is built on top of WebGL, and allows you to create complex 3D scenes with a few lines of JavaScript. If your browser supports WebGL you should see a rotating Earth.

Three.js support different light sources that have specific behaviour and uses. I'm using ambient and directional light:

  • Ambient light: Basic light which is applied globally.  The dimmed ambient light shows areas away from the sun.
  • Directional light: Light that mimics the sun. All the light rays we receive on Earth are parallel to each other. 

Ok, we got the scene, camera, renderer and light sorted. It's time to model our Earth using sphere geometry and material, which is referred to as a mesh in three.js.

The sphere is created using THREE.SphereGeometry. The first parameter is the radius, and the second and third parameter is the number of width and height segments. The sphere is drawn as a polygon mesh, and by adding more segments it will be less "blocky" - and take more time to render.

Next, we use THREE.MeshPhongMaterial to wrap map data around the sphere. This material is used to create shiny materials, and we use it to make the ocean reflective.

I'm using map data from shadedrelief.com. This is a great collection of shaded relief maps by cartographer Tom Patterson. Natural Earth III is collection of raster map data tailored towards visualising Earth from space. Compared to photographs of Earth, Natural Earth III offers brighter colours, fewer clouds and distinct environmental zones. The maps are very pleasant to look at.

Let`s start with a texture map of the Earth without clouds

I reduced the image size to 4096 x 2048 px, which was the maximum texture size for the GPU of my computer. If you want more detailed textures you need to slice up the Earth.

Second, I`m using a bump map to enhance the view of the mountains

Bump mapping is a technique to simulate bumps and wrinkles on the surface of an object. The result is an apparently bumpy surface rather than a smooth surface although the surface of the underlying object is not actually changed. I'm sorry, you can't tilt the camera to see 3D mountains with this technique. You can adjust the bump effect (how much the map affects lighting) with the bumpScale parameter.

Lastly, I want to make the ocean and lakes reflective by applying a land/water mask. This specular map defines the surface's shininess. Only the sea is specular because water reflects water more than earth. You can control the specular color with specular parameter.


 Installation or Setup

You can install three via npm

npm install three

Or add it as a script to your HTML page

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r85/three.min.js" />


HTML:

Creating the scene

To actually be able to display anything with three.js, we need three things: A scene, a camera, and a renderer. We will render the scene with the camera.

Creating the Sphere

  • Create geometry for the sphere
  • Create a phong material
  • Create a 3D Object
  • Add it to the scene
  • Plain Sphere

Result

Adding a Specular Texture

Changes the 'shininess' of an object with a texture.

Each pixel determines the intensity of specularity.


In this case, only the sea is specular because water reflects light more than earth.

  • You can control the specular color with the specular parameter.
  • We create canvasCloud with a canvas, and use it as a texture.
  • We do this because jpg doesn’t handle an alpha channel. (However, a PNG image does)
  • We need to make the code to build the texture based on the following images.


  • We attach the cloudMesh to earthMesh so they will move together.
  • We disable depthWrite and set transparent: true to tell three.js the cloudmesh is transparent.
  • We set sides to THREE.DoubleSide so both sides will be visible.
  • This avoids creating artifacts on the edge of the earth.


Finally, we set opacity: 0.8 to make the clouds more translucent


Adding Rotational Movement

In your render loop, you simply increase the rotation

As a final touch, we will animate the cloud layer in order to make it look more realistic.


Download Now