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 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 seconds and 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 seconds Fortunately, three.js gives us a very handy function here called “sphereGeometry”,

Skip to 1 minute and 32 seconds and 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 seconds and we’re gonna create a “LambertMaterial”, so there is no specular light on this material, just diffuse.

Skip to 2 minutes and 3 seconds And 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 seconds And 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 seconds The 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 seconds and 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 seconds pure white.

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

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

Skip to 4 minutes and 17 seconds And 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 seconds Now, 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 seconds And 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

Get a taste of this course

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