Add a Cube to Your TresJS 3D Scene

[00:01] Next step is to add a 3 d cube into our scene. To do so, we're gonna add a trace mesh component. And inside of it, we're gonna pass 2 components via slots. We're gonna use a trace box geometry [00:21] and a trace mesh normal material. If we hit save, we can see now in the browser that has rendered a cube of 1 by 1 by 1 that has a material that visually represent each one of the faces with a different color. That's the mesh normal material. [00:42] But let's dive a little bit on how does this work. So I like to use analogy between HTML CSS with the 3 d object, where the box geometry defines the structure of the cube, such as, like, the width, the height, where the vertices are. This will be like [01:02] the HTML structure. And then we have the material. The material will act as the CSS containing all the different properties, like the color, shininess, even reflections, normal materials, and such, of the object itself. We [01:22] can initialize our instance for the geometry with different arguments. To do so, we're gonna use the arc's property, and this accepts an array. If we check the TypeScript, it accepts an array which the first number is the width, then the height, and the depth. So [01:42] we can create a different shape of cube, more like a rectangle, if we pass these arguments. If we hit save, now we can see that our box geometry has a width of 1. It has a height of 2, and it's 3 units on that. How does this [02:01] work under the hood? If we were using plain 3 gs, it will look something like this, where we are creating any scene using the constructor of the 3 g s name scape and then creating the geometry by using the box geometry like this. Notice that the constructor parameters are exactly the same as [02:21] we are passing to the arguments property on the component. Then we will need to create a mesh with new tree mesh and pass the geometry and material into it. Last but not least, we will need to add the object into the scene. You can now notice [02:41] how easy and declarative is our Trace. Js version, where we are using view components to do exactly the same as we will do in 3 g s, but we let the Trace Canvas handle the whole thing.