Contact FutureLearn for Support
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 secondsSo 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 secondsit’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 secondsand 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 secondsand 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 secondsOk? 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 secondsThat 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 secondsAnd 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 secondsSo, 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 secondsAnd 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 secondsand we’re going to load

Skip to 5 minutes and 10 secondsthis 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 secondsto 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 secondsAnd we’re gonna get a Phong material as well.

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

Skip to 6 minutes and 33 secondsand 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 secondsAnd 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 secondsDown 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 secondsand 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.

Share this video:

This video is from the free online course:

3D Graphics for Web Developers

Pompeu Fabra University Barcelona

Course highlights Get a taste of this course before you join:

  • Getting to know WebGL studio
    Getting to know WebGL studio

    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

    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

    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

    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

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