Three.js: Textures and Materials PART I

This is an introduction to Three.js Materials PLUS → Diffuse, Bump, Specular, and Transparent Textures. Our Goal: to creating a 3D model of planet earth.

3D rendered Earth

Set Up/Installation

Our first step is to install three.js via npm or add the appropriate script tag to your html as such:

The canvas set up is as follows:

Here we set the canvas to take up the whole window a user views the scene with

And finally to actually be able to display anything with three.js, we need three things: A scene (which sits on top of the javascript canvas), a camera, and a renderer:

Creating the Sphere

Next we will create the blank sphere that eventually will become our Earth model by:

• Creating the geometry for the sphere
• Creating a material
• Creating the 3D Object by passing in our geometry and material
• Adding it to the scene

Our blank sphere rendered onto the scene

Adding in the Earth’s surface

Finally we are at our last step. All we need to do now is find an image of a flattened earth (aka A MAP :D) and add it to the surface of our blank sphere. I found/liked this picture I found on Google below but any simillar image will suffice.

But wait? HOW CAN WE RENDER A FLAT IMAGE ONTO A 3D SPHERE?! Glad you asked. If we attempted to write this all with WebGL… well that would take a while. But with the “magic” of Three.js it’s as simple as:

This is called a diffuse texture which can set the main color of any surface. When we apply it to a sphere, we get the following image:

And that’s all for Part I! We now have a basic 3D model Earth rendered onto the scene using Three.js. In Part II we will be adding:

• Bump Map Textures (to give a mountainous surface effect)
• Specular Textures (giving the illusion of the sun on our Earth/shadows)
• A cloud layer
• And finally: Rotational Movement.

Stay tuned and happy coding.