2.4 Let There Be Light

Hello and welcome back. Now that we've got a 3D shape in our scene, let's make it a little bit more interesting by making it look like a 3D shape. Right now, it just looks like a flattened distorted hexagon of some sort. And so what I wanna do now is to add a little bit of lighting to our scene so that we can actually see the shape of our object. Now even if I add some lighting, it's gonna be hard to get this particular material to show much depth, so right now we're using a mesh basic material. There's another material that I wanna use for this particular lesson, before we do that, we need to fork our current pin. So you can find our URL for this starting pin in the course notes for this lesson, once you open that up, click on fork to create a new copy, and we'll get started with this new copy. So again, we're gonna change this material, instead of using a mesh basic material, which gives it a cartoon type of shading. So, with that direction of light you not really gonna see any shading at all. Instead, let's change this to what's called a MeshLambert, if I can spell that right, LambertMaterial. And we're giving it the same color, and your notice right away something’s different because when we switch to this material our shape seems to disappear. And the MeshLambertMaterial relies heavily on the lighting of the scene for its appearance. So, after we add the cube to the scene let's add a little light, so I’m gonna create a variable here called, light. And we're gonna set it equal to a new instance of 3dot, and of course, as with everything else, there are multiple types of lights in three.js. And the light that we're gonna use here is called a directional light. So we're gonna do new three.DirectionalLight and in parentheses here, we have two things, we have our color and the intensity of our light. So for our color let's just set it to white so 0x and then the hex value which is ffffff and then the next thing we need is the intensity. By default, the intensity is set to 1 so we could leave that blank if we want, I'm gonna set it to about 1.5 and there we go. So we've created our light and now we need to add it to the scene, so we're gonna do another scene.add and we're gonna add our light to the scene. Now, by default our lights position is at 000 but you'll see it still lighting everything up just fine. But I do still want to change the position of it, so we're gonna point to our light.position.y and I'm gonna set that equal to 10. We're basically just putting the light up above our object here. And the way a DirectionalLight works is you can't change the rotation of a DirectionalLight, only the position. And technically, you can change the rotation in JavaScript but it won't have any effect because. The DirectionalLight is gonna be pointing at its target and it's going to be shining down on its target no matter where it's located. So if the DirectionalLight was located below the target then it would shine up on the target. And by default, the target of a directional light is the origin of our scene at a coordinate of 000, which is exactly where our cube is. So wherever we put our DirectionalLight, it's gonna be shining directly at our cube. And we can play around with its intensity value to change how it looks. So if we change this to 0.5, for example, it's gonna get a little bit dimmer, let's go ahead and bring that back up to 1.5. And let's see what it's like if we add another light to the scene. Let's add another DirectionalLight below our cube but let's make it a little bit dimmer. So we can copy all of this here, skip a couple lines and paste it. And instead of light let's just change this to light2 in all three instances where we're pointing at it. And instead of a Y position of 10 let's change that to negative 10 so that it's gonna be below our shape and then we're gonna change our intensity here to 0.5. And there we go, so now we have a little bit more depth, we can see all three of the sides that we're facing now. And the bottom is a little bit darker than the top because our second light here is a little bit dimmer, we're using a lower intensity there. So for everything that we've added so far, for our geometries, for our materials, for our lights. We've pointed out that there are multiple different types of these objects, or multiple types of geometries, multiple materials, multiple lights. Even multiple renderers that we can work with. So I do wanna spend a little bit of time talking about where we can find more information on the different types of lights, and materials, etc. So, let's save our scene and let's take another look at our three.js documentation. And we've already looked at this before but I do wanna look at it in a little more detail now. Especially on this left side here cuz this is where you're gonna find a lot of information on how to create 3D scenes and animate them and things like that. So we have multiple types of lights for examples, so let's scroll down a little bit and over here on the left, I'm looking for a section header that says Lights. And they're in alphabetical order, so that makes it a little easier. First of all, here's our Geometries, and we're using a BoxGeometry in our scene right now. You'll notice there's also a CircleGeometry, which is not a sphere. It's a flat circle but it does move around in the 3D space, so it looks like a coin that has two sides to it. We have a ConeGeometry, we have a Dodecahedron, we have a Lathe, we have a lot of different types of geometry. And each one of these is going to have a different properties for different parameters that are expected whenever you create it. So if we go to, for example, a RingGeometry, we can see an example of what that looks like, it's just a flat ring. In fact, let's go to a torus cuz it's a little more interesting, so let's go to TorusGeometry, and this is more like a donut. So when you're creating a shape like this, as you can imagine, there are more properties that you need to edit in order to fine tune it to get it to look like what you want. So if we scroll down a little bit you can see that we're passing in four different values here and if we go down to our constructor section, we can see what those are. So we have our radius, which is gonna be the overall size of the large circle. We have the tube which is gonna be the diameter of the tube itself if we were to flatten out the circle, so that it was just one straight tube. That would determine how big around the tube is. Then we have our radial segments, which is the number of segments that go around the circle. And the more segments you have, the rounder it's gonna look, the less segments you have, the more choppy and blocky it's gonna look. And then we have our tubular segments as well, which is your segments in the other direction. And then you have this arc element which is basically the central angle. By default, it's set to Math.PI times 2 which creates a full circle but if you set that to a smaller number, it's not gonna go all the way around, it's gonna be a partial taurus. So for the different types of shapes, there are different things you're gonna be passing into the constructor. In this constructor section it's going to give you a lot of information about what you need to do there. So let's go down, we were looking for lights a moment ago, and here we go, here's our lights section,. Not to be confused with our lights/shadows section, which we're not gonna really get into in this course. But you'll notice we have AmbientLight, DirectionalLight, HemisphereLight, just a plain light, a more generic light, PointLight, RectAreaLight, and SpotLight. So you can look at any one of these to get more details on how those lights work. PointLight is just what it sounds like, it's gonna be a point of light somewhere in the scene, you can set it wherever you want to, that's gonna shine in a general direction. And you can set the color of the light, the intensity of the light, and the distance of the light. And that distance is gonna be the distance away from the light where the brightness is gonna be 0. So it's gonna gradually fade out until it hits a brightness of 0, where things are gonna be completely black, they're not gonna render. And in this particular example, that's gonna be 100 units away from the light itself. So the PointLight is going to illuminate things in either directions. But if you put a PointLight between two objects it's going to illuminate the object on the left as well as the object on the right, as long it's within its line of view. So let's take a look at a point of light, let's just grab the defaults here, copy them, and then I'm gonna jump back into our scene here. And I'm gonna grab our other two lights and I want to comment those out, and our short cut for a block comment is Control + Shift + Slash. So let's see if that actually works, sometimes it does, sometimes it doesn't, and that time it did not, so for now, I'll just delete them, we'll come back to it. So let's paste what we've got here, and here, we have our pointlight set to 50, 50, 50. Let's bring this distance parameter up to a 1000 and that'll just brighten things up right here a little bit more. Because now it's further away from that light, that it's gonna be dimmed all the way to 0. We can also change the decay of the light by adding another value here. By default it's set to 1, so if we set it to 1 it's not gonna change anything. If we set it to 2, then it's gonna basically decay a little bit quicker and we don't see a huge difference here but we can play around with that value and see if it changes things on our scene. But we could treat this just like a directional light, where we put a couple of different point lights in different positions. And then give them different brightnesses to illuminate the scene like we want it. But again, that's just another example of a different type of light you can use. I'm just gonna hit Control + Z a few times till we get our directional lights back, then we're gonna save our work and we'll move on with the next lesson. Thank you for watching.