Connect a TresJS Model with Vue State

[00:00] It's time to connect the model to the state that is controlling the colors on the UI controls. So to do so, we're going to go to the headphones. View. And in the same way, we are returning the nodes to render the object with the primitive. The ucldf also provides the materials available on [00:20] the scene. So if we console log this property called materials and we check out our developer tools console, we'll then see an object that contains several, materials. We're gonna focus on the base and the coach material. They're both, mesh standard material, which [00:40] is a special 3 g s material that contains a lot of physical properties, such as, the metalness, the roughness, and some more. Okay? And we have the cush material that is basically the material here, for the ears. Okay? The base one is the one for the plastic [01:00] outside. So we're gonna do use those 2, and we're going to connect them with the state that we just created. So we're gonna take the selected base color, and we need [01:19] to use the user state here. So we're gonna import it from the compostable state, and we're gonna call the function. We're going to do the same for the selected cushion color. Since they are both refs, we're going to use the watch function from you. So instead of [01:39] the, watch function, we're going to use the selected base color. And what we are gonna do is just basically check the current, select the base color that is returning heat on the watch. And we're gonna take the materials, and we're gonna select the one that we want to modify, in this case, [01:59] the vase. We're gonna get the color, and we're gonna use the set method to set the new color inside. If we hit save and we go to the browser, if I change the color here, now you can notice that the color of the plastic that is outside is also changing. [02:19] Let's do exactly the same with the cushion color. So if we go here, let's create another watch. In this case, selected cushion color, and we're going to get the current color here, the current value. And we're gonna say materials, in this [02:39] case, cash, color, set, and this new color. Let's check-in the browser if this is working. So let's select this one, and we can see that, successfully, we're changing also the color for the cushion materials inside.