Learn Courses Lessons Articles

⌘K

Loading lesson

learn by doing,
two minutes at a time.

LearnCourses Lessons Articles

Watch & listenPodcasts Talks

StoriesCase studies Success stories Campaigns Browse everything →

© 2013–2026 egghead.iothe egg does not crack 🥚

all systems sunny-side up↑ Back to top

Learn Courses Lessons Articles

⌘K

Connect a TresJS Model with Vue State | Create Interactive 3D Experiences with TresJS | egghead

Course

Create Interactive 3D Experiences with TresJS

13 lessons · 52m

1Getting Started with the TresJS Product Course Repo2:06
2Add a TresCanvas to Your Vue App2:08
3Add a Cube to Your TresJS 3D Scene2:55
4Transform TresJS Objects Using Props4:00
5Add Ambient and Directional Lighting to Your TresJS Scene4:48
6Enable Shadows in Your TresJS Scene5:33
7Animate TresJS Objects with the useRenderLoop Composable6:36
8Use OrbitControls to Interact with your TresJS Scene1:42
9Project Overview of the TresJS Product Template2:46
10Load Models with useGLTF and the TresJS primitive Component7:10
11Create a Reactive Color Selector in Vue with useState5:15
Connect a TresJS Model with Vue State2:58
13Enhance Your TresJS Scenes with the @tresjs/cientos Package4:14

Course lesson

Connect a TresJS Model with Vue State

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

Duration: 3 min
Access: Included
Transcript: Available

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.

Access required

This lesson is available with an active egghead membership.

Sign in or subscribe

Course

Create Interactive 3D Experiences with TresJS

13 lessons · 52m

1Getting Started with the TresJS Product Course Repo2:06
2Add a TresCanvas to Your Vue App2:08
3Add a Cube to Your TresJS 3D Scene2:55
4Transform TresJS Objects Using Props4:00
5Add Ambient and Directional Lighting to Your TresJS Scene4:48
6Enable Shadows in Your TresJS Scene5:33
7Animate TresJS Objects with the useRenderLoop Composable6:36
8Use OrbitControls to Interact with your TresJS Scene1:42
9Project Overview of the TresJS Product Template2:46
10Load Models with useGLTF and the TresJS primitive Component7:10
11Create a Reactive Color Selector in Vue with useState5:15
Connect a TresJS Model with Vue State2:58
13Enhance Your TresJS Scenes with the @tresjs/cientos Package4:14

Course lesson

Connect a TresJS Model with Vue State

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

How was this course?

Create Interactive 3D Experiences with TresJS · 13 lessons watched

Your rating

1234567

Not usefulExcellent

Anything else? Optional

Duration: 3 min
Access: Included
Transcript: Available