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 19 seconds Welcome 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 seconds free 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 seconds active 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 seconds And 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 seconds And 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 seconds with 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 seconds So, 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 seconds And, 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 seconds Ok, 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 seconds This 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 seconds And 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 seconds Ok, so we’re gonna return now this Earth material.

Skip to 6 minutes and 47 seconds And 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 seconds And there it is! Fantastic, we’ve created our Earth.

Skip to 7 minutes and 19 seconds So 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

Get a taste of this course

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