[Link to the course repo](https://github.com/alvarosabu/egghead-tres-3D-product-configurator)

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

Getting Started with the TresJS Product Course Repo

[TresCanvas](https://docs.tresjs.org/api/tres-canvas) 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.

Add a TresCanvas to Your Vue App

Learn how to add a 3D cube to your TresJS scene using the `TresMeshComponent`, `TresBoxGeometry`, and `TresMeshNormalMaterial` components. 

This lesson shows TresJS's declarative approach that makes 3D rendering simpler than using plain Three.js.

Add a Cube to Your TresJS 3D Scene

This TresJS lesson shows you how to transform 3D objects in your scene. You'll learn how to:

*   Adjust an object's position with `TresMesh`'s `position`, `scale`, and `rotation` props   
*   Use the `TresAxesHelper` component to guide object transformations in 3D space
    

Transform TresJS Objects Using Props

This TresJS lesson teaches you the basics of lighting 3D scenes. 

You'll learn how to:

- add ambient lights for overall lighting `<TresAmbientLight />`
- add directional lights for light from a specific direction `<TresDirectionalLight />`
- change light color and intensity using theprops. 

You will also see how materials, such as the `<TresMeshStandardMaterial>`, work with the lights in your scene.

Add Ambient and Directional Lighting to Your TresJS Scene

In this **TresJS** lesson, you'll learn how to **enable shadows** in your 3D scenes. 

We'll cover: 
- the `shadows` prop to turn on shadows
- the `cast-shadow` property for lights
- and the `cast-shadow` and `receive-shadow` properties for meshes. 

You will see how to adjust light intensity, position, and object placement to **control the appearance of shadows**. By the end, you'll understand the key aspects of configuring shadows in TresJS scenes.

Enable Shadows in Your TresJS Scene

In this **TresJS** lesson, we explore how to animate 3D objects in a scene using the render loop. 

We'll cover:

- Using the `useRenderLoop` composable and `onLoop` callback to run code every frame
- Creating refs with `useRef` to reference and modify 3D object properties like position and rotation
- Handling varying device frame rates with `delta` or `elapsed` time for consistent animation speed

By the end of the video, you'll be ready to create smooth animations in your own TresJS scenes.

Animate TresJS Objects with the useRenderLoop Composable

In this **TresJS** lesson you will learn how to use `OrbitControls` from the [@tresjs/cientos](https://cientos.tresjs.org/) package to add interactivity to your scenes by:

- Importing `OrbitControls`
- Adding it below your `TresPerspectiveCamera` component

The `@tresjs/cientos` package is part of the TresJS ecosystem and provides useful abstractions and composables to extend the core framework. 


Use OrbitControls to Interact with your TresJS Scene

This is an overview of the [TresJS project template](https://github.com/alvarosabu/egghead-tres-3D-product-configurator/tree/main/lessons/starter).

The template is styled with the atomic CSS framework, [UnoCSS](https://unocss.dev), 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. 

Project Overview of the TresJS Product Template

In this **TresJS** tutorial, we'll explore how to find and use free 3D models in GLTF format from sites like:

- [poly.pizza](https://poly.pizza/)
- [Sketchfab](https://sketchfab.com/)
- [pmndrs Market](https://market.pmnd.rs/)

We'll then cover using the `useGLTF` composable from `drei-sfc` to load models asynchronously, handling it gracefully with Vue's `<Suspense>` component. 

Once loaded, you will see how to explore the object and get the model node you're looking for. Then, you'll pass that node to the Vue `primitive` component's `:object` prop to render the model. 

By the end of the lesson, you'll be ready to start adding awesome 3D models to your own TresJS projects!

Load Models with useGLTF and the TresJS primitive Component

In this lesson, you'll learn how to create a reactive color selector in Vue using the `useState` composable function. We'll cover:

- Creating a shared state that contains base colors and a selected base color
- Using the `toRefs` utility to convert reactive properties to refs
- Importing and using the `useState` composable in components
- Iterating through colors to create buttons
- Assigning click event handlers to update the selected color reactively

Create a Reactive Color Selector in Vue with useState

In this **TresJS** lesson you will see how to connect a 3D model to your application state. You'll learn to:

- Access your model's material colors using the `materials` property from `useGLTF`
- Use Vue's `watch` function to update the model's colors when the user changes the selection in the UI

This allows you to create an interactive 3D experience that responds to user input.

Connect a TresJS Model with Vue State

There are several components from the `@tresjs/cientos` that you can use to enhance your **TresJS 3D scenes**.

- `ContactShadows` for performant fake shadows
- Wrap models with `Levioso` for subtle floating animations
- Add real HTML markup to your animations with `HTML`

Using these abstractions from `@tresjs/cientos`, you can create polished **3D experiences**.

Create Interactive 3D Experiences with TresJS

Instructor

Course content (13 lessons)

Instructor