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
Remix Bootcamp: Zero to Mastery
Sources: zerotomastery.io
Join Remix Bootcamp to master full-stack web development. Learn from industry experts to build better websites and advance your career in web development
21 hours 2 minutes 22 seconds
Next Auth V5 - Продвинутое руководство
Sources: Code With Antonio
In this 8-hour course, you will learn how to create your own authentication toolset using the latest version of Next Auth v5 (Auth.js). We...
8 hours 1 minute 8 seconds
100 Days Of Code: The Complete Web Development Bootcamp 2024
Sources: Academind Pro
Learn web development from A to Z in 100 days (or at your own pace) - from "basic" to "advanced", it's all included!
78 hours 51 minutes 55 seconds
Web Animations Full Course | Build a GTA VI Website & Master GSAP
Sources: jsmastery.pro, Adrian Hajdin
More than 70% of leading design-oriented companies use GSAP in production. Now you will not only be able to understand their approach, but you will also...
3 hours 31 minutes 47 seconds
The Vue 3 Bootcamp - The Complete Developer Guide
Sources: udemy
In this course we will take you from a Vue 3 novice to a job ready engineer. This course is loaded with practical projects and examples so that you can truly un
17 hours 31 minutes 14 seconds