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 So far, we have our very basic scene here, let’s just refresh it to reset things, and we have a globe with a simple light, but it’s a basic material, so we’re not seeing any real shading. So what we’re gonna do is, we’re just gonna change the material first a little bit, we’re gonna go to our “createEarthMaterial” and, instead of a “MeshBasicMaterial”, what we’re gonna do here is we’re gonna create a more … we’re gonna get a “PhongMaterial”, which enables us to add a specular and diffuse component to our objects, so let’s just do that and quickly refresh, and straightaway we see that our earth is a little bit,

Skip to 1 minute and 9 seconds it’s lit very differently obviously, but we’ve got a spotlight on it, and if you recall the sun is not a spotlight, the sun is very far away and the light comes from a single direction. So what we’re gonna do, we’re gonna change the light and create a directional light. And we’re just gonna remove all this now, we don’t need the spotlight anymore. We’re gonna create a directional light, “directionalLight = new THREE.DirectionalLight”,

Skip to 1 minute and 40 seconds and we’re gonna make it white, the sun, I’m guessing, it’s pretty white in terms of its light,

Skip to 1 minute and 48 seconds and we’re going to set its position to be quite far away,

Skip to 1 minute and 56 seconds “.set”, to be relatively far away. These are numbers that I’ve tested and I know they work. You can have a test and figure out for yourselves if you can’t visualize the 3D in your head. And we’re gonna give it a name. No real need to give it a name, but it’s good to give items in your scene graph a name so you can refine them and refer to them later on, and we’re gonna add it to the scene.

Skip to 2 minutes and 30 seconds Ok? And we’re gonna also create an ambient light. Why are we creating an ambient light? Well, the Phong shading material that we’re using doesn’t feature any global illumination of any variety. And we’re just gonna create some ambient light so you can see the dark side of the earth. That’s probably not very realistic, cause there’s very little ambient light at the universe, but it will kind of look a little bit better than just having a pure black. So we’re just gonna create a very very very soft background colour in our scene so we can see a little bit to the other side of the world. “AmbientLight”. Ok, let’s see how that looks. In theory nothing will change. Oh, there’s an error.

Skip to 3 minutes and 12 seconds That is not defined. (page 42). Ah! We’ve got a little error there in our, we’ve swapped a comma for a full stop. Let’s go back. And there’s a world now. As you can see, the ambient light means you can just see the back end, the dark side of the earth, but we can see the light side of the earth and rotate it. And it looks a little bit better now. Ok, what we’re gonna do is make a little bit more realistic and add some clouds.

Skip to 3 minutes and 41 seconds And to do clouds, what we’re gonna do is, we’re gonna create a sphere which is just marginally bigger than the earth sphere, and we’re gonna add a transparent texture or a texture which has transparency with the clouds. So what I’m gonna do is, just below the “createEarth”, we’re gonna create a new function called “createClouds”, and we’re going to do a little bit of copying and pasting. Oops. Little bit of copying and pasting. We’re gonna copy this “sphereGeometry” here and make it slightly bigger, sphere is ever so slightly bigger, because the clouds are on a slightly bigger, if you’d like, they’re on a layer above earth’s surface, of course. And we’re just gonna create the cloud texture as well.

Skip to 4 minutes and 31 seconds So, let’s type it rather than copy it. We’re not gonna create a new function to create the cloud material here, we’re just gonna create the material and the clouds and the geometry, all in the same function to get it all done with. “cloudsTexture = new THREE.Texture”.

Skip to 4 minutes and 53 seconds And we need to load that texture obviously the same as the defused texture we used for the surface. We’re going to create a new image loader

Skip to 5 minutes and 6 seconds and we’re going to load

Skip to 5 minutes and 10 seconds this clouds image. Now the interesting thing about this image is that it’s a .png, and it’s a .png because it allows transparency. Obviously, we’re going to load the image into the scene, but we don’t want to block the defused image, which is going to be on the smallest sphere inside the larger sphere we’ve just created. And, so, if we just assign our texture

Skip to 5 minutes and 42 seconds to the image that’s downloaded in the callback, this is exactly the same as we did in the previous example to load the defused texture. Just advice the renderer that we need to update this texture once it’s been downloaded. And we’re gonna create a material. And we need to close that.

Skip to 6 minutes and 10 seconds And we’re gonna get a Phong material as well.

Skip to 6 minutes and 21 seconds We’re gonna set the map to be this new texture, exactly the same as we did before,

Skip to 6 minutes and 33 seconds and we’re gonna create the mesh. And I’m intentionally leaving a line out, so you can see what’s gonna happen.

Skip to 6 minutes and 42 seconds “Mesh” with our “sphereGeometry”, which we reuse. We could probably reuse geometry if we wanted to, but and the loader object if we wanted to be more efficient, but for the sake of clarity, I’m creating everything from scratch every time. We’re gonna give it a name, we’ll see why later on.

Skip to 7 minutes and 4 seconds “clouds” and “scene.add(cloudsMesh)”. So, basically, we’ve created our, a new sphere geometry marginally bigger than the existing earth geometry, we’re downloading a new texture, and we’re adding it to the scene. And we just need to get on here and say “createClouds();”. Now with a bit of luck that will go straight into the scene. There’s an error. Unexpected token on line 74. Yeah, here it is, actually in line 71 there’s an extra parenthesis that we don’t need. So, now that it works nicely. And yet, we still have this error, which is, well it’s not really an error, isn’t it, it’s an error I’ve used on purpose, because the transparency image is not activated.

Skip to 7 minutes and 53 seconds And that’s because even that we’ve supplied a .png to the material, we have to actually explicitly define the material is using a transparent image, so when the image has transparency. So we’re just gonna add here “cloudsMaterial.transparent = true”, and now when we refresh we see a slightly more realistic earth with the transparent texture, the transparency in the .png is now being activated, we can see through the slightly larger sphere which contains the clouds texture and see the earth. And I’m just gonna finish off by adding a little bit more interaction to our scene.

Skip to 8 minutes and 39 seconds Down here below, what we can do, if you recall, we added, we gave names to our meshes, we gave the clouds and the earth meshes a name, “clouds” and “earth”. What we can do here is just go “scene.getObjectByName”,

Skip to 8 minutes and 56 seconds and reference the objects that we’ve added to our scene. What we’re gonna do is, we’re just gonna change the rotation of those objects every frame, just increment the rotation a little tiny tiny bit, so it will give the impression the earth is spinning, and if we just do the same thing with the clouds as well, we just increase that speed a little bit, and it will give the impression that the earth is spinning, and the clouds are spinning beneath it, and that’s quite a nice little touch. And that finishes off our lesson for now.

Add materials and textures

In this video, Alun shows how to make your scene more realistic.

  • To mimic sunlight on your earth, you can set up a directional light. Try testing different numbers to see what looks best.
  • To see the ‘dark’ side of the earth, you can create an ambient light.
  • To add clouds, you can create a transparent sphere slightly larger than your earth. Then, create texture for the clouds.

Download the cloud image from Step 3.1 and add it into the scene.

Notice that Alun runs into some errors as he is coding. Don’t worry if you do, too. If you need help, share your questions in the Comments.

If you would like to share your best practices, lessons learned that you think is important when making a scene more realistic collaborate in this space with your peers.

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: