Add Ambient and Directional Lighting to Your TresJS Scene

[00:01] Let's add lights into our 3 d sine. But before we do that, we need to change the material of our cube because some materials are affected by lights and others don't. And that's the case of the normal material that we are using right now. It's also the case [00:21] of the basic material. If I change here and then add a color like teal, we can notice that our cube right now has a material that is completely plain because it only has this color, but it doesn't react to any light. If we change here [00:41] to another material, so standard, we can notice now that the cube is completely black. And that's because we don't have a light on our scene. So let's add 1. Just below the Tres mesh, let's use tres ambient light [01:02] and click safe. Right now, we're applying a light that is omnidirectional. That's the ambient light. It means that goes in all the directions and doesn't have any specific point like for the source of the light. So that's why we can see now that the cube gained some color because [01:22] we illuminate a little bit of the scene. To better demonstrate how you can configure the ambient light, let's change the background color to a black color. Because right now the color is too bright and it kinda look like we have another light in it. Now that we have the the dark background, we can go to the ambient light. [01:42] And as any other instance in Fresenius, you can pass a prop called arcs with the arguments of the parameter. So here we can pass a color as a color representation. So it will be the color of the light and then the intensity. So how strong is the light on [02:02] your scene? So because the the full one is white, let's change the color to yellow. Here, you can pass CSS variable colors or you can pass a hex color like this. So in the case of yellow, I don't remember, it was green and blue, I think. [02:22] And you can also pass a variable like new color as a color representation from 3. Js. In this case, let's just put yellow. So the second parameter is intensity. The default one is 1, so let's put 2, and let's hit save. So now we [02:42] can see that the color of our cube has changed because we actually changed the light. So the light color is different, and it makes it look less teal and more green. Let's now add a different light, which is the directional light. To do so, we're gonna set up this color of the [03:02] ambient light back to white to not interfere with the directional light. So to add a trace directional light, we can do it the same way. Just trace directional light and of now I'm going to leave the default. So now we can see that the top part of our cube [03:22] is being illuminated. That's because the directional light is on the top here. We can modify the position and transform its origin to a different place. So let's say that we want to illuminate the, right part of our cube here in the positive [03:42] part of the x axis. To do so, we're gonna set the position to 2 on the x axis, and let's keep it as 0 and 0 in the other axis. Now we can see that the illuminated part is this one right here. Let's customize our directional light. So, to be able to [04:01] see it better, I'm gonna change the color of the cube to white. And then let's change the color and intensity of our directional light. To do so, we are going to use props. So the first prop is going to be the color. And in this case, I'm going to use [04:21] purple. With intensity, let's choose 3 for now. So now we can see that this side of the cube that was illuminated now changed the color. So the more intensity we add here, the brighter the color is gonna look like reflecting on the material. [04:43] Let's change here to cyan, for example, to see another color.