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 everyone. You know, our first lesson, we made the basic setup of our camera and renderer and we successfully rendered a black screen, congratulations! So now we’re going to add an object to our scene in order to draw something a little bit more interesting, and we’re gonna go with the traditional, kind of hello world example, which is to draw a sphere, and we’re gonna create a new function here called “createSphere”,

Skip to 0 minutes and 47 secondsand it’s quite important to note, as you would’ve done, hopefully, from Javi’s lessons earlier on, that when we draw an object to a 3D scene we need to associate with that object the geometry of that object to the shape of it and the materials, so how it reacts to the lights and what colour the pixels will be based on the light which is hitting the objects. So what we’re gonna do is create the material and the geometry for our sphere. Let’s start with geometry.

Skip to 1 minute and 23 secondsFortunately, three.js gives us a very handy function here called "sphereGeometry”,

Skip to 1 minute and 32 secondsand we’re gonna pass it some numbers. The first number is the radius, and the last two numbers are the density of point, if you’d like, the number of vertices we’re gonna use in our sphere. And then, we’re gonna create the material as well, “sphereMaterial”,

Skip to 1 minute and 53 secondsand we’re gonna create a "LambertMaterial", so there is no specular light on this material, just diffuse.

Skip to 2 minutes and 3 secondsAnd when you create a material in three.js, you can pass an object, a javascript object, which we’re going to do very quickly, and we’re just gonna set the property colour to red, you can pass a hex colour here as well if you want to as well. No need for a comma there. Now what we’re gonna do is actually create our sphere by mixing the geometry and the material, and so we can create a new mesh,

Skip to 2 minutes and 35 seconds“sphereGeometry” and “sphereMaterial”.

Skip to 2 minutes and 40 secondsAnd the final thing we need to do now we’ve actually created our mesh, we need to add that mesh to the scene. If you recall, the scene is the thing that controls everything that we’re going to draw into the screen. And so we’re just gonna say “scene.add(sphere)”. And now you’ve added the sphere to the scene graph, the graph of objects which is in our scene, and hopefully now when we draw it, it will actually render. So, we’re just going to add the scene the function “createSphere” down here, but, of course, if I now go and save this and refresh, we see nothing.

Skip to 3 minutes and 15 secondsThe sphere exists but we don’t see it, and the reason is because we haven’t added a light to our scene. You need to have a light to see things in the real world, and you need to have a light to see things in the virtual word as well. So, we’re gonna create a new function down here called “createLight”, “function createLight”,

Skip to 3 minutes and 39 secondsand we’re gonna create, there are several different lights that we can play around with in three.js, we’re gonna play with the spotlight first, and we’re gonna create a “new THREE.SpotLight" and we’re gonna set its colour to be

Skip to 3 minutes and 59 secondspure white.

Skip to 4 minutes and 3 secondsAnd we’re gonna place it in the scene, “spotLight.position.set”,

Skip to 4 minutes and 9 secondsadd a nice, sort of horror diagonal angle, daunty angle to our sphere.

Skip to 4 minutes and 17 secondsAnd the other thing we need to do is add the spotlight to the scene as well, to the graph of objects of the scene. The light counts as an object, so “scene.add(spotLight)”.

Skip to 4 minutes and 32 secondsNow, then down here, we’re gonna just call a function “createLight”, so you’ve got two new functions now, "createSphere” and “createLight”.

Skip to 4 minutes and 43 secondsAnd there’s our sphere! A nice, perfectly round sphere, shaded lovely in red. And that’s the end of this lesson.

Adding objects and light

In the last step, we rendered a black screen. Now, Alun explains how to add objects and light to this scene.

  • When we create an object, its appearance is affected by its geometry and its material.

  • In order to see the object, we also have to create light.

Alun shows how you can use functions in Three.js to complete these basic operations.

What object did you end up with? Does it look like the red sphere from the video?

You can download a sample source code from the zip folder located in the Step 3.1.


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
    video

    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
    video

    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
    video

    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
    video

    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
    video

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