Enhance Your TresJS Scenes with the @tresjs/cientos Package

[00:01] Last but not least, we're going to enhance our 3 d scene with some tips and tricks in terms of staging because right now, it looks kind of plain. So the first thing that we're going to add is some shadows to our model. To do that, we're gonna go to the app dot view. And from the same package that we import the [00:20] orbit controls, we're gonna import an abstraction called contact shadows. This abstraction is special because we could do the shadows in different ways. We could use it the same way as we saw in the lesson for lighting and shadow. But since lighting and shadow is an expensive operation, we can use a [00:40] technique that basically fakes the shadows into the scene. And that's what the contact shadows does. So just below here, we are gonna paste a contact shadows component and we're gonna pass a prop called opacity at 0.2, some blur, and [01:00] a position. Something that you need to be careful with is that these components use a camera. So the camera needs to be first in order to work. So to avoid any issues, I'm going to add the perspective camera just at the beginning of the press canvas. If I hit save and go back [01:20] to my scene, now you can see that there are some shadows just below the model. They're really subtle and they are really performant. Next step is to make this move. And to do that, we're gonna use another technique that involves an abstraction called levioso. So we're gonna go to [01:40] our component. And this one, we're gonna apply it directly to the headphones. So here, we're gonna import another abstraction, which is called Levioso. And the way we use it is just wrap the component that we want to make it float with the Livioso component. This way. [02:00] So we hit save and we go back and restart. Now we can see that there is movement, like a really subtle movement of floating to our object. You can also realize that the shadows right here are adapting to that movement. This is a subtle change, but it looks so good in the final touches. [02:19] We could go the extra mile and make it even fancier. Let's add a price tag inside of the 3 d sine. To do that, we also have another extraction on Cintas package called HTML. This abstraction allows you to add HTML inside of the 3 d sine by faking the, [02:40] effect. So inside of Levioso, we're gonna add the HTML. Okay? And we need to pass to, props. We need to pass transform. We'd make it, transform with the object that you're using. So in this case, since we are using [02:59] Levioso, it's gonna adapt to the movement of Levioso. And let's set a position. So I already tried a position, and this one is the one that make the looks better. Okay? So just trust me. Let's put 0 here and 2. Okay? What is important is what we are gonna [03:19] add inside here. So we're gonna add a span tag. Okay? And we're gonna add the price. So since these are Egghead headphones and it's the first time that we're gonna launch them, let's put a nice price tag on it. So if I hit save and I go back here, now we [03:39] can see that the HTML is being rendered here. And it's actually HTML because you can even select it. But it looks kinda ugly. So let's add some utilities into it to make it better. And I'm gonna go, on how the utilities work. These are the uno CSS, but it's basically a background, some font styles, and [03:59] make it round. So if I hit save, now we have a fancy price tag on our object that make it even cooler. Congratulations. You managed to create your first three d product configuration using Trez. Cs and Vue.