Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Three.js Bootcamp: Zero to Mastery
Introduction
Learn Three.js with Jesse Zhou (1:03)
Exercise: Meet Your Classmates and Instructor
Course Resources
ZTM Plugin + Understanding Your Video Player
Set Your Learning Streak Goal
Getting Started
Three.js Examples (4:59)
Wait...What is Three.js? (8:40)
Prerequisite Knowledge (3:13)
Three.js Documentation (2:47)
Hacking the Example (5:40)
Three.js Fundamentals
Three.js Fundamentals (7:47)
Hello World (Your First Scene)
Installing Vite (5:17)
Three.js Setup (6:00)
Scene (5:27)
Camera (5:03)
Renderer (4:41)
Let's Have Some Fun (+ More Resources)
Camera
Starter Pack (4:54)
FOV (3:49)
Near and Far (5:46)
Orbit Controls (4:43)
Renderloop (7:35)
Orthographic Camera (5:55)
Other Controls (2:46)
Unlimited Updates
Extra: Resizing and Antialiasing
Resizing (11:13)
Antialiasing - The Problem (2:08)
Antialiasing - The Solution (3:20)
Antialiasing - The Solution Implementation (3:44)
Implement a New Life System
Manipulating Meshes
Starter Pack (0:49)
Transforming Position (7:04)
Vector3 (7:36)
Transforming Scale (2:23)
Scene Hierarchy (6:17)
Rotation - Part 1 (1:46)
Rotation - Part 2 (14:26)
Course Check-In
Animating Meshes
Animating Meshes - Part 1 (1:55)
Animating Meshes - Part 2 (4:14)
Other Animations (5:21)
Mesh - Geometries
Introduction (4:28)
Buffer Geometry (12:31)
Primitives (6:58)
Extra: Tweakpane (18:58)
Mesh - Materials
Materials vs. Textures (3:44)
Material Types (4:17)
MeshBasicMaterial (15:19)
Mesh Lambert and Mesh Phong Materials (10:04)
Mesh Standard and Mesh Physical Materials (9:35)
Textures
Setup (10:53)
Loading a Texture (6:50)
Repeating Texture (10:18)
Texture Offset (3:41)
UV Maps - Part 1 (4:54)
UV Mapping - Part 2 (5:02)
PBR Maps (9:16)
Normal Map (4:17)
Height Map (2:44)
AO Map (7:29)
Putting it All Together! (3:56)
Lighting
Introduction and Ambient Light (10:12)
Hemisphere Light (5:13)
Directional Light (7:06)
pointLight (4:54)
spotLight (6:56)
Setting spotLight Target (2:23)
Rect Area Light (6:14)
Putting it All Together! (1:38)
Exercise: Imposter Syndrome (2:55)
Shadows
Introduction (4:22)
Adding Shadows (3:16)
How Shadows Work (4:34)
Shadow Properties (11:57)
Shadow Properties - Pointlight (4:11)
Shadow Map Types (2:39)
Solar System
Introduction (0:52)
Planning Our Project (2:47)
Adding Meshes (7:54)
Planetary Orbit (12:31)
Planet Array (4:49)
Adding Materials (3:47)
Automating Mesh Generation (13:13)
Animating the Planet Array (12:24)
Final Touches! (10:16)
Working with 3D Models
GLTF Introduction (6:46)
Loading the Model (14:51)
Load Async (5:11)
Changing Loaded Model Properties (7:44)
Working with Nested Meshes (7:50)
DRACOLoader (4:25)
Creating Your Portfolio in Three.js
Introduction and Prerequisites (4:04)
Portfolio Code Structure
JavaScript Classes Recap (14:51)
Exporting and Importing Modules (4:11)
Creating Our Classes - Part 1 (15:58)
Creating Our Classes - Part 2 (10:24)
Adding Objects (6:54)
Zustand and Resizing (16:47)
Pre-Loader
Introduction (1:59)
Asset Array (4:06)
Creating the AssetStore (7:56)
Loading Our Assets (13:59)
Preloader Progress (10:04)
Preloader UI (3:43)
Putting it All Together! (11:42)
Physics
Introduction to Physics and Rapier (9:00)
Getting Started (6:10)
Dynamic Object (9:13)
Fixed Objects (7:33)
Physics Helper Functions (14:05)
Auto Compute Cuboid Dimensions (10:47)
Setting Absolute Position (17:04)
Adding Fixed Objects (2:31)
Auto Compute Ball Collider (7:08)
Auto Compute Trimesh Collider (16:48)
Putting it All Together! (6:16)
Basic Inputs
Introduction (2:33)
Input Controller (9:59)
Using Arrow Keys (1:29)
Preventing Unnecessary Updates (4:55)
Controlling Our Mesh (1:55)
Moving Dynamic Bodies (11:21)
Moving Kinematic Bodies (10:19)
Comparing Character Controllers (5:21)
Character Physics
Introduction (6:19)
Setting Up Our Body (8:30)
Implementing Character Controller (3:01)
Factoring in Framerate (2:18)
Character Controller Properties (6:48)
Camera Controller
Introduction and First Person Camera (6:20)
Basic Third Person Controller (4:47)
Cleanup and Lerp (8:28)
Avatar Body
Ready Player Me (3:48)
Preparing Assets for Mixamo (7:10)
Adding Mixamo Animations (9:32)
Previewing Our Animations (1:55)
Setting Up Our Code (8:53)
Adding Avatar to the Scene (16:41)
Removing the Hitbox (0:37)
Animation Controller
Introduction to Animations (5:41)
Playing an Animation (7:13)
Animation Action Map (3:09)
Transitioning Between Animations (8:53)
Cleaning Up The Controller (5:11)
Creating an Environment with Blender and Three.js
Blender Introduction (13:21)
Edit Mode (5:40)
Starting Our Scene (6:34)
Terrain and Assigning Materials (10:25)
Adding Trees - Inset and Extrude (10:21)
Adding Extra Objects - Timelapse (4:47)
Adding Portals (4:42)
Exporting GLB (11:58)
Code - Starter Pack Recap (3:32)
Importing Our Scene (9:58)
Targeting Scene Objects (11:46)
Adding Shadows (14:21)
Handling Interactivity
Introduction and Recap (4:01)
Setting up Portals (7:02)
Detecting Player Distance (11:16)
Final Touches (9:17)
Where To Go From Here?
Thank You! (1:17)
Review This Course!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
Introduction and First Person Camera
This lecture is available exclusively for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures