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
Setting Up Our Code
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