Project Overview of the TresJS Product Template
This is an overview of the TresJS project template.
The template is styled with the atomic CSS framework, UnoCSS, and comes with a default TresJS scene setup, including:
- a perspective camera
- ambient light
- directional light
There is also a color selector initially implemented using an array of colors and a ref variable for the selected color. Each color is rendered as a circle.
[00:00] For the following lessons, we're gonna make use of the boilerplate provided at the beginning of this course. And which lessons the first one is the starter. So, you're gonna use the model one, which already has some of the components available on the app dot view. So inside of the app dot view [00:20] we have a header, which is this part right here with the logo of airhead. Then we're going to have the Tres Canvas on the left. And we're gonna have the controls for, the colors or materials of our model. Now let's take a quick look to the code provided for this page. So we are using [00:40] a utility class approach for styling. It's similar to Tailwind, but we are using UNO CSS, which is a more flexible and atomic alternative to, Tailwind. So if you want to use it, you can follow in UNO CSS, and you can quickly install it by installing the package UNO CSS. [01:01] And then in your vid dot config dot ts, you can add the plug in for UNO CSS, which contain as well some presets. For example, this one resets and the browser styles and provides some minor, styles. And then we have the icons one, which allows you to use [01:20] icons from icons. Last but not least, you will need to import the virtual file for the UNO CSS styles on your main d s. So you don't have to worry about this because it's all available right away on the template that we provide. So if we go back to the app view, we have a main tag [01:40] and then we have a section on the left with, a minimum height to provide to the canvas. And we are adding the Tres Canvas from Tres ES here on this section. So we provided some minor default, components. So we have the perspective camera in a certain position [02:00] really far from the center. Then we have the ambient light and the directional light as the fall. In the other side, we have an aside tag with, the header and 2 components that are going to serve as the controllers for the colors of the model. So if we inspect one of those, right now they are completely hard [02:20] coded. So we have an array of the different available colors and then we have a ref variable with the current selected one. What we're gonna do is iterate through those colors and create some, circles. Okay? Or buttons, which are gonna be these [02:40] ones right here and a small visual indicator for the current selected color.