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
Facebook Clone with Laravel, TDD, Vue & Tailwind CSS
Sources: udemy
Building modern applications requires a specialized toolbox of skills and tools. We are going to be using Facebook as an example to build a social network platform from scratch....
9 hours 9 minutes 44 seconds
Content Sites with Astro and Vue.js
Sources: vueschool.io
Do you want to create a fast and efficient website with content? In this course, you will learn how to use Astro and Vue.js together for developing high...
1 hour 3 minutes 38 seconds
The Ultimate Guide to Vue Performance
Sources: vueschool.io
In today's world, the performance of web applications is of paramount importance. In this course, you will learn how to maintain the speed of your Vue...
2 hours 31 minutes 10 seconds
Code With Antonio Workshops
Sources: Code With Antonio
Workshops include detailed instructions on creating applications using modern technologies, providing participants with the opportunity to deeply...
17 hours 3 minutes 7 seconds
MASTERING NUXT Learn Nuxt.js by Building a Real World App
Sources: masteringnuxt.com
Learn how to build robust, modern websites with Nuxt from scratch. Or improve your website performance, code quality, while making better use of the framework.
10 hours 36 minutes 24 seconds