 Again, this is a series. There should be an annotation on the screen to the full playlist. We've been working with html5 and 3d stuff using 3.js 3js.org is where you go to get those files And Hopefully you've watched the previous tutorials because we're going to be using what we've created So you were just looking at what we created last week. I've copied that into a new file called cube Lambert and Lambert is a style of materials for 3d stuff and So last time we were using mesh basic material We gave it a wire view a wire frame and gave those wires a line thickness, but let's Remove those and go back here and refresh this now. You can see it's a solid cube, but there's no shading Well with the Lambert material we'll get some shading, but we also need to add some lighting as you will see So let's come in here Let's go here and change it from Basic mesh material or mesh basic material to mesh Lambert material remember it is case-sensitive capital M capital L capital M and this is from our 3js library so Rest of the script we've talked about we've created in previous tutorials But our cube object is we're creating as an object. It's a new object using our three library our 3js We're creating a mesh this mesh. What type of mesh is this new mesh going to be? It's going to be a cube geometry. These are its parameters as far as size Length with height and depth Then we're going to give it a new material and that material is going to be a Lambert material with the color of light blue Let's go ahead and save that and come here and Refresh and you notice we just have a black cube. It's not light blue at all Why? Because we don't have a light source and if you don't have a light everything looks black as black is the opposite of light It's the opposite. It's the absence of color is the absence of light which contains the color so we need to give it a light source and You can get real advanced with Light sources, but we're going to create a simple directional light in this particular case So let's var and create an object. We'll just call it light and we will say that it is a new and From our 3js library. We're going to call it call from it a directional light again case sensitive there and We're going to pass some parameters. We're just going to say white And we'll get the documentation on this a little bit Next we need to give it a position so we're going to say our light position Set and we'll give it an x y and z coordinates of we'll say 2 comma 2 comma 2 we're going to play around with that in a minute and we're going to say to normalize it and of course Even if you create something it doesn't exist in our scene till we add it to our scene so our scene we created above we're going to say scene dot add and We will add in our Light Now if I typed everything properly come back here refresh and we now have a cube with that you can see it's a light blue and It's rotating and you can see the shades from light So the light source we said two two and two all positive numbers So from the center, which the cube is right at the center The light is two units away from us two units to our right and two units up So it's relatively close to our cube now. I could increase those numbers something like that Refresh not too much of a difference there Again, the light is kind of behind it. So we got our x y and z y would be forward and back Let's set the x to zero that's left and right So it will be directly in line with the camera and let's do a Negative number here I'll say negative 400 which is where the camera is on the y coordinates the camera is also at 400 units up So we will put it there so the light source should be coming directly from where our cameras It would be like having a directional light on our camera And there we go. You can see that the light it shaded different because Basically from where the camera is light is directly on to our cube Let's have a quick look at our documentation here for directional light from the 3js.org website There are two parameters you can pass to it Directly while creating it and that's a hex value for the color. I just passed it the color white Through words rather than using a hex value and RGB. We're gonna get more into how to create different colors later on Now we also have an intensity what you can see here when we float over it is a float so we're going to Give it a number basically, but it's a float so it can be I can have a decimal value So let's see if here if it says it's it's light strength or intensity Let's see if there's a default value. I'm assuming it defaults probably one Greats light shine from direction Mission light Doesn't say As you can see it has a lot of parameters you can pass to it. We're looking at the very basics today Let's just start playing with numbers. I'm gonna assume that the fault is one So let's set the value and the fault is what happens if you don't give it a value. We'll say 0.5 So I'm assuming it will be half strength Refresh this and you can see it's a little bit darker if we put down to zero it would become completely Black again with no shading because there would be no light source to create shades Let's go the other way and turn it way up to five So once again if one is default five is going to be well five times brighter. Oh And you can barely see it. It's so washed out. You can see What's in the shadows slightly as the cube rotates? So let's set this. Let's try two Not sure there we go. So you can see it's still very washed out But we can see the cube so you can adjust the brightness of that directional light with a Value there for the intensity That's about it for this tutorial so we can definitely see this cube. Let's just set this back to one Let's give it up a nicer color that's an ugly that light blue is kind of ugly. Let's go just go regular blue There we go. That looks a little bit nicer I will be uploading this code to my website. You can go ahead and check the description for a link to all the codes in this series of videos also You know download it play with it play with those values But now we have a rotating cube That actually has some shading to it. So it doesn't just like a blob of a cube And That's it for this tutorial We'll get more into lighting you have lighting other aspects of other properties such as colors and there's other types of Of lights such as ambient lighting But I just want to give you the basics of the directional light since we needed that to go over our Lambert Material so as always this is part of a series check out the annotation for the full playlist There'll be a new video every Friday If you get to a point in the video where the videos are marked private, that's because they haven't been published yet There'll be a new one next Friday. I thank you for watching I hope you enjoyed it if you do like this topic be sure to give the video a thumbs up So I know people are liking this topic, and I'm not wasting my time and I hope you watch some of my other videos as well, and I hope that you have a great day