Add a TresCanvas to Your Vue App

[00:01] Let's add the Tres canvas component into our Vue application. First of all I'm gonna remove the previous code that comes in the starter to focus on the 3 d scene only. Then in the script tag let's import the TressCanvas component from [00:22] the Tress. Js core package. Then in the template let's add the dress canvas and save. We can notice in the browser that now we have a black screen, but fear not because it's actually a good thing. Let's open the [00:41] developer tools and see what we got in the DOM. Inside of the div with id app, we can see a canvas that has a data engine 3gs and the version that is used. This means that the canvas has mounted the renderer from 3gs correctly. Something important to know [01:01] is that the canvas is gonna take the height and the width of the parent. So it could be that you don't see your scene because the parent component doesn't have the correct size. In this case, we have the full width and height because the parent has, but [01:21] if you want to force the press canvas component to occupy the full width and height, you can do so by using the window size property. This prop allows you to do just that. If we refresh, we can see that our canvas is occupying the whole screen. Now [01:41] let's change a little bit the color. As any other view component the trace canvas accepts props. One prop is the clear color, which is basically the background of the render. Let's add a color like this and since it's a string let's remove the 2 dots. If we [02:01] hit save we can now see that the renderer has changed the color.