Load Models with useGLTF and the TresJS primitive Component

[00:00] Next step is to find a model that we want to load into your Tressee SSIN. You can find free models at poly.pizza. They have a bunch of different low poly models that you can choose from, and they're all license free. You can also use Sketchfab, which [00:20] has a larger collection of more quality stuff, but you have to be careful that you select the proper licenses. So in this case, I'm checking for author must be credit and commercial use is allowed, as well as credit is not mandatory. Last but not least, I also recommend PointMendres market. PointMendres [00:40] are the authors of React Refiber, which is the React version of, Tres ES. So here, they have a lot of different quality, models that are free to use, and you can quickly use them on your scenes. They have some pretty cool stuff for creating [01:00] games and such. So I totally recommend you to check it out. In this particular case, we're gonna use an awesome model that I found on Sketchfab. It's made by Tassine, and it's brand like pink headphones. The way you can use it is just, here on Sketchfab, you will have a button that's download 3 d [01:20] model. And if you're already logged in, if not, you will need to register to be able to download. It's gonna tell you, the license. So it's important that you check one model that is, CC attribution for creating the author and that commercial use is allowed. You can also copy the credits. So this [01:39] is really useful because you can copy the credits of the model, artist into your project. Here you have different available options, and we're gonna choose the GLTF one. You can also use the GLP 1. They're politically the same, but this one, has the, textures [01:59] already embedded. So we prefer to use the GLTF 1. You hit download. And since I already have it downloaded, it's available on the project itself. So if you go to public, folder and under models, you're gonna have a folder with the headphones and you're gonna have a [02:19] binary and a GLTF. This is the one contained in your model. Also, I added the license, dot txt with a proper, credit to the out. Always make sure that you, add the license into your repository in case something happens. Now let's jump to the most interesting [02:39] part, which is adding the model into our scene. So we could do it here on the app dot view, but I recommend as a best practice to create a subcomponent for your headphones. So in this case, we're gonna create on our components, a component, that view called headphones and we're [02:59] gonna copy and paste some boilerplate here. So I'm gonna increase a little bit the size. And then inside here, we are gonna use some compostables from tresiacientos. Tresiacientos is the same package that we use for the orbit controls. So what we're going to do is import something called use [03:19] ELTF from Tresiascendos. This composable will allow us to pass a path and retrieve the model that we want to use. So it's using the loaders from 3. Js under the hood. To use it, we're gonna do cons model equal await, [03:40] use yieldf and as the parameters that we are gonna pass, we're gonna pass the path. You can pass 1 string or an array of strings and some options. In this case, we're gonna pass the path. So the path is public, which is already there, some models, and [04:00] then the name of our model. So here is headphones. So headphones and then again, headphones dot glTF. If we want to check out if this already work, what we are going to do is add a console log right away [04:20] here for model to see what is inside. And let's add it to the app dot view. So inside of the Tress Canvas component, we're gonna use view suspense component. Why we are using, this component here? Because we are using an await [04:40] and asynchronous operation inside of the headphones with view, so we need to wrap it with SaaS pens. So we're gonna add headphones here And that's gonna outimport it from the components. So now let's check if something is prompt on the console log. So we go to the browser and right away here [05:00] we can see an object that contains, sort of properties. We can see that it worked because the asset generator is Kronos GLTF Blender, which is the one that loads the GLTF into our scene. We can see that we have some material and some nodes. This part is interesting because it contains all [05:20] the parts that form the model that we're going to use. But we are going to grab one of those, which is the headphones under 7. Why? Because this is the one that contains the whole thing. So the way we can use it is we go back and here, instead of using model, we are going to deconstruct and use [05:40] nodes. Okay? So here let's remove the console log. And what we are gonna grab is the model that is inside nodes. And then we're gonna pass headphones underscore Sam. The way we can add it to our scene [05:59] is by using something special in the Trust CS ecosystem, which are the primitive components. Think of the primitive components as the component is of view that you can pass a dynamic component here and is gonna render. It's gonna do the [06:19] same for, the 3rds. Js, custom render. So if you create a mesh here, okay, like new mesh and then you pass the geometry and the material and you pass it to the object, it's gonna render the mesh. So this is an alternative way [06:39] of programmatically creating the objects in the scene without using the trace as components. So in this case, instead of passing the mesh, we're gonna pass the model directly to the prop object. Let's save and see if we have something on our scene. So as soon as we, click save, we can now see [06:59] that we render our, 3 d model of the headphones right away on our scene. So give yourself a clap in the back because you've successfully load your first model into Tres ES.