Enable Shadows in Your TresJS Scene

[00:01] Where there is light, there are also shadows. So how can we enable shadows into our scene? 1st, let's add another object to be able to see how the shadows are casted. In this case, I'm gonna add a trace mesh with a plain geometry. This plain geometry is [00:21] gonna be of size 10 by 10 as we pass on the arguments. Notice as well that we pass a mesh standard material similar to the cube and that we needed to rotate the plane by 90 degrees, which is minus matte dot pi [00:40] divided by 2. Matte pi is gonna be 180 degrees. If we don't do that, it's gonna look like this. So make sure you'd rotate on the x axis to have our floor. But something is strange, and it's that we don't [01:00] see any shadow being casted. Maybe it's because our directional light is here on the x axis, and it doesn't have enough height. So let's remedy that and add some height to our directional light. Now we can see that the top of the cube and also the right part are mini [01:20] illuminated, same as the floor, but there is no shadow inside. That's because in 3 g s, shadows are disabled by default because it's a really expensive operation in terms of performance. So we need to explicitly tell the Tres Canvas to be able to [01:40] cast and receive shadows. To enable shadows on our 3 d s scene, we need to pass a prop to the Tres Canvas component to call shadows. If we hit save, we will notice that nothing happens. And that's because in addition to that, we need to tell the scene [01:59] which light sources can cast shadow, and as well, we need to tell which objects can cast and receive shadows. In this case, we want to project a shadow of the cube into the floor. So to do that, let's go to the light source here. And, actually, I'm going [02:19] to reduce the intensity because I think it's too strong. Okay? So now we are gonna pass here a cast shadow property. This is gonna tell the directional light that it can cast shadows on objects. Next, [02:39] let's take the cube and do the same. Cast shadow. And, now, let's decide which one is the one that is gonna receive the shadow, which is gonna be the floor. So in the truss mesh and, remember, you need to add it to the mesh and not to the geometry itself because it won't work. So here, we are gonna [02:58] use receive shadow. If we hit enter and we refresh, now we can see that we have a shadow that is being projected from the light source into the floor. I just added a sphere into our scene to demonstrate how, shadows interact between different, [03:19] objects. So, I move a little bit directional light to be able to cast from here. Okay? And now our our sphere geometry is not casting any shadow. Right? So if we want it to cast a shadow, we need to remember to use cast shadow here. Right? So we do so [03:39] now it's gonna overlap the shallow because it's in this like, in the same direction. So maybe we can move a little bit the mesh, I don't know, like, minus 2 on here. Okay? In this attack, you can see now that it's illuminating in somewhere else. K? We [03:58] could even modify with the directional light and say, okay. Let's move it a little bit, in in the zeta axis here. So now we can see, like, the 2 shadows being cast. But one of the shadows is not being casted on the other object, which is this [04:18] one. I'm gonna give a color to that box, so we can differentiate the floor on the floor. So I'm gonna say, like, gray. Okay? And, let's put this directional light back here. I want to cast the shadow of the sphere on top of the cube itself. [04:38] So to do that, we can also, at the same time that we're casting a shadow, we can also receive a shadow. So we are gonna go to the box geometry here and say, hey. I want to be able to receive shadows as well. And you can see that it goes completely dark because the, sphere [04:58] is blocking the source of light. Let's move a little bit light. So I don't know. Let's put it a little bit higher maybe to see if there is a difference. And you can see that in this part here maybe I need to zoom a little bit, so let's change the position of the camera. In the top, we can see the shadow [05:18] of the sphere being casted on our cube, and our cube is also projecting a a shadow into the floor. And this is how we can control how the lights and shadows interact into our scene.