Three.js: Textures and Materials PART II

To recap, in Part I we created a basic 3D model Earth rendered onto the scene using Three.js.

In Part II we’ll be adding:

  • Bump Map Textures (to give a mountainous surface effect)

Bump Map Textures (to give a mountainous surface effect)

Below is the bump map we will be using. A bump map uses light and shading to signify to the renderer where to add height. More light signifies to add pixels which acts as the “height” on the surface.

After importing the image we set the bumpScale which adds extra pixels wherever white shading is on our image. Now if we run/add the code below

and add lighting to the scene we get the image below rendered unto our window.