TresCanvas is a Vue.js component that wraps the Three.js renderer.
It can be imported, added to templates, and customized with props like background color and window size.
[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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!