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 19 secondsWelcome back! So far, in our 3D application we have drawn a sphere and a plane, and the sphere is casting a shadow on the plane. But now we’re gonna add a little bit more interest to our scene by colouring our sphere, removing the plane and colouring our sphere to make something a little bit more interactive and interesting to look at And, one of the good things about spheres is that they’re the same shape as planets and, fortunately, here’s this fantastic

Skip to 0 minutes and 51 secondsfree resource here, created by James Hastings-Trew at “planetpixelemporium", which provides you some spherical textures, which you can use for the material for your planets. So, we’re gonna choose the texture for Earth, and you can see there are several maps here. There’s a spherical map, a cloud map, a cloud transparency map. And you can download all the assets from that we use in all the examples here from James’ website or directly from our website as well, for the examples in the course. So, I’ve downloaded the relevant assets already to a subdirectory in my

Skip to 1 minute and 39 secondsactive coding folder called “assets”, and what I’m gonna do is, I’m just gonna remove the stuff we had already, I’m gonna remove the sphere and the plane, we don’t really need that anymore, and I’m going to just remove the bits we called them, here.

Skip to 1 minute and 58 secondsAnd I’m going to change the camera position and draw things out a little bit, because with the spheres we’re gonna make this time are gonna be a little bit bigger, so we can better see the textures. And the spotlight can stay pretty much as it is. And what I’m gonna do is, I‘m gonna create an Earth. Ok? So it’s very similar to our previous function, which is “createSphere”. We’re gonna call it “createEarth”.

Skip to 2 minutes and 32 secondsAnd we’re gonna create a “sphereGeometry" and “sphereMaterial” as last time, so “sphereGeometry = new THREE.SphereGeometry”. Oops, that’s ought to capitalize that. And we’re gonna make it a little bit bigger, we can make it raise it to 15

Skip to 3 minutes and 0 secondswith the tesselation of the vertices set at 30 and we’re gonna create a material but, because the creation of the material is a little bit more complex in this case, what I’m gonna do is I’m just gonna set this to sit to be a function. "createEarthFunction”, “Material”, sorry.

Skip to 3 minutes and 24 secondsSo, I have to define that later on, we’ll come to that later on in a bit. But first, we’re just gonna create the Earth mesh.

Skip to 3 minutes and 34 seconds"THREE.mesh”. As always, to create a mesh we have to pass the geometry and the material.

Skip to 3 minutes and 47 secondsAnd, what we’re gonna do is, we're just gonna give this Earth mesh a name. And you’ll see why we have to do this later on. But we’re just gonna give it a name in the scene graph. This is a unique name in our scene to get access to it later on. “scene.add(EarthMesh)”.

Skip to 4 minutes and 7 secondsOk, fine. So now we need to define this function "createEarthMaterial” that we’ve made, so “function createEarthMaterial”. And for this material what we’re gonna do is we're gonna load in a texture. So, the way of, the method of loading textures in three.js has changed actually several times in the past. The latest version needs to create a loader object. So first we need to create an empty texture object. And a texture recall is just an image which we can use to colourize our 3D object in our scene. ”THREE.Texture”. And then we’re gonna create a loader.

Skip to 4 minutes and 51 secondsThis loader object is going to be a image loader, “THREE.ImageLoader”, which enables us to load an image and, in a very javascript way, the loader works via a callback. Obviously, if we’re loading assets from a server it’s going to be asynchronous, so we’re gonna create a callback which we use to deal with the assets, with the texture once it’s been downloaded. And it’s stored in assets and it’s called “earthmap2k.jpg” And here’s our callback function, it receives one parameter, which is an image, and what we need to do, basically is once we’ve loaded the image, downloaded the image and loaded into memory, we’re gonna assign that image to the “earthTexture.image = image".

Skip to 5 minutes and 49 secondsAnd we just need to set one thing here, which is “earthTexture.needsUpdate". And what that is? Basically, it’s a little flag which, in the render loop, it tells WebGL that to the scene graph that something’s changed in this object in the scene, and that we need to update the scene to reflect it, and to reload the scene to reflect it. Ok? So we’ve created our, loaded our texture. Now we need to create a material for it. “earthMaterial = new THREE.MeshBasicMaterial”, we shouldn’t have any Phong or Lambert or anything like that, just a very basic material which shows the colour and the map, the texture map property, the map property is going to be our Earth texture.

Skip to 6 minutes and 39 secondsOk, so we’re gonna return now this Earth material.

Skip to 6 minutes and 47 secondsAnd so now what we’ve done is, we've added a function which creates Earth and then, within that function, we’re calling another one which is “createMaterial”, we’re assigning it to the material and creating a sphere. Now, we just need to add this to the scene.

Skip to 7 minutes and 4 seconds“createEarth”.

Skip to 7 minutes and 14 secondsAnd there it is! Fantastic, we’ve created our Earth.

Skip to 7 minutes and 19 secondsSo far, we can’t actually move anything in our scene. So, in our next lesson, we’re going to add a rotating camera so we can move and zoom and pan our scene around.

Learn about textures

At the end of Week 3, we created a sphere on a plane and added shadows to the scene.

This week, Alun explains how to make this scene more realistic by adding textures, materials and OrbitControls. By the end of the week, your simple sphere will be a realistic-looking model of the earth rotating in space.

In this video, we take the first step by exploring object texture.

Remember you can download several maps in the zip file located in Step 3.1.

You can also download different texture assets to use in your scene. For examples of the planet texture maps that Alun uses click on the link Planet Pixel Emporium.

The specific textures used in this video are those of the earth. You can download them directly from here for free.

In the next step, we’ll find out how to add a rotating camera so we can move around our scene.

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.