Transform TresJS Objects Using Props

[00:00] You can transform the object and modify the properties available on the 3 gs instance by passing props. So similar as any other view component, you can use props. So in this case, we're gonna use the position prop and we're gonna pass some values here. So the position works as [00:20] an array where the first element is the x axis. So if we are gonna translate it in the x axis we can use a value here. Then the second value is the value on the y axis. And the last one is on the zeta or the depth. To be able to visualize [00:40] it better we are also gonna include a really useful component used to trace access helper. This access helper, has some arguments that we can pass. So, args. And it's gonna set a size. If we hit save, now [01:00] we can see that the trace axis helper is in the middle of the scene. So in the position 0, 0, 0. And each one of the lines represent an axis. Being the x axis, the red one, the blue one is the zeta axis, and the green or yellow one is the y axis. [01:19] Also, we can notice that our cube has been translated into 0 dot 5 in the x axis, 1 in the y axis a little bit up, and then minus 1 in the zeta axis. So the equivalent in plain 3 gs will be something like [01:39] this, where we have a mesh, and then we're using mesh dot position dot set, and we're passing the same values. This is how you can transform your cube using props. But not only the position is available to be transformed. [01:59] You can also, for example, transform the scale. So if you didn't modify the arguments in the beginning, you can basically scale your object in different ways. So let's say that we want it to be double the size on the x value. We're going to shrink it a little [02:19] bit on height, and let's keep the same on the depth. Now we can notice that our cube become a rectangle that is double the size on the x axis. Last but not least, let's bring it up a little bit to the center to be able to see it better. Also, I'm going to [02:39] remove the zeta axis and just, translate it on the y. We're gonna use rotation. So rotation also sets the same kind of array. Okay? And the first value is the x. So we're gonna use [02:59] math, pi, which represents a complete turn. And then we're gonna use half the value. For the rest, we're gonna pass 0. So now we can see that we have rotated our cube halfway. We can even do a quarter of it and see how it's rotating on the x axis, [03:19] Meaning that it's rotating using this red line. If we, for example, want to rotate it using the y axis of the yellow one, we can pass a parameter here. You can also pass negative parameters to do it the other way around. So in this case, [03:39] let's do it a third of that turn. And it will look something like this. This is how you can pass certain props to translate, rotate, and scale your trust mesh. It's important that you add those into the trust mesh and not into the trust box [03:59] geometry.