0:19Skip 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”,

0:47Skip 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.

1:32Skip 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”,

2:03Skip 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,

2:40Skip 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.

3:15Skip 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”,

3:39Skip 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

4:17Skip 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)”.