TresJS create 3D experiences declaratively with Vue Components

Hi, everyone. Thanks for coming. My name is Alvaro. You might have seen me in the conference or in the net. I'm the author of Trace.js. And I currently work as a DevRel Engineer at the StudyBlock. And I'm really happy to be here with you today so we can build some stuff with Trace.js.

So Trace.js is a way of creating 3D scenes using view components. I'm showing here right now some of the things that you might be learning or doing in the future with Trace.js. I'm showing you the ways that you can do from really basic stuff to more advanced, like a galaxy, loading models like a planet like this one, low poly planets, changing the materials. And the one that I show in the Trace.js talk at London is the Wizard one. Which is a scene with some components that make the canvas flow. Hope that the library leverages a little bit and it allows you to start learning, because you don't necessarily need a lot of knowledge in two years to use it.

So I shared with you a page which is a Notion page. So the idea of the workshop is that I'm going to build life, the exercises, and you will follow with me try to code them as well. We have around seven exercises, but we'll see how much we can actually do, okay? But they'll cover the basic. Here there are some links that will be useful, especially the ones in the bottom, like the workshop project repository. This repository has all the exercises that we're gonna do today. And you can download it afterwards if you wanna check how we did the exercise.

So this is a little bit of agenda. The idea will be to do the exercise zero right now, which is this one. And then I will try to create, well, publish the other ones so you can see them and we go on. So the idea is that you go with me, you can clone the repository, or you can use NPXDigit to create a new one, okay? We have a starter repository. So if you go to your terminal, like iTermApp, for example, so if you use NPXDigit, what it's gonna do is clone a GitHub template, okay? But you can also clone the repository directly and put yourself in the management, okay? For this workshop, we're gonna use VS Code, but feel free to use your idea of choice.

So when you download the repository, you're gonna have something similar to this. So you will have a normal Vita application using Vue, okay? You can install everything by using npm install, or yarn, or pnpm, the one that you like, in this case, I'm using pnpm, okay? It has all the dependencies already inside. The most important that you need to have is the 3cscore and the 3cscentos package in the version 2.0.0. We have a Vita application using Vue, and it's all set up to work with it right away. Make sure, though, that you're in the main, okay? So that you're in the main branch. What we have is an app.vue that has installed Vue router so we're going to create a page for each one of the exercises. In this case, since this is the first scene, we're going to use a component called experience. Okay? So the index.vue, which is the main page, is going to have suspense.

So, we're going to learn how to paste a command in the chat when we can. Which one do you mean? The one to initialize or the git clone? To initialize you can use this one. It's in the Notion. Okay? You can change the name for your one. If you want to have the exercises, it's better if you git clone the actual repository. Okay? So, in the page that I share here in the project repository, you can git clone this one. Okay? So we're going to have suspense because we are going to do some async stuff in later. And if we go to the components, de-experience.build is going to be the component that holds the whole scene. So I'm just going to close this right here so we can focus on the code, okay? And I'm going to run NPM run dev. Okay? And when you run NPM run dev it's going to open a new tab in your branch. So I'm just going to go here and paste it here. And you should have something like this. A complete empty scene with a grid and an access helper in here. Please let me know in the chat if you're able to see this in your browser.

Okay, we have one job. Awesome. Okay, cool. So to start with the beginning, we're going to go to the code. Start with the beginning. Nice. And we are going to remove everything. Okay? We are going to remove all these components. Okay. And you can leave this here. It doesn't matter. And just save and refresh the scene. So right here, we have a canvas element. Okay? So if we go to the inspector in Chrome or whatever browser you're using, you're going to see that it's a canvas element. So Tress ES and Tree ES, what it does is that it takes all your scene, everything that you're going to put inside of the Tress canvas component. And it's going to render in this DOM element, which is a canvas. Okay? So you're going to see that there are no components here. Everything is going to be rendered on a canvas. If we go back to here, now we are seeing only a black screen. And this is one of the most common things that happen in the beginning. And that means that you don't have a camera yet. If you go to the console, you don't have any warnings because there's actually nothing wrong. But the first thing that we're going to do is add a Tress perspective camera. So all the components in Tress are going to be prefixed by a Tress, yeah, prefix.

By the Tress word. Okay? So this right here is exactly the same name that the perspective camera instance has in 3GIS. So if you ever get lost like what object should I add, or like you're taking a look at the 3GIS documentation, know that you can add it to here and put the prefix to it. So if it's orthographic camera, or this is, I don't know what else, grid helper, you just need to put the trace before. OK. So if we add the trace perspective camera, and we go here and we refresh, now we're going to see that it has a color, right? Why it doesn't have a color? Because we are passing a property to the canvas, which is called clear color. So this is the color that the background is going to have, and you can see already that it's behaving like a view component because we are passing some props from this reactive state into the trace canvas component of trace. We can do the same for the perspective camera, because right now, we are not seeing any other element, right? Let's add the grid that was before, right? The grid on the floor. Let's use trace grid helper, and we are going to pass an argument as an array. Just trust me. I'm going to explain what are the arguments in a bit, just trust me and put some arguments like this. Okay? Sorry, only 10. So let's save, and let's go back to our scene and see what we have. Now you can see that something is rendered, and please let me know if you have the same You should have this grid render right here. Awesome. We have a yes from Sabina. Okay, we have several yes. Nice. So let me remove this here because we are not really going to use it. So if we want to change, for example, the position, we have two things to use view components. We have arguments, like the one that we pass to the Grid Helper, and we have props like position. So if we want to change the position of the camera, I can pass several things. I can pass an array. Which is going to be the X, the Y and the zeta axis. So X is going to be the horizontal, Y is going to be the vertical, and Z is going to be like the depth. So let's say I want to move it a little bit off. I put something like five. And now you can see, if you refresh, that you don't see the grid anymore, and that's because we went too high. So if we add five here, still too high. So we can pass another position. Ah, there are the controls, yeah. Let's remove this and put it on a position. Okay. Let's save again, so we can see the grid. Okay, here's the grid again. We can also change the field of view. So whenever you're creating a camera in plane three, what you normally will do is const camera equal a new perspective camera. And you're gonna pass some arguments to the constructor, like the field of view, so how much you can see on the camera, the aspect radio, which is normally the width and the height of it, and then how far and how near you can see with the camera. So to do that in TressCM, what you need to do is pass the property args, and we're gonna pass the same ones, like a 75. Here we can put one, okay, because it's the aspect radio. The TressCM is element is gonna be calculating that for you. So you can pass one. 0.1 and 1K. Okay? Then we can remove this here, and let's refresh the camera. So now you can see that you actually see more of the grid, and that's because we change the field of view here. Normally it's 45, and we added 75. So the bigger the field of view, more of the scene you can see. It's like changing the lenses. Okay? So far so good. If I'm explaining too fast or I'm complicating things, please let me know, I will try to explain it in a more easy way. Awesome. That's great. So now, let's add some object, right? Because the scene is pretty empty. So the way we can add objects is using TraceMesh, okay? So TraceMesh needs two things inside. It needs a box or a geometry. Sorry, not a box. Like it needs a geometry and it needs a material. Okay. So if you're using Plain Tree, what you normally will do is that you will create geometry, so a box, for example, and you are gonna say, new box geometry from Tree.js, okay? And you're gonna pass the parameters, same as we are doing here. Then you will create the material, which is like this new standard material or new basic material, okay? Let's change it for a normal material, and we don't need to pass any object here, so mesh normal material. And then we can remove the color. And then we will need to create a mesh, so the mesh will be, like, new mesh, and we need to pass the geometry and the material as the second parameter. So we're here using a Trace Mesh component, and we are passing it the Trace Box Geometry and the Trace Normal Material as slots, so as View Slots, okay? What it's doing under the hood is that it's creating this mesh and it's passing this as parameters and automatically adding to the scene. So what we're going to save and go to the browser and see what happens. Now we have a cube in the middle of the scene. The Normal Material is this one that is gonna show you the different sites but we are gonna do an exercise only in materials, okay? So please let me know if the majority of you can see the box. I can go back to here so you can see the...

Okay, amazing. So here it has it. You remember that we could pass the position to the camera, right? There are something called the transforms and actually let me check real quick because I think we are in the other exercise already. So where was I here. So this is the exercise one which is install the Vue Router. So I'm gonna push the exercise one which is creating the scene of the cube, okay? Let me publish it and share it to the web. Okay, so now if you refresh this page, it should be here, okay. And now I'm gonna publish the second one. So they have a little bit of theory if you wanna check it out, but it's more or less what we are explaining here. So it shouldn't add more. So I'm gonna share this too to the web and now we should have the exercise two, which is animate the cube.

Okay, let's open this one because right now we have a cube that is working, right? And I was going to explain, sorry. I was going to explain in the cubic scene how to use arguments, we already saw it, how to use the props. So if we want to use the props, you have some transforms that are position, rotation, and scale that are the more basic props that you're gonna use. Of course, this library has a lot of props, so you can check the documentation of 3ds to see all the options, but we are gonna use the transform properties. Let's go here. And if we want to move up the object, we can do position. And I was telling before, you can pass an array with the X value, the Y value, which is gonna be smaller, like two, and let's move it a little bit on the right. So we're gonna move the X a little bit as well. Okay? If we go back to our scene here, we're gonna see that now the center of the scene is this one and the cube has been moved. Before it was in the middle of the screen and now it is a little bit on the left.

A little trick, if you want to have the scene interactive, because right now it's still, add this component here. Okay? And this is a little bit more advanced, but add it before the canvas, okay? From the Cientos package. The Cientos package is an abstraction or like a helpers that improves the developer experience. You can implement the Orbit controls yourself with the core library, but this one already has everything for you. So if you add it to the scene and you refresh, you're gonna see now that if you click and move, you can move the scene all over the place. So you can already check, like, this is the 0.0.0, and you cube is move of it in here. Did it work for you? The Orbit controls? Awesome. Nice.

Okay. So with this, you can check your scene, check if something is wrong and so on. Now let's use another one, which is the rotate. So we are gonna use rotation here, and then our rotation goes in degrees. Okay. So we have rotation in the X-axis. We have rotation in the Y and in the theta. It's the same thing here. It's a vector. Okay. Whenever you are using, like, rotation, for example, and let's do it like this so you can see that it's also possible. So we are gonna do it the 3GS way, and we are gonna say rotation is equal to newVector3, and we are gonna pass that rotation here. So maybe let's rotate it minus MatPy. So MatPy is p, pi. So 3, 14, 15 something. Okay. So that's the degrees that you're gonna use. So normally MatPy is 180 degrees. Let's divide it into two. So we have our rotation, and let's rotate two of the axis so we can see it. You can pass the properties like these, like any other view application that you have, okay? So if we refresh right here, something happened, okay? Something that wasn't good because now we cannot see our view. So let's see what happened. We don't have any errors here, okay? So what was that you didn't like? If we set the rotation like this, check. There it's not taking the rotation, let me check why. Let's try it with minus four, because maybe because it's a cube. No, it's not working. I'm passing it to here, box geometry. Let's try with 3 and 4. Is this the moment that I start panicking? Here is a little bit rotating. I don't know why it's not rotating with the mat by though. It's put it between three. Let's check, I'm only going to rotate in one. Now the math, I don't know, maybe it's because it's a cube and I'm just making the wrong. Let me know if it's rotating for you. I'm gonna try to rotate the mat by here. Let's put it a positive one, maybe. Okay, so it is rotating, I don't know why. Maybe we actually took the angles that made the full turn, but now it's working. Yeah, okay, so let me know if you can see the cube rotated. And I'm gonna try to use this one right here. So we were using this, and let's pass rotation and should be exactly the same. For some reason is broken when I passed a new vector. So this is about most likely. I will need to fix it if I pass a ref because what we do is normalize all the entries. Okay, from the rotation. So let's check if it works with a ref value. No, it doesn't. Okay, I will need to check this one right here. If you pass it directly here like this, it will work. The idea is that you don't mind if you're passing an array or you're passing a vector. It should work, okay. So let's continue.

Right now we have rotated, so let's see the exercise. You can also rotate, change the position using Pearseed props. So if you have position X or position like X, or a prop that is, I don't know, shadow biased, you can use this shadow bias like this. You can use it as a prop here. So instead of using position, we can use position in the X value. And let's change it for something negative one. So we're gonna use minus four, okay? Let's go here. We need to remove this here. I'm gonna put it in the beginning so I'm gonna. Okay. So now you can see that it moves, in the minus, in the axis and the left, okay? So you could pass, instead of the whole rate, you can pass each one of the array points like this, okay? Cool.

So I think we have the first one, which is this. I can't, I already explained this lots here. You can use as method as well. So some props are methods in the constructor. So the perspective camera, for example, when you move it and you don't have the Orbit controls, you can tell it to look at certain position. And this is a method that gets these parameters and 3DS is gonna automatically map it for you. So let's try to do it here. We're gonna use lookAt, is gonna pass exactly the same position. So it's gonna be minus four, zero, zero. We also have an issue with the typing. I wanted to check that but, you see that the camera moves a little bit towards here and that's the way you can direct the camera towards what you want it to see. If you do something like four here, now you see that the camera looks to another way. So the idea is that whenever you're not using our controls you can use the lookAt to edit where the camera is. Okay? Okay, so far so good. Any questions? So I have some guests there. All good, cool. I think we can move forward then. You have some resources here in each one of the page. Can I see the camera on this space? Yes, you can. So let's go to tres.yes, no, tres.yes docs. And here there is a camera helper. Okay, so we could add the camera helper to see the actual camera. But I need to explain how you can pass a parameter to another component. So you, I'm gonna explain that in a little bit, but yes, you can do it with this one. Okay, let me, remind me afterwards when we see template refs, so I can show you. Okay, so this is a really cool example. You can see template refs, so I can show you, okay? Did, any other question so far? Okay, I think we can jump then to the second exercise because I don't know how we are with time, a little bit behind. So let's hurry up a little bit. Animation of the cube. Okay, so we're gonna use something that is called useRenderLoop, and useRenderLoop is a COMPOSABLE, okay? It's a COMPOSABLE, and the idea behind it is that here, we are painting on the canvas each frame per second. So that's why you can zoom, you can move, et cetera, because it's not rendering only one frame, it's constantly running on the refresh rate of the browser. So that's how games work, that's how everything works in rendering. So, TraceeS does it for you right away, so you don't have to take care of it. But if we want to animate anything inside, we can actually do it with that COMPOSABLE. So here, I'm going to call useLoop from the useRenderLoop. You can import the useRenderLoop from the core package, as well as the TraceeS canvas that we added in the beginning. Okay? Everything is from the core package. And the way we are going to use it is that we are going to pass as parameter, the callback. Okay. And inside of here, we are going to apply our animation. The problem is that we don't have the instance in the JavaScript. We only have the instance in the template. So we need a way to get this instance right here. What normally people will do is that they will create, or think, is that they will create a position here, like, I don't know ref, and this position, 0, 0, 0, right? And they're going to pass it to the position here. And then inside of the loop, they're going to probably say position value, like this. But this is not correct. Because it's reactivity in Vue is using proxies, and proxies are not as fast as normal objects. So these will blow the performance. Imagine this operation being done more than 60 times per second. So if you put a console log here, and I'm gonna show you how it looks in the console. So if I do this, use loop is not on. Ah I've sorry, my bad. It's on loop. The function inside is on loop, my bad. Okay? So you're gonna see that it's running really fast. The console is getting a lot of logs here. And if I'm not careful, it's gonna blow up eventually. Okay. So try to be mindful about what you add here, because it can affect the performance.

Okay. I'm gonna just refresh to avoid Chrome from crashing. We are good. Okay and I'm gonna remove here. So we need another way to get the instance to be able to rotate. Well what we're gonna do, is use template ref from view.

So here we're, who's familiar with template ref? First. Have you used it before? Okay. Awesome. So in normal view, what you're gonna get is the DOM element that you're using. In this case, we're gonna do something else. We're gonna use a boxref. Okay. We're gonna call it that way. And we are going to use ref like this. You can use ref, it will not matter. But if we're going to optimize the performance, you can use shallow ref. Shallow ref is a causing of ref that it only triggers for activity in the first level of nesting of the object, okay. And this is the one that we actually use inside of the reactivity system for três. So what we need to do here is pass to the mesh the boxref and wait for it to be available. We could use a watch. But if we add if a statement here, and if a boxref value is not present, then we return. But if it's there, what we want to do is modify the rotation. So we're gonna do.value.rotation.x, and we're gonna use plus equal. So plus equal is the same as doing the previous one plus a value here. I recommend to use a really small value because since this is moving so fast. So for your eyes to be able to see it, I'm gonna put a little value here. Let's go to our scene and see if it actually works. So if we refresh, we're gonna see the now is rotating in the X-axis, right? And it's rotating like this. So let me know in the chat if you manage to go this far.

I'm going to show the on loop here. And if you have any questions, please let me know in the chat. What we did was use the useRenderLoop composable. We are deconstructing on loop, which is a method. We're passing to that method callback. And in that callback, we are using the TeplateRef that we're passing to the mesh to get the instance. If I'm doing here, console.log.boxref, I'm gonna do box ref value. You're gonna see that it's undefined in the beginning because it hasn't mounted yet. So if we use a watch effect, and we console.log it again, we can see the actual 3GS instance right here in the console. So this is the primary way you can get a reference for the 3D object that is in the scene on the script tag on your view component. The latest comment is a 45, so let me know if you're still there. You didn't die already? Okay, cool. Awesome, so could you show the code again? Yes, of course. So we have the onLoop method that we're passing the callback. And in the callback, we are returning if we don't have the reference for the value RET, okay. And if we have it, we are modifying the rotation in the X value by increasing it with this offset. To continue with it, I need to explain that this returns two parameters, one is the delta and one is that the elapses, okay. So the delta, think of a delta as the difference between two frames. So it's always gonna be a really a small number here. So whenever you're animating, you can do plus equal and you can pass the delta and it's gonna be exactly the same as we were doing before, okay? So if we refresh here, you're gonna see that it's moving the same way as before. So you don't need to create your own offset, you can have for a smoother animations because your browser, for example, could have or you're a screen store of the MacBook. In this case, I think it runs on 120 frames per second, but some other devices run on 60 frames per second. So to have the same speed in all the devices is better if you use the delta. So if you want to see the actual frames per second, you can import here, use... Actually, we have Cientos, right? So here you can import, use tweak pane, like this. And what we can do, I think with imported is just enough, but less initializes. So I'm going to use the pane, use tweak pane. So this composite, what it does is that it adds this here on the top right. Okay, so this is like some controls, like visual controls that you can tweak your scene and interact with it. And you can see here that it says like 120 frames per second. You probably have a different one, it depends on your device. And this is what I meant before. So this code right here in my device is running 120 times per second, okay? Then we have elapsed. Elapsed is similar, but elapsed is the time elapses since the first animation. So if you remove here or let's add another one, like box ref by the rotation in the Y axis, and instead of using plus equal, you can do elapsed, okay? And then it's gonna have the same effect. So you can see now that it rotates in two axes. So far so good. Let me see those thumbs up. Okay, awesome. From then on, you can do a lot of cool stuff like using trinometry, for example.

So you pass the scene here and you pass the delta is gonna oscillate like top and down. Well, in this case it's the X axis so it's gonna rotate in that, but you can modify all this scale, the rotation and everything, okay? So I think we're cool for the first example. We already animate the cube. Reactivity in the choice, we show how to use a template graph. Ah, yeah, I'm gonna quickly mention that this is not the only one available. You can have also after loop and on before loop. So it's exactly that. Some things in 3DS you need to do it before rendering or after rendering the scene. So with these ones, you can also pass some function to be triggered in that case, okay? Also, you have here some of the examples. For example, the frame per second matter isn't done in that way, okay? Before it renders, we are gonna use in begin and after we're using end. And you have some resources here. So quickly, I'm going to publish the other one so we can continue. If you have any questions, put it on the channel, but I think we are going good. So the next one, and we probably need to resume it a little bit, is gonna be the geometries, okay? So I'm gonna share it with the web. And if you refresh here, you probably gonna have, no, not yet, let's see. Okay, you're gonna have this one, the exercise tree, okay? So when we were doing a cube until now, right? So when you're passing a mesh, the mesh at the end, it combines the structure, which is a geometry. So all the nodes, all the little vertices that forms the object. And the material is how it's gonna look like the color, how reflective it is, and so on. We can set an art stuff rather than the box geometry, okay? So I'm not gonna change the branch, okay? But the idea will be to create another page, okay? So we can create another one here and say, geometries.view. I have a way of like in the snippet that creates a since really fast. And in the router, what you can do is create another route, okay, called geometries, geometries right here. And we're gonna pass this page here, okay? So let's save, go to geometries. And if we put here on our playground on here, we put geometries. We should have an empty one, at least one template or a script. Okay, because we need to save it. So here we have a quite empty scene. So let me know if you manage to create the new route. So we're gonna start with the geometries. So we create a box, geometry before, and we can copy and paste the same one. And we're gonna change the, it should be here, geometries. We're gonna change the one that we're using, right? So another one that we can use is this sphere geometry. And this sphere geometry, when you pass it, it has the following attributes. So it has the radius, the width segments and the height segments, okay? So we can say that there is a radius of two and normally is between 16 and 32. This is how many triangles or how. So we have this sphere, okay, like this is pretty big because we pass an argument. So we have a lot of different like geometries. If you go here to the exercise itself, I pasted each one of them. So we have like a cylinder and I also put the parameters that you need, but like, I'll play with it and pass here instead of a sphere, let's create another one maybe. So let's do Tres mesh again and let's pass the cylinder and let's use the same material, okay? But the problem is that they are gonna be in the same place most probably. Yeah, it's inside of the sphere. So what we can do is reduce the sphere to one or even less and add a position to this one. So let's add like two in the X axis, maybe it's enough. I don't know. If you refresh now you're gonna have it just a side. Okay, so this is the, yeah, the cylinder. So we have a lot of geometries. So if you go here to the documentation map trace, yes or 3ds, you're gonna see all the possible geometries. And the only thing that you need to do, if you want to use, for example, the icon side one here, you only need to prefix it with trace and then check what parameters it pass and you use the arcs property. And that's it, it's gonna work. Let's do this one, for example, the torus geometry, aka the donut. So I'm going to just copy the parameters here and we're going to change our cylinder for a torus geometry and I'm gonna copy and paste the parameters that we have here. And then refresh here and it's actually a huge donut. LOL, I mean the radius of course is huge. So if we do like 0.5 or zero, maybe it's gonna be smaller. Yeah, well, okay, we have a ring. Cool, so you can play with all the geometries and try to watch them. The idea will be that you go here and you basically can play with it. Okay, as an example that I send you in the repository, I think you have several different ones so you can check. So we already have the geometries, right? Let's now continue to textures because this one is pretty interesting. I'm gonna share it. Okay. Now let's go back here, refresh, and it should be available. So exercise four, textures. Okay? So like right now we're using a normal material, right? That is showing some colors depending on the normals and so on. We can load images. So images or textures are just basically PNGs. That's it. Okay? Or a GP image. So to start with it, we could use the same geometries one, or we can go to, let me check the exercises. I think it's better to go to the branch because I already have the image in the public repository.

So I'm gonna force checkout here. Yes, discard all. And now we probably have the geometries and the textures. So if you change the branch and I'm gonna put it on the chat. This is feature, textures, no, exercise for textures, textures with not capital, but the feature with F in like this, okay. And the other thing that I can show you that is pretty cool that I haven't mentioned before is that you can use components as you were using Vue. So I'm gonna remove this component that was already there. Okay and if you're in the textures page, remove the actual component that was there because we're gonna create a new one. So you can group all your objects in a scene in different components as you will do with your normal UI. So here I'm gonna create another one that is gonna be my donut. So for example, let's use donut, okay. And I'm gonna create a small single file template with a script and a diff and here I'm just gonna copy and paste from the index, sorry the experience. I'm gonna copy and paste geometry okay. So I'm gonna copy and paste the crest mesh and I'm gonna use donut, no, donut no. Torus geometry. They should have called it donut because it's a donut not a torus. And but the mathematicians were wrong like they wanted to call it like that. Here I guess it's like 332,100 something like that. Okay. Let's save and if we go to the browser itself, textures. What's happening. Oh, well, of course we are not adding this component yet. So we need to add into the textures page here inside of the suspense. We need to add MyDonut. The application does the auto-import for you. But if you need to import, it imported from the components like this. But it does it automatically for you. You don't need to care about it. And now we can see the donut itself. So let me know if you managed to go this far, like you have the textures page and you have a donut inside of it. Can you see the donut? Yes, I can. So my donut is gonna be a Trez mesh. We can remove the rough. We're not gonna need the rough. And the Trez Torres geometry, we are passing the arguments. So it's gonna be the radius, how thick is the tube, how many segments on the radial and the tubular. Okay, and we're passing Trez mesh normal material. Okay, Sabina is ready. Who else? Okay, we have another thumb up. If we have two more, I continue. Oh, you're fast, okay. I hope it's working and you're not putting in this just to continue. Okay, cool. So there are two ways of doing this. There is the more 3ds way and the more 3ds way is gonna be using the use loader. So const texture, okay, equal to await, let me just do this, use loader, and the use loader, you're gonna import it from the Tress ESCore, but we need the texture loader as well. So we can import it from 3. What we have here and we can console log it actually. So console log, texture, okay? Let's see what we have in the browser. So you're gonna see that we have a texture imported, okay? So we have a node yet with the texture. Use these one, hexagonal, you can check in the public, okay? Here in the public folder where the static assets are, you're gonna have a folder that is hexagonal rock and inside of it, you're gonna have a series of different textures or images. This is the one for the color, okay? It's called base color and you're gonna have some weird ones like this one that looks like a chessboard. This one that looks with purple and so on and the other ones. I'm gonna talk about that in a moment, for now let's just focus on getting the base color which is the texture that we're normally used to and this one, the base color, okay? So since we have it because we are using the weight that they use Loader and we're using the texture loader from 3GS, now let's use a material and pass that to the material. So for that, I'm gonna change that to a standard material which is one of the basic ones and we're gonna use a prop that is called map, okay? So a property called map and we're gonna pass the texture, okay? If we click save and we go here, we're gonna see now that the image has been set to the donut itself, okay? So now the material is no longer a color or a series of color, is actually a texture. So who managed to go this far? I'm gonna put the code here again. Awesome! So we have one person that get Sabina as well. Who else, who else? Give me two more. Okay, Roberto is ready, who else? Nice, perfect, cool. So what happened if, for example, I try to load another one? Okay, and just follow me in this one. So we're gonna add another, which is gonna be the hate map. Okay, or the displacement map. Just follow it, okay. So here we can use the image. This image that has like black and white, okay, this is the one that we're gonna use. So let's go here and set the height, okay. And it's a PNG. Be careful with this one because it's a PNG and not a GPD, okay. And this is standard material. We can pass another property, which is called the displacement map.

Okay. And we're gonna pass the height. Let's Save and see what happens. So now you can see that the donut is completely deformed. And that's because this is using, how we call it? This is using a system that is called PBR, okay. That is physical PBR, physical bias. I know it's often physical rendering, like accurate physical rendering of something like that. What would it be? I don't remember. And what it does is that it fakes the texture of the element by using images. So if you pass the displacement map, it says to it, Hey, whatever you have black colors, I don't know if it's black or white, okay. So it goes in the gray scale. It goes from white to black. So depending how intense is the color, it's gonna be, the vertices are gonna be more displaced. So you can achieve the same as you would do with a really high poly mesh with images. And this is how all the video games in PlayStation 1, PlayStation 2, and Nintendo in the beginning were using textures to imitate like rocks, for example, textures in rocks, they were using this approach. Nowadays there are more approach. You can use more low, like high poly elements, but this is amazing to do things in the web.

We can actually see it a little bit better if we reduce the displacement factor. So there is something about the displacement scale and this is another property that you can pass the material. And let's put something way smaller, like zero dot zero one, something like that. Too small. Maybe zero dot two. Okay, zero dot two is already good. But you can see that in some places we have like vertices that doesn't exist. Like it's breaking the actual mesh. And it's because this is too low poli. If we... Sorry, I got lost. How we can check the actual... Like the triangles that we have. There is a property in all the materials that you can pass which is called wireframe property. So if you pass this property right here, you're gonna now see all the vertices of the geometry. And you can see that some of the vertices has been already modified. It's like... I don't know the word in English, I don't remember. Let's remove it, these two. Okay, and go back here. This is the one for the geometry. So you can see that this one is like... It doesn't have any modification because we are not passing the map. If we pass the map, it's gonna affect all the different vertices of that map, making the geometry looks like it looks now. If you want a better resolution, you can tweak these parameters here. So I will put a way higher resolution. So that's the amount of squares, okay? Of triangles that we're gonna have. If I refresh, now you can see it's way more than before. It's a lot of different triangles. Be aware of it regarding performance because the more triangles you need to render, the more GPU you will use. I'm gonna remove the wire frame for a moment and go back. You're gonna see that now it looks even better and that's because we added more triangles to it. So the more triangles, the better results you're gonna have. The problem as well is that the texture is 1K. To have a better resolution, you will need a 2K, I think, you will need a 4K image to do it. So how many of you reached this point? Yes. Okay, we have one, two. And we have five. Okay, we have three. Amazing. So I'm going to share the next one. If you have any questions, use the Discord, okay? All your questions that you have today, and if I don't get the chance to answer them, please put it on Discord and I will do it this week, okay? So let me go to the next exercise, because, ah no, well, really important. We were using the use loader, but there is another way that we can do this. And we are going to just do this comment, and I'm going to comment the use loader, okay? We can use something that is called use texture, which is a composable that is available on the core. So instead of having to use the texture loader, you can use use texture, okay? And you need to pass an array or an object. If you're passing an array, you can pass exactly the same one here. So it's going to be like this, okay, and we can remove this here. So it's a promise, so a weight, okay? So using use texture, you pass an array of all your maps, okay? The first one is always going to be that vado or the color, and we can see that we have exactly the same as before. If we pass something like this, and say a map, hexagonal like this, not an array, sorry, an object. We need a displacement map like this. So if you pass an object with the property map to the URL and the displacement map to the height one, we are going to have an issue because we need to deconstruct this. So it's going to be the map and the displacement map. This is going to be the map, the map doesn't exist, PBR texture.

Yeah, and it's PBR. Sorry about that. Instead of deconstructing, we're going to use PBR texture, and here, we're going to use pbr-texture.map. For the displacement map, we are going to use PBR texture displacement map. Okay. It's going to complain the type script, but that's fine because you need to set it manually like 3GS with maps is really good. Texture is not defined. Yes, it's not. Okay. So now we have a similar result as before. Okay. By using the use texture. If you pass an array where all the URL's are in the correct order, it's also going to take. Okay.

So let's go to the next exercise. How you doing? It's too fast. Are you enjoying it? Okay. So real quick. In the for one, in the materials, okay? It's exercise five. What you can do is create a new route, which is materials and copy and paste this right here. But this is similar set as before. So maybe we can use the same one because basically what we're going to see is that we were checking the geometries and changing the geometries, but you can also have different kind of materials. If I catch my breath again, maybe I can explain. So I'm going to change here to the five, which is materials, and for checkout, discard all three. And I'm going to go to material's.

So in this one, I'm not going to code that much, but I'm going to show you the different materials that there are. If the same concept, like you can pass different materials here. So you could pass the normal that we used before, basic material, standard or physical material. Okay. I'm just going to show you the difference between all of them. Okay. Is that okay? You can also see the examples and where are the base it on the notion page. Okay. So the most basic one is the basic. Right. And is this one and it's just basically rendering our color. Okay. So you pass a color here. And it will render, but you cannot see shadows. You cannot see any texture whatsoever. Okay. You can try to put it transparent and you can see that it's not going to work. Okay. And you can also check the the wireframe. Okay. And select which side do you want like backside or double side. Okay. And now, if you use the double side you can change the opacity of it. So these are properties that are I'm passing to the actual component. If I go here to materials, okay. Material, tortoise knot. To this one, you're gonna see that I have like a lot of stuff here. This is the controls that I'm using for, for the example. But here we initialize with the material like this. And then we are just taking the reference that we did with the box. Okay. So we're passing the tortoise knot reference. And whenever I change one of them, of the controls and just basically changing the material, for example, for the opacity and doing tortoise knot value material and changing the opacity for the one that the control gives me, okay. So we're getting the reference of the object and just passing, but you could pass this as a properties as well. Okay. My favorite one is actually the tone material because it looks like, a legend of Zelda like the Breath of the Wild, the tone shading. And it's like a shade or like, it's a material that imitates light with two colors or more. Okay. You can set up several properties that make it smaller or not but you can see it now that I have a light in the scene, okay, a fake light. And it's eliminating this side of the torus nod and this side is not getting any, okay? So that's the, how cool is the tone material. Then we have the depth material and I don't think it's going to be visible but if you really zoom to it, this is the one that it tells you how far from the camera the material or the pixel is. So you can see that here is lighter than here and is because this part of the torus is closer to the camera. So this is often used to fake like effects that needs depth because you can tweak how, like if the gradient, for example, you can make something that is transparent if it's too far. So you can only show the first part like do effects and so on, okay? But you see that it doesn't have a color. It's basically a map in a grayscale on how far each pixel is.

Then we have the Lambert one. To be honest, I don't use it that much. And is a material that you saw a diffuse. So it's like the two material, but it's more... Yeah, it's like a radial, right? A gradient and it's a little bit smoother. But it's completely like... It doesn't completely fake. It interacts with the light and it does it by error. It creates like soft shadows and make it a little bit better.

Matcap. Oh yes, the matcap is a special one because matcap is a type of images that you can create. So normally you will create a PNG with the matcap and the matcap will tell the... How do you call it? Like the mesh, how it will look. Do you remember word art in Word that you have different aspects of the text? So it's something similar. It's a predefined image that will affect how it looks. And if you go to the code, you're gonna see that we are using the use texture to get that texture from here. So this is the texture. Let me put it in this screen. This is the matcap texture. So it's basically like this. Here you can see how it affects the highlights and the shadows. And that's where we're passing to the matcap. Let me check where it's used. Here. So if we're selecting the matcap material, we're doing torus.ref.value.material, matcap, and we're passing the matcap. And that's the final effect right here. So this one, for example, is used when you have a lot of instances in your scene, and you want to color them all out without risking performance because light and shadow is the most consumed thing on 3D rendering. So you could have a scene that doesn't have any lights or any shadows, and you can still have this effect. So I have an example in the terrestrial place here in the Playground. It's a 3D text. OK. It's this one. And you can see it's using matcaps all over the place. So all of these donuts actually are using matcaps. It's the same for the 3D text. OK. So far so good.

Any questions until this point? Let me check the time. We're actually on time. So it's 5.30. But I don't know. This is? We're good on time, actually. OK. Nice. Let me check the real quick, the timings that I put. So 5.30. Yeah. We're actually on. We are before the schedule. So we actually managed to go faster. OK. Let's take more time to talk about the materials, then. OK. Do you have any recommendations for websites to get textures from? Of course. There are many of them. I'm thinking. So normally, you will get them from PBR markets. PBR material. So it's this one, textures.com. Ambient CG is also good, because it has a lot of them. This one. But you have to be careful about the copywriting, the licenses. So normally, you want to check for CC0. Materials, for example, here. So you have all kinds of materials. And they all have all the maps. So they have the color, which is albedo. Let's take, there is some rock or something. This one that is like concrete. So this one is gonna have different things.

It's gonna have the color and it's gonna have the height map and probably the ruggedness and everything. So this one is a good one. I can share with you afterwards in the Discord, remind me, or in Twitter, I will pass you some of the ones that I use. Also you can like, download them in 4K, which is pretty cool. Also, we have some assets here and there is a repository on the Tres that is called Tres Assets, this one. And inside textures, you have several of them. So you have clouds, we have environment maps, ones from a haunted house, hexagonal rock, the same that we were using is also here in. We have some map caps as well. So different kinds of map caps inside here. If you wanna play with this exercise, you can use the ones here, okay?

Cool, so let's go back here. We were with the map cap one, then we have the normal material, which is exactly the one that we were using at the beginning. It looks really cool. Some people use it for final production, but it's a real case. And why it goes from color to another color is because when you, how can I explain? This part is hard. Do you remember when you were a kid, those Christmas candies that were like a Santa and inside was a chocolate? Let me see if I can get the picture. So Alberto knows where I'm saying, maybe it's something in Spain only. Chocolate wrap Santa. Okay, so these ones here. Come on. These ones that were like aluminum and it has a Santa. So maybe you haven't, but the overall idea is that when you were taking out the wrapping and you put it on a plane, you will have like a deformed version of that Santa Claus, right? So let's say wrap, plane. No, it's called UBWrap, okay. It's very explained though in this subject. Maybe I will add an explanation. So whenever you have characters or something like that, it's like the wrap of the chocolate, right? And whenever you are working on it or creating an image, it's gonna put it in two dimensions instead of three. So it's gonna convert the three dimensions into a U and a V axis. So the V is a vertical and the U is the horizontal, that's why it's called UBWrapping. And, or this is the best example. So when you have, I'm not showing example, create a var. I was checking in another browser, sorry. I cannot. So when you unwrap the sphere and you put it on a plane it's the same concept. So that's why in this sphere, you can see the different countries in a size and when you put it on a plane like this one, it looks different. So this is UV wrapping and it's because the X and the Y axis. So far so good. There is other examples here. For example, a box, the box is the easiest way because it's like it was a cartoon box that you can fold into one plane. So to create images or baking them into actually characters or materials, you need to UV unwrap them on a blender for example. Things like that. How can I show this better actually? This scene right here is using that principle. So the textures of the scene is actually a 2D map. And if I go, I can show you the actual image I think. This is in the playroom. Let me search for it. So public, models, oceans. And this is going to be, oh well this is a dark. But this is the actual, all the textures that you see on the potions that I show you is this image right here. So it's a 2D image. It's quite dark because the scene is dark. I can show you as well. The map generator. Meme generator. This is the Uv wrap of another model that I have. There is a meme that is the dog meme. And this is the material that is used for it. The first time I was doing this in 3D, I was mind-blown by that. And this color that we have in the material, in the normal material, is basically the representation of the Uv wrap. So that's how it's gonna look in this geometry specifically. If we change the geometry. So let's go to the code, and instead of torus, let's use a sphere right quickly. I'm gonna use like one, 32 and 32. Okay, I will refresh. Ah, well it's not a sphere or not, it's a sphere only. Okay, and I'm using the normal material. You're gonna see that the sphere has a different normal. Okay? So every geometry has a different normal. And whenever you're creating models, you need to create your own normal. That's this one. I'm gonna go back to the previous because I like the component itself, so the torus knot is really cool to show the different ones. We have a fun one, I don't really know to be honest how this work.

I think it recreates highlights. So the other one was faking the shadows and this is faking the highlights. And then we have the physical component and this is the most interesting of them all. The physical and the standard material. The standard material, no, the physical is the same as the standard material but with more options. So I'm only gonna show you one, okay? But this is exactly the same but with more properties for reflections and things. And I don't know if it's visible in the stream, so I'm gonna put another color that is maybe easier. So you see that there are some reflections here, okay? And that's because I'm passing an environment map which is like the surroundings, okay? When you're working with physical rendering like creating physical elements, you can play with the metalness of it. So right now, if I put it completely metallic, you can see that the reflection of the city is pretty clear. I can also play with the ruggedness of it so I could create like a plastic material like this. And you can play with both of them so you can achieve different kind of results. I have another example in the playground for that. And it's the realistic. So whenever you're working with realistic scenes, because it works like Tressils works really well with a low poly but also you can create really realistic scenes.

Okay. So here I have like a model of a pokeball and you can see this is the same environment image that I was using in the other example, but I'm rendering in the scene so you can actually see it. And you can see how he's reflecting on the material itself. Okay. Because this material has a metalness that is higher. This one right here is more plastic, okay? But you can play with it and imitate actual physical properties with this. You can see the sun here is exactly this one here. So it works really cool. And if you look for here in the textures.com you're probably having HDR assets. Polyhaven, this is another one that is really good. Polyhaven. And if you look for H, ah, I never know how to pronounce it. H D R I S. This is exactly what you can use for environment maps. You can load any of them. And this is how it's gonna look in the different objects. So if you have a glass object, it's gonna look like this. If you have a metallic one, it's gonna look like this. But this is a little bit more advanced. I just wanted to show you that it's possible. So you can use the physical material and then just pass the environment map and you will be able to have something like this. If you wanna check in the code, the environment map, the environment map is actually this one here. So environment maps work like a cube and we pass different images, or you can pass one HDR. So this could be like cons and map equal use texture. It's gonna be something like this. And then you can pass, I don't know, sunset, HDR. Okay this is the one that I prefer. This one is way more complicated, okay. But with this one, you can pass environment map and then the way you can pass environment map is here in the material, you can do environment map like this and pass environment map. And it's gonna work, okay. What time it is? Okay, cool. Are you doing fine or you want to have a break? Okay, that's the spirit, cool. Nice.

Okay. Because we have one last, we have like two things that we can, but I also want to show you how to load models into your SCN, which is the coolest thing. So we have until six. I have the time spot incorrect in the page. Oh sorry. So we have one to six and a half, something like that, we're okay.

Okay. So we can go to lights then. I'm going to use the same, I'm not going to change the actual SCN, okay. But you can go, if you want, you can go to this branch here, which is exercise six lights. And it's on our page. That is the light page. Okay. I'm going to publish the page on here. So it should be available right now. I had too many open. This one. Okay. So now if you refresh, you should be able to see this page right here, which is the lights. Okay. I'm explaining to, yeah, just add another row. But now that I'm thinking, let's copy and paste this because it has a different color. So like, and it has the shadows available. So I'm going to copy quickly this one here from the example. And I'm going to go here and probably create another route. Yeah. So I'm going to do like pages, lights.vue. I'm going to paste this here. In the router, I'm going to create another one, which is going to be called lights. Okay. Now in our example, let's go to lights.

Can you show the code now? It is browser. Yes. It's the same code that it was in this page. It's here in the exercise six in an ocean page. But I'm going to show you two. Was this here? So we basically have, we changed the color to have a darkest color in the background. So we are able to see the lights in a better way. We are passing a property to the canvas element which is shadows equal truth. So we are telling the canvas, hey, we want shadows with the lights. Also, we are passing other things, but this is what type of shadow do we want. Then we have a perspective camera, we have the orbit controls as before, we have a plane geometry, which is this one, that is the floor. So normally the plane comes vertically. So you need to rotate the x-axis in 90 degrees, which is equal to MATPY divided by two negative. I always forgot. So what we're going to do is show how lights work. And right now we actually have one light in the scene, which is the ambient light. So let's quickly remove it and see what happens. So if we remove the light, you're going to see that now the material looks completely dark. And that's because some of the materials needs the light in the scene to be able to work. We were using attuned material, and that's one of them, attuned material. If I here for example use a basic material, this one doesn't need the light. It will show the color right away. But if we're using normal, for example it's going to be the same. You're going to be able to see it. So this is the normal. If we use the attune or we use the standard material for example, they need the light to be able to work. So I'm going to go back to the attuned one because it's my favorite, and we are going to add the ambient light back. So right now it's having an intensity of one. So that's basically like how much light it is. And the ambient light is more like omnidirectional light. It's gonna light everything without any direction. Or better saying, it's gonna light everything in every direction whatsoever, okay? But we have different kinds of lights. Let's go back to our... I don't want this anymore here. Let me see if I can remove it. Yes, thank you. I put it under Resources. I put the documentation for 3DS, okay? If we open it, we're gonna see that there are several lights. So there is the ambient light.

There is one called directional light. There is one called hemisphere light, point light, rectangular, and a spotlight. But since we don't have that much time, I'm only gonna show you the most useful one, which is the directional. I need to pick up my daughter, good. Don't worry, it's gonna be recorded. So it doesn't matter, but thank you so much for coming. And I hope you enjoy it and it was good for you. So let me know if you have any questions in the future. Just ping me, okay? Thanks for coming.

Okay, before more people needs to leave, let's go back here and I'm going to use the light. The way we can create the directional light is basically using the component. So my auto-complete already gives me like trace the directional light and you can set a position to it. I'm going to put in on top of the object, okay? So, and also let's add an object in the scene because it's pretty, like empty only with the plane, right? So, trace mesh, let me see what position, normal like this. I'm gonna change instead of normal material, let's use tune as well, okay. And maybe as color, we can use teal. So here you can, I forgot to tell it like as an argument, like a property with color, you can also pass normal CSS colors or you can pass the RGB values right away with X. So we could do something like 008080, okay? Okay, and that should be like a teal color like this one. But I don't like the box. I'm gonna use the torusNod. And it's gonna be like a 0.5, I don't remember. 32, 32, maybe. Oh no, the toOiler was more, was like 100. Okay, so we have a torusNod, but it's like somehow inside of the plane. I don't like that, and it's because I had some position before. So I'm gonna put a like two in the Y-axis, okay? So it's gonna be something like this. No, too little. Let's use four. And maybe increase the size of the plane. So this is gonna be the width and the height of the plane by 20, still the other way. Let's refresh. Okay, we have more space right now, right? What I'm gonna do is that I'm gonna light it. So I'm going to put the light on top of it. So I'm gonna put like something like 10 in the Y-axis and zero. And it has like a lot of intensity and we can change also the color. I'm gonna remove this for a moment. I'm gonna add a color here. So maybe we can add like, I don't know, pink, maybe? So we can pass this like this. And you can see that the light is now pink, right? And it's coming from the top because if we see where the light is in the object, it's coming from the top. So the shadows are actually down, okay? So if we want, for example, to achieve this dramatic look of the terror movies and so on, you can do the other way around. You can add the light in this position, like minus 10. I mean, let's put it closer, like minus four. Okay, and now it's gonna go from the bottom up like this. Like this. Okay, what else can we do with the directional light? We can change the intensities. So if I put something like eight, it's gonna be really bright. Okay, so it's gonna have more effect like the dramatic effect, like this. And maybe I can show you another light. Let me see if I can do it. So we can add tres point light maybe. Yes, position zero, that's our intensity. Let's put like yellow and see if we can see anything. Okay, so now it's in the center of the scene, on the scene, no, it's in the, in exactly the center of where the mesh is, right? So we have the torus geometry So we have the torus geometry and we have the light inside of it, like in the X or the Y axis and you can see how cool the effect is actually. So a point light, this is basically a point, okay? That you can set like, put it anywhere on the scene. And I remember somebody asked about the camera to be visible and you can do the same with the lights, okay? To do that, we can use the ref here and we're gonna use camera ref and just create a camera ref here, ref, or shallow ref. Okay, we need to import them from view. So we have that one and what we can add is a tres camera, helper, and I don't remember what the camera helper had. So we have to pass the camera on, the only argument that we need. So we can pass the camera reference as an argument. So whenever the camera reference has a value, we need to use be if, as it was a normal view component. We are gonna pass the arguments and we're gonna say camera ref. And this hope it works because it's not working for the, no it didn't work. So for some reason, I don't know why, the camera helpers are not actually working. I have an open issue in the library because the helper for the direction on light is also not working. We will do something similar with it, like a cons and you will say a light ref and you're going to create our command is a reference. And there is a component called tres directional light helper. Okay? And this should make visible the camera on the scene. I don't know why it's not working. I had to check it because I just realized it's not working for the camera either but let me look for a 3GS camera helper example. So images, what you normally would see is something like this. It's a video, sorry.

You will see something like this. So it will show you like the projection of the camera and the same for the lights. It's going to show you like visually. Render where the light is located and so on. And it's important for debugging as well. Directional light helper for example, let me see. The directional one is like this. It's going to be a square and you're going to see vector that is telling you where is directed. Like this, this is a directional helper. So normally, in the version one it was working and I probably did something in the version two to break it, I had to check it out, okay?

So everything clear with the lighting. Lighting is a really complex topic. We can also here explain something else, which is the shadows. So shadows are pretty expensive in terms of performance. So you can be mindful about shadows. The way you can enable shadows is by using shadows true to the render. I have a message on the Discord, maybe. Can I use 3DS with a Webpack setup? If you do, have an example for it. So yes, it should work. And no matter what build system are you using, but it's using Vit under the hood. I really recommend you to use it with Vit instead of Webpack. So following with the shadows. So you need to tell the scene and the objects what objects can project shadows and which ones can receive shadows. So I need to tell here to the directional light that it can cast a shadow. So cast shadow is gonna give the directional light the ability to create shadows. But also we need to tell which objects we want to create shadows. So in this case, I'm gonna choose the torus node and I want it to cast a shadow. If we go back here and we refresh, and I broke something, let me see the developer tools. So cannot create properties of onLine. Ooh, oh well, the directional light helper, sorry. I'm gonna remove it. Yes, it was that. You can see that still we don't have any shadow, right? And also probably because it's going up light, right? So let's get back the light to a normal positions, like lets put four, and I don't know, let's move it a little bit on the left, on the right, sorry, and a little bit on the depth, so like 3, 3, 4, 3 maybe. Let's see how it looks. Okay, so now, I don't know if it's visible, but now it's going like this. Okay, in this direction. And let's see if we can cast the shadow. So right now, we're casting the shadow with the torus knot, but we haven't said the plane geometry to receive the shadow, so you also need to tell which objects can receive a shadow. Okay, so if we refresh, now you can see that we have a shadow. So we tell the object itself that it can project a shadow. We told the light itself please project shadows, and then we tell the plane object to be able to receive the shadows. I know it's a little bit complex, but this is because of performance. If you enabled shadows everywhere, and none of the scenes will work, was probably because it is really expensive to add lights to scenes, okay? That's a really important topic that you need to take in mind for the future. The more lights, and the more animations on lights, or like if you change the position of lights and so on, the less performance it's gonna be, okay? And with that, please thumbs up who is ready to continue. Like did you manage to cast the shadow on the scene? Okay, one, two, three. We have two, three. Okay, we have a bug. What happened? That is because it's working or because it didn't? Okay. Misclick, okay, okay. Cool. Oh, something that I can show you that is not in the, because we are good on time. I want to show you something before we move to models. You can use events, okay? Inside of Trez.js is really complicated how it works and Trez.js in general is using something that is called ray tracing. But all you need to know is if you use the normal like click event, okay? And let's put a function on click and here let's say, cons on click. I'm not gonna do anything with the light. Maybe we can change the color of the material if we click it. Let's see if we can do that. So for that, we will need the reference though for this torus not. So we are gonna create cons here which is gonna be the torus not ref equals shallow ref and we are gonna pass it to the Trez mesh. So it's gonna be ref torus not ref, okay? And if we click, we need to know if we have the torus value. If not, it will return. It will not do anything. And if it is, we are gonna change the color. So we're gonna do torus not ref. Actually, let's just console.log it so you can see it, okay? This is also an important part to the book stuff. So right now, we are only gonna console.log the torus not whenever we click on it, okay? Let's refresh. And let's open the console.log. Okay, so if I click, you can see then it's prompting on the console, the instance itself. If I click on the plane, it's not doing anything. If I click on top of that, it's working, right? So we, like Trush.js does everything for you. You don't need to do anything, okay? And here we're going to inspect object itself.

It has a lot of stuff, okay? It has all the children whatsoever. Here we can see the geometry, which is the torus not geometry. Where is the material? Here we can see the material, mis-tuned material, right? So we actually could enter this here and change the color. Let's do that. So we are going to do torus not the value that material and we are going to use new color. So there is a utility on 3DS, which is, oh, I didn't know about this. Maybe this is going to be random. Well, anyway, whatever you put here is going to be the color that is going to receive. So let's try these afterwards. I don't know if it's going to work, actually. So we can pass here like gold, for example. I'll just see if it works. So let's refresh. Okay, we have this, ooh, it disappeared. I click it and it disappears. So this is probably because the color, we're setting the material to vector. So we needed to do color here. I mean, I could say it's magic and it was going to be good as well. So if I click, now it's changing the color, but it looks really bad because we're setting a color, like a basic color. So it's converting this to a basic material again. What else could we do by clicking? Well, this way you can drag, like you can implement drag and drop as well. So that, that will be something that you can do. You can do pointer, enter, and pointer leaf as well. So I'm going to use here like pointer enter. This is like mouse enter, but it works as well in mobile. So whenever somebody enters, like a hovering the thing, or you're using AR, okay? So here in the pointer event, what we are going to do is comes on hover. This uses the same torus not return, and maybe we can set a positive something like that. Torus not ref value material capacity. Maybe we can put it on half, okay? So point to enter and let's apply one on pointer leave. So whenever we leave on leave, okay? And we're going to copy and paste this on leave. Okay. And we are going to set it up backs to one. Okay. Let's refresh. So if we hover, Oh, I click it, sorry. Okay. It's not changing the capacity. So why is that? So why is that? Let's put our break point. So on hover, on here. So it is working, but it's not changing the opacity. Maybe I had to do like opacity set. There are some properties that you need to set them like this. I never remember which ones are. Let's try this. Even if not, I'm going to fail miserably. Yes I'm missing several. So is it is working, but it's not updating the material for some reason. Okay, it doesn't have a set. Well, anyhow, you can see that the function itself work. Sorry about that, but I don't know. Setting the opacity is not working. We could do something similar to this again here to see the example working. So we can say teal, and then, if I go on top, no, what is happening on hover? Is it the same thing? I don't know why it's not working. I have no idea. Like it should change whenever I'm on top. Oh, no. What the? I have no idea what happened. So you can see now that I'm entering again and again, like going out, on going on, and it's working. I have to check because it shouldn't work that way. Something's happening. Let me check in the playground. This is exactly the same example. Oh, no, here it's working really well. I don't know. Weird. Okay, cool. So final part, I think we're ready to go, right? Who's ready for some models? Let me see. If you don't raise your hand, I'm not gonna show you the models, I'm sorry. I need more excitement. That's it.

Good, Sabina. I don't know if there are rest left. I have to go, thanks. Sorry, Danik. Don't worry, check the recording. And if you have any question, just tell me. I'm gonna share really quick the last page of it, and you can actually go to the code here, if you refresh. This page of the model should be available. And this is what we are going to load into Orisin. So what I'm going to suggest you to do is just change to the branch that says feature exercise seven models. Okay, I'm going to just force the checkout. So yeah, this is call everything. I'm gonna close everything so we have a better view. Don't save this, don't save this, don't. Okay. So I'll make sure that you are in this branch because in this branch in the public assets, we're going to have something that is called Aku Aku which is the model dot GLB. We also have a GLTF one. There's the same, but the GLTF doesn't have the textures inside. Okay, this is the one that has everything inside already. Okay. So if we go, there is one page that is called the models, okay. And in itself, it has Aku Aku. You need to wrap it in suspense because inside of the Aku Aku one, you're going to see them here. We have another composite. This is the commented code because you could use the same way as before with the textures. You can use the used loader composable and pass the 3GS ELTF loader. But in this case, we already have a composable in Sientos that does that for you. So I'm going to use that right away. But know that you can also, if you don't want to start Sientos, you can do it with plain 3GS. Okay, with plain 3GS score. Nice. So if we right now save this, okay? And we go here to our scene and let's change light for, I don't know, models. You should be having this scene right here. So this is a 3D character from one of my favorite games in the childhood, which is Crash Bandicoot. And this is the mask that the Crash Bandicoot has. And what this return is also the scene, okay? So it has different properties but first let's take a look of the scene itself, okay? So the scene is gonna be the actual model that you're importing. So when you import the GLTF or the GLB, this is gonna be the structure that is inside of it. And you can see it's a group, okay? It's a group that has all the different things inside. But if you want the different meshes, so for example, the leaf or the eyes, you can also use the nodes property which is gonna give you an object with all of the different meshes that are available on the scene. As well, you can check the materials right here. So you have the material for the Fuchsia leaf which is a standard material, the orange one as well. All of them are basically standard material. The wood, I think it's not. The wood is a physical material because probably it has some reflections, okay? So once we have the scene or the node that we want to apply, I'm going to just remove this real quick, okay? And then I'm going to use the scene. So we're going to use something that is called primitive component. The primitive component is just basically a way of passing an object and just render that object in 3DS. So if I put here, let's say that I create a new perspective camera, this is going to create a new perspective camera. Okay? So this is like the component is that we use in normally in you, the dynamic component that you pass the component here, component name. This is the equivalent in 3DS and it's called primitive. So you need to pass the object that you want to render. In this case, we want to render the scene that we get. So if we do like this and we pass the scene, we're gonna check that everything remains the same. I removed the shadow because I removed some functions there. Right? But you remember that we were using the nodes. Right? So let's say that I want to only render the eyes. So if I add it like this and I refresh, now only the eyes are available in the scene. You see? We can also do the same for the materials. Another way that we could do this, but is not a recommended way, is we can use a TrussMesh. Because at the end, your object model is a mesh. Okay? So we could pass here to the TrussMesh. We could pass the geometry and the geometry will be the scene, the geometry, but let's use the body to ensure that it's not a group, that's important. I'm going to use nodes, okay? And the body, because I know the body is already there. It has a geometry. So a geometry like this is gonna be aquaquacu.geometry. And let's see if it renders anything. So it did render the body, only the wood. But you can understand what I'm saying. Like it's getting the geometry from the aquaquaquabody. And if we want to add the material, we can do something like this. And the material was aquaquaqu.geomtry, no but aquaquaqu.

No, but this is the node. We need materials, and we need materials.wood, I think. Yes, and it will apply the wood material. So you see how different ways you can pass parameters. You could create a mesh for each one of the parts. Create another mesh here and say, instead of the aquaquaqu, nodes are ice, and here I don't know if it's called ice. I don't remember. There's something here. So is it rendering? No, bounding sphere. Okay, maybe there is an issue with the ice. So let's check nodes, ice. It's a group so we cannot pass a geometry. For that case, you can do bevine and just pass nodes, ice, and it will be exactly the same, yes. But they will apply the material right away because this is like passing all the properties in a row, but that being said, I always recommend to use the primitives. So if you use the primitives and you pass the whole body, this is gonna render everything for you. As well as with, we can get the reference here and use the reference, but since we already load the model, we can use it here. Okay? And one trick that you might want to do is that you want it to be able to cast shadows. So there is a property, not a property, no a method in the models that is called traverse, and it's gonna traverse all the children recursively. So it's gonna go to all of them and say, hey, if this is a mesh, please cast a shadow, okay? So this is the same as we were doing before with the direction of light and the mesh that we were putting cast shadow is gonna do exactly the same. And now you can see that it's actually rendering the shadow of the model itself. So this was the final one. How many of you managed to reach to this point? So how many of you have the Aku Aku render? Okay. Very good, nice. Okay, so I don't know how many of you have Twitter, but I will love if you can share a screenshot of this moment right here because congratulation. You managed to load a model into a 3D scene on your view application, and you should be proud of it. So, please share it on Twitter. I'm gonna retweet all of you, okay? You can also put here, Treziias, Bev, this is the account for Treziias, and we are gonna retweet it for you. Okay, so 6 1⁄2, nice. Now, it comes to the fairer part, which is questions, so, any questions, any feedback, is now the time. And anything that you want to know about the library or something that didn't work during the workshop, any questions that you might have. Okay, so from Mitch, when will you not want to cast a shadow on a mesh? So it depends on the kind of a scene that you want to do. So like, if you want to create a really realistic one, you probably want to cast shadows, but it depends really what type of a scene do you want. Also, like what you could do is only casting the shadows on the ones that are visible by the camera and not by the rest of things like that. What about the animations? It is possible in press. So what do you mean about animations? Like model animations? Because we saw how to animate the cube and you can also use Gizup to animate in the render. But if you mean the actually the model animation, you can. Let me go to the documentation. So if you go to the Cientos one, the Cientos is cientos.pressyes.org. This is the one for the Cientos package. The Cientos package is the one that has several abstractions. You will see that there is one called use animations. So this is like impossible that if you pass the animation object from the use gltf, it will allow you to create, it creates a mixer for you and you will be able to change the actions. And I have a example in the playground, which is this one. So this is the use animation one. I had to check why in the first load they're all blank. So you can see that the model is animated, right? It's like saying, hi, I did this in, okay, okay. This is what you mean, right? I created this animation in blender and when you export the gltf, it's gonna export the bones and the animations in between. So with that composite, you can get the different actions and then you can use, for example, the controls to change the different animations here. Okay. I hope that solves your question. If you have any questions regarding the animations, let me know, okay, because it's not an easy topic. Okay, what plans on future releases? Free or not expensive websites with 3D assets? Is this optimized for animation? It is optimized for animations, just like 3DS will be. And like what you normally optimize to make animations is how you support the GLTF. So if you manage to export an optimized GLTF and also something that I forgot to mention, whenever you're using GLTF, this is the compressor. We're using Draco Compressor. So if you pass the Draco Compression property option, it will compress the scene so it's more performant. Same for animations. So, I mean, it will be as, I will show you a real example like maybe this one. This is animated. So this is a GLTF and I'm animating this with GSAP, like everything like the plane and the clouds and the rotation of the planet itself. But you could also do something like this. If you want something more optimized, this is like a particle system that I created to resemble how the galaxy works. So I'm gonna change the color to something brighter, maybe, so you can see it. I don't know if it's really visible, maybe the count of particles or something like that. So let me know if it's visible. This is completely animated. And then I'm animating the shaders on this. So depends on what you want to achieve, you can do it with shaders, but they will be as performant as using plain 3ds. What plans for the future releases? Okay, so I'm gonna show you here. So we have a roadmap for it.

We are now working on the NOX module. So you can already use NOX with it. You can import the component, but we are gonna create, we're gonna do a stream and Daniel and myself, Daniel Rowe, you know him from NOX. We're gonna do one where we are gonna build the actual model. And the idea is that all the imports that you normally do with 3ds is out imported. The same for the compostables. And that as well you can pass an array of all the different packages that you wanted to install. So the good thing about 3ds is that it's an ecosystem, we have the core package, but then we have several other packages. We have the post processing one that allows you to create effects as the same concept like compos, components and compostables. We have the scientos one that you already saw we're going to have a performance one to monitor performance. And the tres leches one is one for controls. It's gonna be like a panel that you can drag and drop and you can see the different things. We're working on the post processing one. So we should release it at the end of July. And then we're going to continue doing like presentational controls in scientos. Some abstraction for scrolling. So you can create a scroll page and it will modify the scene with the scroll. The orbit controls we're going to enhance them. Some camera controls. So this is similar of how video games controls work like first person shooters. People control. This one is already done. The contact shadow is a fake shadow that is way more performant. Is done with shaders. Keyboard controls. And we want to translate the dog. So if you want to contribute, feel free to contribute to this open source. Even if it's only helping in translating to a different language is already a big thing. So in this from July on, we're gonna try to have the documentation for all the packages in several languages. Let me know if you want to contribute. Okay, feel free. And this is more or less like until November, what we have planned, but depending on the priorities, like there are four or five projects that are already using this and Tres YES in production. And depending on what their needs are, we are probably gonna prioritize some things over on our... Okay, but this doesn't end like how hard is to maintain Tres YES? Are there acquired chains big when Tres YES publishes on a date? That's the beauty. So I don't know if you remember a library called TWA. It was the first one trying to do a wrapper around Tres YES for Vue. The problem with that library is that it got unmaintainable because every time it was a manual wrapper. So they created the Vue component for each one of the instance of Tres YES, for all the objects. Whenever it was an update, they needed to update it manually. Three GIS, it has the same approach as a TreTle for a spelled and React Three Fiber for React. It's a custom render. So it uses same render API as Vue. But instead of DOM elements, it creates a scene objects. And whenever you install the core, like when you do PNPM, install Trest.js core, you also need to install the latest version of Three. So it does that for you. You can always have the latest version and it's gonna work because it's only gonna map whatever is inside of the three years map. Of course, there are some breaking changes, like for example, before the release of the version two, three years apply in the version 152. A breaking change on the color management. So suddenly everyone that was using it, it was wrong in like Reactor Fiverr, three years and Trestle were working. So I needed to date some things, but it was easy. It was like, I dunno, two hours or something like that with the PR being processed and then accepted, and that's it. Sure, if you want to know more, feel free to check the core and the Centos. I have to be honest, the core is quite complex because it's really advanced view and advanced tree, but feel free, especially for contributing, Centos package is easier to contribute because our view components and composables, so let me know, okay? What else do we have? Any other questions? Because I think we can make it for today, but yeah, 10 minutes past. Let me know like, do you want to do some more questions or you're ready for today? Okay, I'm fine. Awesome, no questions? Okay, so please share with me like any creation that you do from scratch. I hope it was like understandable. Please provide me feedback because this is the first official workshop that I'm doing about Trusses. So let me know if the timing, the topics, the examples were helpful. Also the GitHub repository, if it was clear enough and the Notion page. Please provide me all the feedback that you want. And I really hope that you learned something new today to how to create the 3DS scenes, and this is the first of many things that you're going to build with Trusses. So whenever you want, we have also the Discord channel for Trusses. So if you have any questions, you can go directly there. It's here in the dots, you can go to the Discord here and it's going to invite you to the Discord channel. Okay. So you can drop there and the community will help you. We also have some showcases like for the community to show their scenes and so on. So that being said, thank you very much. Everyone that joined it today. You're the first ones or having the workshops.