Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

[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**.

Enhance Your TresJS Scenes with the @tresjs/cientos Package

This course is for learners just starting out as well as for those who want to get up to speed on Vue 3. You'll learn all the foundational skills of web development in Vue. 

The Beginner's Guide to Vue 3

With Cypress’ component testing, you can now take the best of both worlds. Render components and interact with them in a real browser.

Write, Test, and Debug Vue 3 Components in the Browser Using Cypress

GraphQL is a powerful tool for querying and mutating your data. In this course, we are going to create a Vue3 app that leverages GraphQL to create a dynamic front end. 

Create a GraphQL Powered Vue 3 Application

Create Interactive 3D Experiences with TresJS

https://app.egghead.io/api/v1/lessons/vue-js-getting-started-with-the-tresjs-product-course-repo/subtitles

[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.

https://app.egghead.io/api/v1/lessons/vue-js-getting-started-with-the-tresjs-product-course-repo/transcript

https://app.egghead.io/api/v1/lessons/vue-js-add-a-trescanvas-to-your-vue-app/subtitles

[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.

https://app.egghead.io/api/v1/lessons/vue-js-add-a-trescanvas-to-your-vue-app/transcript

https://app.egghead.io/api/v1/lessons/vue-js-add-a-cube-to-your-tresjs-3d-scene/subtitles

[00:01] Next step is to add a 3 d cube into our scene. To do so, we're gonna add a trace mesh component. And inside of it, we're gonna pass 2 components via slots. We're gonna use a trace box geometry
[00:21] and a trace mesh normal material. If we hit save, we can see now in the browser that has rendered a cube of 1 by 1 by 1 that has a material that visually represent each one of the faces with a different color. That's the mesh normal material.
[00:42] But let's dive a little bit on how does this work. So I like to use analogy between HTML CSS with the 3 d object, where the box geometry defines the structure of the cube, such as, like, the width, the height, where the vertices are. This will be like
[01:02] the HTML structure. And then we have the material. The material will act as the CSS containing all the different properties, like the color, shininess, even reflections, normal materials, and such, of the object itself. We
[01:22] can initialize our instance for the geometry with different arguments. To do so, we're gonna use the arc's property, and this accepts an array. If we check the TypeScript, it accepts an array which the first number is the width, then the height, and the depth. So
[01:42] we can create a different shape of cube, more like a rectangle, if we pass these arguments. If we hit save, now we can see that our box geometry has a width of 1. It has a height of 2, and it's 3 units on that. How does this
[02:01] work under the hood? If we were using plain 3 gs, it will look something like this, where we are creating any scene using the constructor of the 3 g s name scape and then creating the geometry by using the box geometry like this. Notice that the constructor parameters are exactly the same as
[02:21] we are passing to the arguments property on the component. Then we will need to create a mesh with new tree mesh and pass the geometry and material into it. Last but not least, we will need to add the object into the scene. You can now notice
[02:41] how easy and declarative is our Trace. Js version, where we are using view components to do exactly the same as we will do in 3 g s, but we let the Trace Canvas handle the whole thing.

https://app.egghead.io/api/v1/lessons/vue-js-add-a-cube-to-your-tresjs-3d-scene/transcript

https://app.egghead.io/api/v1/lessons/vue-js-transform-tresjs-objects-using-props/subtitles

[00:00] You can transform the object and modify the properties available on the 3 gs instance by passing props. So similar as any other view component, you can use props. So in this case, we're gonna use the position prop and we're gonna pass some values here. So the position works as
[00:20] an array where the first element is the x axis. So if we are gonna translate it in the x axis we can use a value here. Then the second value is the value on the y axis. And the last one is on the zeta or the depth. To be able to visualize
[00:40] it better we are also gonna include a really useful component used to trace access helper. This access helper, has some arguments that we can pass. So, args. And it's gonna set a size. If we hit save, now
[01:00] we can see that the trace axis helper is in the middle of the scene. So in the position 0, 0, 0. And each one of the lines represent an axis. Being the x axis, the red one, the blue one is the zeta axis, and the green or yellow one is the y axis.
[01:19] Also, we can notice that our cube has been translated into 0 dot 5 in the x axis, 1 in the y axis a little bit up, and then minus 1 in the zeta axis. So the equivalent in plain 3 gs will be something like
[01:39] this, where we have a mesh, and then we're using mesh dot position dot set, and we're passing the same values. This is how you can transform your cube using props. But not only the position is available to be transformed.
[01:59] You can also, for example, transform the scale. So if you didn't modify the arguments in the beginning, you can basically scale your object in different ways. So let's say that we want it to be double the size on the x value. We're going to shrink it a little
[02:19] bit on height, and let's keep the same on the depth. Now we can notice that our cube become a rectangle that is double the size on the x axis. Last but not least, let's bring it up a little bit to the center to be able to see it better. Also, I'm going to
[02:39] remove the zeta axis and just, translate it on the y. We're gonna use rotation. So rotation also sets the same kind of array. Okay? And the first value is the x. So we're gonna use
[02:59] math, pi, which represents a complete turn. And then we're gonna use half the value. For the rest, we're gonna pass 0. So now we can see that we have rotated our cube halfway. We can even do a quarter of it and see how it's rotating on the x axis,
[03:19] Meaning that it's rotating using this red line. If we, for example, want to rotate it using the y axis of the yellow one, we can pass a parameter here. You can also pass negative parameters to do it the other way around. So in this case,
[03:39] let's do it a third of that turn. And it will look something like this. This is how you can pass certain props to translate, rotate, and scale your trust mesh. It's important that you add those into the trust mesh and not into the trust box
[03:59] geometry.

https://app.egghead.io/api/v1/lessons/vue-js-transform-tresjs-objects-using-props/transcript

https://app.egghead.io/api/v1/lessons/vue-js-add-ambient-and-directional-lighting-to-your-tresjs-scene/subtitles

[00:01] Let's add lights into our 3 d sine. But before we do that, we need to change the material of our cube because some materials are affected by lights and others don't. And that's the case of the normal material that we are using right now. It's also the case
[00:21] of the basic material. If I change here and then add a color like teal, we can notice that our cube right now has a material that is completely plain because it only has this color, but it doesn't react to any light. If we change here
[00:41] to another material, so standard, we can notice now that the cube is completely black. And that's because we don't have a light on our scene. So let's add 1. Just below the Tres mesh, let's use tres ambient light
[01:02] and click safe. Right now, we're applying a light that is omnidirectional. That's the ambient light. It means that goes in all the directions and doesn't have any specific point like for the source of the light. So that's why we can see now that the cube gained some color because
[01:22] we illuminate a little bit of the scene. To better demonstrate how you can configure the ambient light, let's change the background color to a black color. Because right now the color is too bright and it kinda look like we have another light in it. Now that we have the the dark background, we can go to the ambient light.
[01:42] And as any other instance in Fresenius, you can pass a prop called arcs with the arguments of the parameter. So here we can pass a color as a color representation. So it will be the color of the light and then the intensity. So how strong is the light on
[02:02] your scene? So because the the full one is white, let's change the color to yellow. Here, you can pass CSS variable colors or you can pass a hex color like this. So in the case of yellow, I don't remember, it was green and blue, I think.
[02:22] And you can also pass a variable like new color as a color representation from 3. Js. In this case, let's just put yellow. So the second parameter is intensity. The default one is 1, so let's put 2, and let's hit save. So now we
[02:42] can see that the color of our cube has changed because we actually changed the light. So the light color is different, and it makes it look less teal and more green. Let's now add a different light, which is the directional light. To do so, we're gonna set up this color of the
[03:02] ambient light back to white to not interfere with the directional light. So to add a trace directional light, we can do it the same way. Just trace directional light and of now I'm going to leave the default. So now we can see that the top part of our cube
[03:22] is being illuminated. That's because the directional light is on the top here. We can modify the position and transform its origin to a different place. So let's say that we want to illuminate the, right part of our cube here in the positive
[03:42] part of the x axis. To do so, we're gonna set the position to 2 on the x axis, and let's keep it as 0 and 0 in the other axis. Now we can see that the illuminated part is this one right here. Let's customize our directional light. So, to be able to
[04:01] see it better, I'm gonna change the color of the cube to white. And then let's change the color and intensity of our directional light. To do so, we are going to use props. So the first prop is going to be the color. And in this case, I'm going to use
[04:21] purple. With intensity, let's choose 3 for now. So now we can see that this side of the cube that was illuminated now changed the color. So the more intensity we add here, the brighter the color is gonna look like reflecting on the material.
[04:43] Let's change here to cyan, for example, to see another color.

https://app.egghead.io/api/v1/lessons/vue-js-add-ambient-and-directional-lighting-to-your-tresjs-scene/transcript

https://app.egghead.io/api/v1/lessons/vue-js-enable-shadows-in-your-tresjs-scene/subtitles

[00:01] Where there is light, there are also shadows. So how can we enable shadows into our scene? 1st, let's add another object to be able to see how the shadows are casted. In this case, I'm gonna add a trace mesh with a plain geometry. This plain geometry is
[00:21] gonna be of size 10 by 10 as we pass on the arguments. Notice as well that we pass a mesh standard material similar to the cube and that we needed to rotate the plane by 90 degrees, which is minus matte dot pi
[00:40] divided by 2. Matte pi is gonna be 180 degrees. If we don't do that, it's gonna look like this. So make sure you'd rotate on the x axis to have our floor. But something is strange, and it's that we don't
[01:00] see any shadow being casted. Maybe it's because our directional light is here on the x axis, and it doesn't have enough height. So let's remedy that and add some height to our directional light. Now we can see that the top of the cube and also the right part are mini
[01:20] illuminated, same as the floor, but there is no shadow inside. That's because in 3 g s, shadows are disabled by default because it's a really expensive operation in terms of performance. So we need to explicitly tell the Tres Canvas to be able to
[01:40] cast and receive shadows. To enable shadows on our 3 d s scene, we need to pass a prop to the Tres Canvas component to call shadows. If we hit save, we will notice that nothing happens. And that's because in addition to that, we need to tell the scene
[01:59] which light sources can cast shadow, and as well, we need to tell which objects can cast and receive shadows. In this case, we want to project a shadow of the cube into the floor. So to do that, let's go to the light source here. And, actually, I'm going
[02:19] to reduce the intensity because I think it's too strong. Okay? So now we are gonna pass here a cast shadow property. This is gonna tell the directional light that it can cast shadows on objects. Next,
[02:39] let's take the cube and do the same. Cast shadow. And, now, let's decide which one is the one that is gonna receive the shadow, which is gonna be the floor. So in the truss mesh and, remember, you need to add it to the mesh and not to the geometry itself because it won't work. So here, we are gonna
[02:58] use receive shadow. If we hit enter and we refresh, now we can see that we have a shadow that is being projected from the light source into the floor. I just added a sphere into our scene to demonstrate how, shadows interact between different,
[03:19] objects. So, I move a little bit directional light to be able to cast from here. Okay? And now our our sphere geometry is not casting any shadow. Right? So if we want it to cast a shadow, we need to remember to use cast shadow here. Right? So we do so
[03:39] now it's gonna overlap the shallow because it's in this like, in the same direction. So maybe we can move a little bit the mesh, I don't know, like, minus 2 on here. Okay? In this attack, you can see now that it's illuminating in somewhere else. K? We
[03:58] could even modify with the directional light and say, okay. Let's move it a little bit, in in the zeta axis here. So now we can see, like, the 2 shadows being cast. But one of the shadows is not being casted on the other object, which is this
[04:18] one. I'm gonna give a color to that box, so we can differentiate the floor on the floor. So I'm gonna say, like, gray. Okay? And, let's put this directional light back here. I want to cast the shadow of the sphere on top of the cube itself.
[04:38] So to do that, we can also, at the same time that we're casting a shadow, we can also receive a shadow. So we are gonna go to the box geometry here and say, hey. I want to be able to receive shadows as well. And you can see that it goes completely dark because the, sphere
[04:58] is blocking the source of light. Let's move a little bit light. So I don't know. Let's put it a little bit higher maybe to see if there is a difference. And you can see that in this part here maybe I need to zoom a little bit, so let's change the position of the camera. In the top, we can see the shadow
[05:18] of the sphere being casted on our cube, and our cube is also projecting a a shadow into the floor. And this is how we can control how the lights and shadows interact into our scene.

https://app.egghead.io/api/v1/lessons/vue-js-enable-shadows-in-your-tresjs-scene/transcript

https://app.egghead.io/api/v1/lessons/vue-js-animate-tresjs-objects-with-the-userenderloop-composable/subtitles

[00:01] To animate our cube inside of the Trust CS scene, first, we need to understand how the render loop works on over the hood. So to do that, I present you mister Egghead. So what is happening in the render is that it's taking a snapshot
[00:20] of your scene like this. So the first frame is gonna be mister egghead like this. And then a moment later, we're gonna render a frame 2. In this frame 2, we are modifying a
[00:40] characteristic of our egg head, character. So in this case, let's make it go up a little bit the hand. So it's moving a little bit. And then we are taking another snapshot, and we call it frame 3 where the hand is a
[01:00] little bit up. So how, the render loop works under the hood is that it's taking a snapshot of your scene with the movement of the character of your 3 d object in something that we call frames per second.
[01:21] So frame rate is typically a state as the frequency rate in which consecutive images or frames are captured and displayed. In this case, rendered by the 3 g s render. This image right here exemplified the difference between a lower frame rate versus a higher one. In the higher one, you can
[01:40] observe that we have more data to construct an animation. So this animation will be smoother just by the amount of data that we have into. You probably heard before, the term frames per second because it's commonly used in cinema, for example, when the common rate is 24.
[02:00] Also, in gaming, you can hear players using 120 frames per second, and sometimes also free 60 frames per second in the browser. So it also depends on the frame rate or refresh rate of your monitor. For example, in my laptop right
[02:20] now, I'm rendering at 120 frames per second. To be able to access the callback that is trigger every frame per second on our, we're gonna use a composable that is available on the core package called use render loop. The way we're
[02:40] gonna use it is we're gonna deconstruct the object that is returned, and we are gonna access a method called on loop from the use render loop. This method is gonna set one parameter, which is the function of the callback. So inside here is where our
[02:59] animation is gonna live. But first, we need to decide which property of our object we want to animate and also get the reference from that object. For that, we are going to create a ref using view ref. So it's gonna be box ref ref, and we need to import
[03:19] this from view. K. So this variable here will hold the reference from the 3 g s instance that is created and mounted on the custom render. So we need to pass a property called ref here and just pass the box ref. To see that it works, we're gonna
[03:39] use watch effect. So watch effect is just a method that allows you to trigger an action when the reactive object has changed. So in this case, we're gonna do a, simple console log, and we're gonna put box ref dot value. So hit save, and
[03:59] then we're gonna toggle the developer tools and see what we have inside of the console. So here we can see the prompt of the mesh object, okay, that is initialized here and passed as a template graph. And we have access to certain properties that we could animate, like the position and the rotation right here. So let's just do
[04:19] that. We're gonna go here to the code. And in the on loop, we're going to ask if the box ref exist. Okay? So if box ref value doesn't exist, just return. But if it does, let's take the box ref value,
[04:39] and we're going to modify or animate the rotation in the y axis. So we're gonna use an arbitrary number for now, and we should use a small number because think that this has been triggered 120 frames per second, meaning that it's gonna be quite fast. So if we put the, bigger number, it's not
[04:59] gonna be visible. So if we hit save, now we can see that our cube is rotating, counter clockwise, okay, in the y axis. So, we have succeed. It's working. There is a problem by using a hard coded value here. And is that depending on the frame rate of the device of the your user,
[05:19] the animation speed is gonna be different from a device that is more performant to one that is less. So to avoid that, we are going to remove this value here, and we are going to use a property that is being returned it, on the on loop callback called delta. So
[05:39] delta is basically the time that has passed between one frame and the last one. So this allows you to standardize or, like, maintain a stable no matter what the device frame rate is. So it's always going to rotate at this speed. Another property that we can use
[05:59] is elapsed. So elapsed works similar to how the delta works. But instead of using the time between 2 frames, it's using the time since the animation start. So let's rotate the zeta axis here. And instead of
[06:19] using the plus equal sign, let's use equal. So now the cube is gonna rotate in 2 different axis and is going to use the delta for, the y axis and the elapsed time for the.

https://app.egghead.io/api/v1/lessons/vue-js-animate-tresjs-objects-with-the-userenderloop-composable/transcript

https://app.egghead.io/api/v1/lessons/vue-js-use-orbitcontrols-to-interact-with-your-tresjs-scene/subtitles

[00:00] Let's add a little bit of interaction to our scene. Because right now, if we click and we try to move around the 3 d scene, we are not able. Because right now, it's only a render. So to do this, we're gonna import something that is called orbit controls. But we're gonna import it from a different
[00:20] package, which is called Tres EScientos. This package is part of the ecosystem, and it gives a lot of abstraction and compostables that you can extend the developer experience and the functionality of the core. So it comes from the word, which it means 100 in English.
[00:40] K? And the idea is that it covers a lot of different abstractions, like, for example, text 3 d. We have fill FBO or frame buffer object, and we have the orbit controls right here. So different from what we have right now that we are using components
[01:00] that has the trace prefix. Everything that you, get from the Tresia sientos and another packages of the ecosystem, it doesn't have the prefix. K? So the way we're gonna use it is just below the TRES spectate camera, we are gonna add orbit controls.
[01:20] If we hit save, now we can move around by clicking and zoom in, zoom out from the scene by using the orbit controls. The orbit controls is just an abstraction that modifies how the camera is handled and add these event listeners so you can
[01:40] navigate through.

https://app.egghead.io/api/v1/lessons/vue-js-use-orbitcontrols-to-interact-with-your-tresjs-scene/transcript

https://app.egghead.io/api/v1/lessons/vue-js-project-overview-of-the-tresjs-product-template/subtitles

[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.

https://app.egghead.io/api/v1/lessons/vue-js-project-overview-of-the-tresjs-product-template/transcript

https://app.egghead.io/api/v1/lessons/vue-js-load-models-with-usegltf-and-the-tresjs-primitive-component/subtitles

[00:00] Next step is to find a model that we want to load into your Tressee SSIN. You can find free models at poly.pizza. They have a bunch of different low poly models that you can choose from, and they're all license free. You can also use Sketchfab, which
[00:20] has a larger collection of more quality stuff, but you have to be careful that you select the proper licenses. So in this case, I'm checking for author must be credit and commercial use is allowed, as well as credit is not mandatory. Last but not least, I also recommend PointMendres market. PointMendres
[00:40] are the authors of React Refiber, which is the React version of, Tres ES. So here, they have a lot of different quality, models that are free to use, and you can quickly use them on your scenes. They have some pretty cool stuff for creating
[01:00] games and such. So I totally recommend you to check it out. In this particular case, we're gonna use an awesome model that I found on Sketchfab. It's made by Tassine, and it's brand like pink headphones. The way you can use it is just, here on Sketchfab, you will have a button that's download 3 d
[01:20] model. And if you're already logged in, if not, you will need to register to be able to download. It's gonna tell you, the license. So it's important that you check one model that is, CC attribution for creating the author and that commercial use is allowed. You can also copy the credits. So this
[01:39] is really useful because you can copy the credits of the model, artist into your project. Here you have different available options, and we're gonna choose the GLTF one. You can also use the GLP 1. They're politically the same, but this one, has the, textures
[01:59] already embedded. So we prefer to use the GLTF 1. You hit download. And since I already have it downloaded, it's available on the project itself. So if you go to public, folder and under models, you're gonna have a folder with the headphones and you're gonna have a
[02:19] binary and a GLTF. This is the one contained in your model. Also, I added the license, dot txt with a proper, credit to the out. Always make sure that you, add the license into your repository in case something happens. Now let's jump to the most interesting
[02:39] part, which is adding the model into our scene. So we could do it here on the app dot view, but I recommend as a best practice to create a subcomponent for your headphones. So in this case, we're gonna create on our components, a component, that view called headphones and we're
[02:59] gonna copy and paste some boilerplate here. So I'm gonna increase a little bit the size. And then inside here, we are gonna use some compostables from tresiacientos. Tresiacientos is the same package that we use for the orbit controls. So what we're going to do is import something called use
[03:19] ELTF from Tresiascendos. This composable will allow us to pass a path and retrieve the model that we want to use. So it's using the loaders from 3. Js under the hood. To use it, we're gonna do cons model equal await,
[03:40] use yieldf and as the parameters that we are gonna pass, we're gonna pass the path. You can pass 1 string or an array of strings and some options. In this case, we're gonna pass the path. So the path is public, which is already there, some models, and
[04:00] then the name of our model. So here is headphones. So headphones and then again, headphones dot glTF. If we want to check out if this already work, what we are going to do is add a console log right away
[04:20] here for model to see what is inside. And let's add it to the app dot view. So inside of the Tress Canvas component, we're gonna use view suspense component. Why we are using, this component here? Because we are using an await
[04:40] and asynchronous operation inside of the headphones with view, so we need to wrap it with SaaS pens. So we're gonna add headphones here And that's gonna outimport it from the components. So now let's check if something is prompt on the console log. So we go to the browser and right away here
[05:00] we can see an object that contains, sort of properties. We can see that it worked because the asset generator is Kronos GLTF Blender, which is the one that loads the GLTF into our scene. We can see that we have some material and some nodes. This part is interesting because it contains all
[05:20] the parts that form the model that we're going to use. But we are going to grab one of those, which is the headphones under 7. Why? Because this is the one that contains the whole thing. So the way we can use it is we go back and here, instead of using model, we are going to deconstruct and use
[05:40] nodes. Okay? So here let's remove the console log. And what we are gonna grab is the model that is inside nodes. And then we're gonna pass headphones underscore Sam. The way we can add it to our scene
[05:59] is by using something special in the Trust CS ecosystem, which are the primitive components. Think of the primitive components as the component is of view that you can pass a dynamic component here and is gonna render. It's gonna do the
[06:19] same for, the 3rds. Js, custom render. So if you create a mesh here, okay, like new mesh and then you pass the geometry and the material and you pass it to the object, it's gonna render the mesh. So this is an alternative way
[06:39] of programmatically creating the objects in the scene without using the trace as components. So in this case, instead of passing the mesh, we're gonna pass the model directly to the prop object. Let's save and see if we have something on our scene. So as soon as we, click save, we can now see
[06:59] that we render our, 3 d model of the headphones right away on our scene. So give yourself a clap in the back because you've successfully load your first model into Tres ES.

https://app.egghead.io/api/v1/lessons/vue-js-load-models-with-usegltf-and-the-tresjs-primitive-component/transcript

https://app.egghead.io/api/v1/lessons/vue-js-create-a-reactive-color-selector-in-vue-with-usestate/subtitles

[00:00] Now that we successfully load our model into a scene, it's time to make it interactive with the UI controls. If you notice, if now, if you change the colors, there is no change on the materials of the model. That's because the base color dot view component have the colors hard
[00:19] coded. So what we are gonna do in this lesson is just basically create a state to be able to share the component between the view, UI control, and the model itself. So to do that, we are gonna go to the source, and we're gonna create a new folder called composites.
[00:40] Inside of this folder, we're gonna create a new file called state dot ts. And inside of here, we're gonna import reactive from view. So what we're gonna create is a local state.
[01:00] To do that, we're gonna create a function. So this is gonna be our composable. It's called use state. And this is gonna return some. It's gonna return a state. So we can create the state by using a reactive
[01:21] object. And instead of this reactive object, we are going to take these 2 parameters. So this is gonna be the base color and the selected base color. So we're going to copy the color right here into the
[01:40] state to pick the selected color. And this array right here of the available colors for the base, like this. We're missing a comma here, and then we're gonna return the state here. But instead of returning
[02:00] the reactive object, what we are gonna do is use a utility from view called torefs. So what this is gonna do is gonna take all the properties inside of the reactive, and it's gonna convert it into refs. So what we're gonna do here is torefs,
[02:20] and we are gonna spread it, and we're gonna pass the state here. Next step is to connect the UI controls of the base colors with our state. So we're gonna go to base color dot view, and we're gonna remove all the hard coded colors
[02:40] inside of the component. Now let's import the compostables. So use a state from composables state. Then we're gonna deconstruct the properties that we need, which is the base colors array and the selected base color.
[03:00] Equal use state, and we call the function. To make sure we're receiving what we need, let's do a console log of the base colors and the selected base color. Now let's check the console log in our browser. So if we go here
[03:20] to the developer tools in the console, we're gonna see the prompt for the object containing 2 refs. The base color array, which contain all the available, colors, and the selected base, ref for the current selected one. To observe better what is gonna happen when we change color, let's use the
[03:40] view developer tools. So if we select the base color component here and we expect it, we're gonna see that it has the base color array and the selected color right here. So take a good look here while I change the colors. If you change here, you're gonna notice that the ref of the selected base color is changing.
[04:00] This is because in the code, we have made a iteration through all the base colors and then create some buttons with it. We are gonna assign an event handler, for click event on the buttons, and we are going to set the color to the selected base color.
[04:19] Next step is to repeat the exactly same procedure but with the cushion colors UI control. So we're going to copy this color for here into our state in a similar fashion as we did with the base color. So here we have all available colors in an array for the cushion as well as the current selected color.
[04:40] So let's hit save, and let's refactor the cushion colors to use the state as well. So we're gonna import the use state from the composables, and then we're gonna deconstruct the, cushion colors and the selected cushion color
[05:00] Equal to use state. Let's quickly check it on our view dev tools. So if we select the cushion colors, we're gonna have the state right here. And if we change it, we're gonna notice that the select equation color is also changing.

https://app.egghead.io/api/v1/lessons/vue-js-create-a-reactive-color-selector-in-vue-with-usestate/transcript

https://app.egghead.io/api/v1/lessons/vue-js-connect-a-tresjs-model-with-vue-state/subtitles

[00:00] It's time to connect the model to the state that is controlling the colors on the UI controls. So to do so, we're going to go to the headphones. View. And in the same way, we are returning the nodes to render the object with the primitive. The ucldf also provides the materials available on
[00:20] the scene. So if we console log this property called materials and we check out our developer tools console, we'll then see an object that contains several, materials. We're gonna focus on the base and the coach material. They're both, mesh standard material, which
[00:40] is a special 3 g s material that contains a lot of physical properties, such as, the metalness, the roughness, and some more. Okay? And we have the cush material that is basically the material here, for the ears. Okay? The base one is the one for the plastic
[01:00] outside. So we're gonna do use those 2, and we're going to connect them with the state that we just created. So we're gonna take the selected base color, and we need
[01:19] to use the user state here. So we're gonna import it from the compostable state, and we're gonna call the function. We're going to do the same for the selected cushion color. Since they are both refs, we're going to use the watch function from you. So instead of
[01:39] the, watch function, we're going to use the selected base color. And what we are gonna do is just basically check the current, select the base color that is returning heat on the watch. And we're gonna take the materials, and we're gonna select the one that we want to modify, in this case,
[01:59] the vase. We're gonna get the color, and we're gonna use the set method to set the new color inside. If we hit save and we go to the browser, if I change the color here, now you can notice that the color of the plastic that is outside is also changing.
[02:19] Let's do exactly the same with the cushion color. So if we go here, let's create another watch. In this case, selected cushion color, and we're going to get the current color here, the current value. And we're gonna say materials, in this
[02:39] case, cash, color, set, and this new color. Let's check-in the browser if this is working. So let's select this one, and we can see that, successfully, we're changing also the color for the cushion materials inside.

https://app.egghead.io/api/v1/lessons/vue-js-connect-a-tresjs-model-with-vue-state/transcript

https://app.egghead.io/api/v1/lessons/vue-js-enhance-your-tresjs-scenes-with-the-tresjs-cientos-package/subtitles

[00:01] Last but not least, we're going to enhance our 3 d scene with some tips and tricks in terms of staging because right now, it looks kind of plain. So the first thing that we're going to add is some shadows to our model. To do that, we're gonna go to the app dot view. And from the same package that we import the
[00:20] orbit controls, we're gonna import an abstraction called contact shadows. This abstraction is special because we could do the shadows in different ways. We could use it the same way as we saw in the lesson for lighting and shadow. But since lighting and shadow is an expensive operation, we can use a
[00:40] technique that basically fakes the shadows into the scene. And that's what the contact shadows does. So just below here, we are gonna paste a contact shadows component and we're gonna pass a prop called opacity at 0.2, some blur, and
[01:00] a position. Something that you need to be careful with is that these components use a camera. So the camera needs to be first in order to work. So to avoid any issues, I'm going to add the perspective camera just at the beginning of the press canvas. If I hit save and go back
[01:20] to my scene, now you can see that there are some shadows just below the model. They're really subtle and they are really performant. Next step is to make this move. And to do that, we're gonna use another technique that involves an abstraction called levioso. So we're gonna go to
[01:40] our component. And this one, we're gonna apply it directly to the headphones. So here, we're gonna import another abstraction, which is called Levioso. And the way we use it is just wrap the component that we want to make it float with the Livioso component. This way.
[02:00] So we hit save and we go back and restart. Now we can see that there is movement, like a really subtle movement of floating to our object. You can also realize that the shadows right here are adapting to that movement. This is a subtle change, but it looks so good in the final touches.
[02:19] We could go the extra mile and make it even fancier. Let's add a price tag inside of the 3 d sine. To do that, we also have another extraction on Cintas package called HTML. This abstraction allows you to add HTML inside of the 3 d sine by faking the,
[02:40] effect. So inside of Levioso, we're gonna add the HTML. Okay? And we need to pass to, props. We need to pass transform. We'd make it, transform with the object that you're using. So in this case, since we are using
[02:59] Levioso, it's gonna adapt to the movement of Levioso. And let's set a position. So I already tried a position, and this one is the one that make the looks better. Okay? So just trust me. Let's put 0 here and 2. Okay? What is important is what we are gonna
[03:19] add inside here. So we're gonna add a span tag. Okay? And we're gonna add the price. So since these are Egghead headphones and it's the first time that we're gonna launch them, let's put a nice price tag on it. So if I hit save and I go back here, now we
[03:39] can see that the HTML is being rendered here. And it's actually HTML because you can even select it. But it looks kinda ugly. So let's add some utilities into it to make it better. And I'm gonna go, on how the utilities work. These are the uno CSS, but it's basically a background, some font styles, and
[03:59] make it round. So if I hit save, now we have a fancy price tag on our object that make it even cooler. Congratulations. You managed to create your first three d product configuration using Trez. Cs and Vue.

https://app.egghead.io/api/v1/lessons/vue-js-enhance-your-tresjs-scenes-with-the-tresjs-cientos-package/transcript

Create Interactive 3D Experiences with TresJS

Alvaro Saburido

You might also like these resources:

The Beginner's Guide to Vue 3

Write, Test, and Debug Vue 3 Components in the Browser Using Cypress

Create a GraphQL Powered Vue 3 Application

Course Content

You might also like these resources:

The Beginner's Guide to Vue 3

Write, Test, and Debug Vue 3 Components in the Browser Using Cypress

Create a GraphQL Powered Vue 3 Application