Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Skip to 0 minutes and 20 secondsHi there and welcome back to this last lesson of this module where we’re going to just add some final touches to our Earth scene. What we’re gonna do is just enrich the material of the planet with some more textures from the Planet Earth database, and what we’re gonna do is, we’re gonna add a normal map and we’re gonna add a specular map just so that the water, the oceans reflect the light in a specular way and the Earth doesn’t.

Skip to 0 minutes and 58 secondsAnd we’re gonna add some stars in the background as well. So, all the assets can be downloaded from the course website as well. Right, so let’s go to our code, as it is, and we just need to add a bit more material into our, a few more textures into our “earthMaterial”. So far, we have this defused texture, which is fine, and we're gonna add some more textures. We’re gonna add a normal texture and a specular texture. So, to save a bit of typing, I’m gonna copy and paste. It’s quite dangerous cause when you copy and paste you run the risk of not updating the names properly, but given there’s quite a lot of typing, I’m going to try it out.

Skip to 1 minute and 38 secondsAnd we’re gonna add … create this normal texture and we’re gonna use this file called

Skip to 1 minute and 48 seconds“earth_normalmap_flat2k.jpg”, and I think that should be ok to load in like that. I’m gonna add a third texture now as well, which is the specular texture. The specular texture is basically a binary texture, a black and white texture, that basically says, we’ll enable the specular component in certain regions of the material, so in the mesh, and not in others; so we’ll change this to “earthspec2k", which is the name of the specular texture. And now that we’ve loaded these textures, or we’ve created the code to load them and the callbacks to activate them once they’ve loaded, we’re just gonna modify this material in order to apply these textures. So with the "normalMap" we need to say “earthMaterial.normalMap

Skip to 3 minutes and 3 seconds= normalTexture”. And the other thing we can do with the "normalMap" is we can just control how much of the "normalMap" we apply. So we’re gonna use a "normalScale", “normalScale = new THREE”, it’s a "Vector2", and it’s just basically saying how much of the "normalMap" we’re going to apply at each pixel. We’re just gonna turn it down a little bit so we don’t get too much relief in our world. I’m just gonna add the specular map too, “earthMaterial.specularMap

Skip to 3 minutes and 46 seconds= specularTexture”

Skip to 3 minutes and 51 secondsand “earthMaterial.specular”,

Skip to 4 minutes and 1 secondwe’re just gonna change the specular colour as well to make it a little bit less glary.

Skip to 4 minutes and 11 secondsIt’s still bright but it’s not very glary. Ok, let’s save that. We have a little error, that’s no problem. Ah, we’ve made a mistake into "Vector2", we need a two-dimensional vector. You can have "Vector2" or "Vector3" in three.js. And there’s our world, and now as you see, if we zoom in, we can actually see the relief on the world and the mountains, and we can see that there's a specular component on the oceans but not on the earth. So we’ve loaded in a few more interesting materials that added a little bit more realism to our scene. And the final thing we have to do is load in a background and environment map.

Skip to 4 minutes and 54 secondsSo what we’re gonna do here is the same as always, is we’re gonna create a, load in the texture and assign it to the back triangles, the rear of the triangles of an enormous sphere that surrounds our entire scene. So we’re just gonna basically place a sphere, a huge sphere right surrounding our scene and we’re gonna assign a texture to that sphere, and draw the texture on the inside of the sphere, rather than on the outside of the sphere, and that would be our environment, right? It’s a very standard way of creating an environment. So, “function createStarfield”.

Skip to 5 minutes and 33 secondsAnd we need to create a sphere. Let’s just copy and paste our sphere geometry, as always, and make it very very big. So the radius of 90, and we don’t need to do this, but just to add a bit more definition to it. And we need to create a texture. So we’re just gonna copy the texture code as well,

Skip to 5 minutes and 55 secondsand making sure that we change everything. We’re gonna call it the environment texture, the “envTexture”.

Skip to 6 minutes and 3 secondsAnd the texture that we’re gonna load in is “galaxy_starfield.png”. So "galaxy_starfield.png" And this is going to be a basic material, we don’t want this texture to react to the light, we don’t want the material to react to the light, just display the colour exactly how it is on the texture, so we’re just gonna make a “MeshBasicMaterial”.

Skip to 6 minutes and 37 secondsAnd we’re gonna set the map of this material to be our loaded texture, “envTexture”,

Skip to 6 minutes and 47 secondsthis is the real crucial thing when you’re creating an environment map like in this way, is that you want to set the side on which you’ve rendered the texture to be the back side of the triangles of the mesh, not the front side. Ok? That’s the real difference here, it’s the back side rather than the front. And we need to add this mesh to our scene in the same way that we’ve added every single mesh to our scene. We create a new mesh, we pass the geometry, so we call “sphereGeometry” here, "Geometry", and the material,

Skip to 7 minutes and 30 secondsand then we’re gonna add this to the scene.

Skip to 7 minutes and 37 secondsAnd copy and go.

Skip to 7 minutes and 45 secondsAh! We have an error because obviously we didn’t actually add the relevant code to our "init" function. So now we’ve added… We still have an error, and that’s because we haven’t added the map here. So, when we create our material, we need to create the “MeshBasicMaterial", “envMaterial.map”, it’s our “envTexture”, and the side is the backside. So now that should all work perfectly. Hooray! And now we have our Earth floating in space, with a relief map and a specular texture. So hopefully in this module you would’ve learned how to create materials with three.js, and apply them and create a very interesting scene.

Create a more realistic earth scene

In this video, Alun adds more textures to make the scene more realistic. Again, some examples of these assets can be found at the links below.

To improve the earth object, apply:

  • earthTexture
  • normalTexture
  • and specularTexture

to earthMaterial.

To add stars to the background, add a very large sphere around the scene and apply a texture to it. A star field image and the related source code can be found in Step 3.1.

  • Textures can be downloaded from James Hastings-Trew’s Planetary Pixel Emporium
  • The starfield used for the environment map can be downloaded here

Share this video:

This video is from the free online course:

3D Graphics for Web Developers

Pompeu Fabra University Barcelona

Get a taste of this course

Find out what this course is like by previewing some of the course steps before you join:

  • Getting to know WebGL studio
    Getting to know WebGL studio
    video

    State-of-the-art tool for 3D graphics development, WebGLStudio. Watch Javi Agenjo explains basics of 3D graphics using WebGLStudio.

  • Learn 3D scene post-production
    Learn 3D scene post-production
    video

    Apply more effects, algorithms to have more realistic scene and learn about post-production. Watch Javi Agenjo explains more.

  • Implementing a basic 3D scene
    Implementing a basic 3D scene
    video

    Learn how Three.js API can be used to create 3D graphic scenes. Explore more about Three.js after watching Alun Evan's video lesson.

  • Creating complex 3D objects
    Creating complex 3D objects
    video

    Learn how to create complex 3D objects instead of simple spheres and planes. It uses external resources also. Watch Alun Evans explains more.

  • Loading textures and casting shadows
    Loading textures and casting shadows
    video

    Add complex textures and higher quality meshes in to a 3D scene using Three.js API. Watch how Alun Evans program these features.

Contact FutureLearn for Support