Want to keep learning?

This content is taken from the Pompeu Fabra University Barcelona's online course, 3D Graphics for Web Developers. Join the course to learn more.

Skip to 0 minutes and 20 seconds Hi 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 seconds And 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 seconds And 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 seconds and “earthMaterial.specular”,

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

Skip to 4 minutes and 11 seconds It’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 seconds So 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 seconds And 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 seconds and making sure that we change everything. We’re gonna call it the environment texture, the “envTexture”.

Skip to 6 minutes and 3 seconds And 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 seconds And we’re gonna set the map of this material to be our loaded texture, “envTexture”,

Skip to 6 minutes and 47 seconds this 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 seconds and then we’re gonna add this to the scene.

Skip to 7 minutes and 37 seconds And copy and go.

Skip to 7 minutes and 45 seconds Ah! 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: