Create Interactive 3D Experiences with TresJS
52m 24s
English
Paid
Course description
The course is dedicated to creating interactive 3D web applications using TresJS—a wrapper for Three.js adapted for Vue. You will learn how to integrate the library into Vue projects, set up a scene, work with objects and lighting, add animations, and implement user interaction.
Read more about the course
The course topics include:
- Integrating TresJS into an existing Vue application
- Creating 3D scenes and adding basic objects
- Controlling position, rotation, and scale through props
- Working with lighting and shadows
- Animating objects through the render loop
- Adding controls for scene navigation
- Loading 3D models and working with them through useGLTF
- Linking model properties with Vue's reactive state
- Enhancing scene visual quality using additional TresJS tools
The course aims to provide you with practical skills in creating modern, dynamic, and visually expressive 3D scenes for the web, suitable for personal projects and portfolios.
Watch Online
0:00
/ #1: Getting Started with the TresJS Product Course Repo
All Course Lessons (13)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Getting Started with the TresJS Product Course Repo Demo | 02:07 | |
| 2 | Add a TresCanvas to Your Vue App | 02:09 | |
| 3 | Add a Cube to Your TresJS 3D Scene | 02:56 | |
| 4 | Transform TresJS Objects Using Props | 04:01 | |
| 5 | Add Ambient and Directional Lighting to Your TresJS Scene | 04:49 | |
| 6 | Enable Shadows in Your TresJS Scene | 05:34 | |
| 7 | Animate TresJS Objects with the useRenderLoop Composable | 06:37 | |
| 8 | Use OrbitControls to Interact with your TresJS Scene | 01:43 | |
| 9 | Project Overview of the TresJS Product Template | 02:47 | |
| 10 | Load Models with useGLTF and the TresJS primitive Component | 07:11 | |
| 11 | Create a Reactive Color Selector in Vue with useState | 05:16 | |
| 12 | Connect a TresJS Model with Vue State | 02:59 | |
| 13 | Enhance Your TresJS Scenes with the @tresjs/cientos Package | 04:15 |
Unlock unlimited learning
Get instant access to all 12 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Full-Stack Fundamentals 3 - Auth
Sources: Mckay Wrigley (takeoff)
In the previous project, we created a working application - Prompt Manager, mastering the key principles of full-stack development using Next.js, Supabase...
1 hour 9 minutes 21 seconds
ScrollTrigger Express
Sources: Carl (Creative Coding Club)
ScrollTrigger is GreenSock's most revolutionary plugin to date. With its help, you can control all your animations with precision and...
10 hours 31 minutes 38 seconds
B-Sides, Bonuses and Oddities
Sources: Carl (Creative Coding Club)
After completing the basics of GreenSock in the "Express" and "Beyond the Basics" courses, we will now apply the acquired knowledge in practice, sometimes...
17 hours 55 minutes 38 seconds