CF

Create Interactive 3D Experiences with TresJS

52m 24s
English
Paid

Unlock the potential of web development by learning to create interactive 3D web applications using TresJS—a powerful wrapper for Three.js specifically adapted for Vue. This course will guide you through integrating the library into Vue projects, setting up a 3D scene, manipulating objects and lighting, adding animations, and implementing user interactions.

What You Will Learn

This course provides comprehensive insights into building captivating 3D experiences. Here are the key topics covered:

  • Integrating TresJS into Vue: Learn the steps to seamlessly incorporate TresJS into your existing Vue applications.
  • Building 3D Scenes: Understand how to create 3D scenes and enhance them by adding basic objects.
  • Transforming Objects: Master the control of position, rotation, and scale of 3D objects using props.
  • Lighting and Shadows: Explore techniques for working with lighting to create realistic scenes, including implementing shadows.
  • Animating Objects: Dive into animating objects effectively through the render loop, bringing life to your 3D environments.
  • Scene Navigation: Learn to add intuitive controls for navigating through your scenes.
  • Working with 3D Models: Discover how to load 3D models and interact with them using the useGLTF hook.
  • Reactive Properties: Link model properties with Vue's reactive state to create dynamic and responsive 3D scenes.
  • Enhancing Visuals: Utilize additional TresJS tools to significantly enhance the visual quality of your scenes.

Course Objectives

This course is designed to equip you with practical skills crucial for crafting modern, dynamic, and visually expressive 3D scenes on the web. Whether you're aiming to enrich your personal projects or build an impressive portfolio, these techniques will set you apart in the world of web development.

Additional

https://github.com/alvarosabu/egghead-tres-3D-product-configurator/tree/main

About the Author: egghead.io

egghead.io thumbnail

egghead.io is a US-based subscription video platform focused on short, focused screencasts on JavaScript ecosystem topics. Founded in 2012 by John Lindquist (a Google Developer Expert) and run by Joel Hooks, egghead pioneered the short-screencast format that most modern developer-education platforms now use — courses are typically broken into 2-5 minute lessons that each cover one specific concept or API.

The instructor roster includes many of the most cited names in the JavaScript ecosystem — Kent C. Dodds (whose Testing JavaScript launched on egghead before EpicWeb.dev), Andrew Del Prete, Hannah Davis, Lukas Ruebbelke, Tomasz Łakomy, Andy Van Slaars, and many others. Course material covers React, Next.js, TypeScript, Node.js, GraphQL, Vue, the testing tracks, RxJS / observables, and a long list of smaller libraries and tools.

The CourseFlix listing under this source carries over 20 egghead courses spanning that range. Material is paid; egghead itself runs on a monthly / annual subscription on the original platform. The bite-sized format suits developers learning incrementally during work hours rather than committing to multi-hour video sessions.

Watch Online 13 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 13 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Getting Started with the TresJS Product Course Repo
All Course Lessons (13)
#Lesson TitleDurationAccess
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 subscription

Related courses

Frequently asked questions

What is Create Interactive 3D Experiences with TresJS about?
Unlock the potential of web development by learning to create interactive 3D web applications using TresJS —a powerful wrapper for Three.js specifically adapted for Vue. This course will guide you through integrating the library into Vue…
Who teaches this course?
It is taught by egghead.io. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 13 lessons with a total runtime of 52 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/create-interactive-3d-experiences-with-tresjs. The page hosts every lesson with the integrated video player; no download is required.