Getting Started with the TresJS Product Course Repo

Alvaro Saburido
InstructorAlvaro Saburido
Share this video with your friends

Social Share Links

Send Tweet

Link to the course repo

Our goal is to create an application that allows the user to customize a 3D product with different color materials visually. The first step is setting up the starter to follow up during the course

In this first lesson, we will download the course repo ‣. The repo is a monorepo containing all the lessons available for this course. When you clone it you are going to find

[00:00] We're gonna dive in on how to create our own 3 d product configurator using Vue and 3rd. Cs. This product configurator is going to showcase a model that we're going to import from Internet, which are, in this case, headphones. Then the end user is gonna be able to modify the [00:19] colors of the materials available on the model. To follow along, you can find the repository link right inside of the lesson description containing all the different lessons in this course step by step as well as a starter template with the bare minimum. This template [00:39] will have all the styles and layout already prepared for you so you can focus only in the 3 d part. Once we open the repository on our Versus Code, the first thing that we need to do is install the packages. To do that, we're gonna use a utility package called NI from ANFO. This one allows you to [00:59] use the right package manager every time, meaning that you don't have to worry about having, NPM or yarn or PNPM or PON. It's gonna take the log file of your project, and it's going to use that package manager. So in this case, you need to run n I in the root, [01:19] and it's gonna install all the packages for you. These packages are gonna be available through the different lessons. To get started with the course, I recommend you to open the starter and run it on the browser. To do that, we're gonna access the folder lessons. And inside of it, we're [01:39] gonna choose the starter. Once we are inside, just use npm run. But for n I, it's n r dev, and then hit enter. If you come and click the link here, it's gonna drag you to the browser where you're gonna [01:59] see that the starter is working correctly. This is a very minimal that you should see.