Getting Started with the TresJS Product Course Repo

Add a TresCanvas to Your Vue App

Add a Cube to Your TresJS 3D Scene

Transform TresJS Objects Using Props

Add Ambient and Directional Lighting to Your TresJS Scene

Enable Shadows in Your TresJS Scene

Animate TresJS Objects with the useRenderLoop Composable

Use OrbitControls to Interact with your TresJS Scene

Project Overview of the TresJS Product Template

Load Models with useGLTF and the TresJS primitive Component

Create a Reactive Color Selector in Vue with useState

Connect a TresJS Model with Vue State

Enhance Your TresJS Scenes with the @tresjs/cientos Package

Create Interactive 3D Experiences with TresJS

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

Share this video with your friends

Course

Create Interactive 3D Experiences with TresJS