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
What’s New in Nuxt 4: Key Updates for Nuxt.js Developers
Sources: vueschool.io
Discover the latest features and improvements in Nuxt 4, the newest version of the popular framework based on Vue.js. This course covers the key...
33 minutes 19 seconds
Vanilla Three.js Course
Sources: jsmastery.pro, Adrian Hajdin
Unleash your creative potential with the Vanilla Three.js course from JSMastery.pro - the perfect choice for beginners and developers who want to create...
31 minutes 46 seconds
The Imposter's Frontend Accelerator
Sources: bigmachine.io
This is a book. This is a video course... It's both! You are in for a clear and conceptual immersion into modern frontend development using Vue 3.0 and Nuxt 3.
15 hours 48 minutes 54 seconds
Vue - The Complete Guide (incl. Router & Composition API)
Sources: Academind Pro
Learn Vue.js - in its latest version - step by step from the ground up. Learn how to build highly reactive web apps with one of the most popular frameworks!
28 hours 45 minutes 29 seconds