Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

Three.js Bootcamp: Zero to Mastery

via Zero To Mastery

Go to class Write review

Overview

Learn Three.js by building your own projects. Taught by an industry professional, this course covers everything from beginner to advanced topics. If you're a JavaScript developer who is serious about taking your coding skills and career to the next level by creating incredible interactive 3D experiences directly within a web browser, then this is the course for you.
  • Use the Three.js library to create and display 3D graphics on web browsers, making it easier and more accessible to create innovative and interactive 3D experiences
  • Understand the principles behind Three.js including its architecture, core components, and how it interacts with WebGL
  • Unlock the ability to build really innovative and interactive 3D experiences using WebGL directly within a web browser
  • Learn how to utilize Blender to create custom models and export them for use in 3D applications
  • Launch or accelerate your career as a Web Developer, Game Developer, VR Developer or 3D Artist
  • Create an online personal portfolio in the form of a 3D browser-based video game that showcases 3D models and interactive visualizations
  • Explore how to build interactive 3D applications using Three.js, including VR and game development
  • Learn 3D graphics programming, including geometric transformations, lighting, materials, and texture

Syllabus

  •   Introduction
    • Three.js Bootcamp: Zero to Mastery
    • Exercise: Meet Your Classmates and Instructor
    • Course Resources
    • Understanding Your Video Player (notes, video speed, subtitles + more)
    • Set Your Learning Streak Goal
  •   Getting Started
    • Three.js Examples
    • Wait...What is Three.js?
    • Prerequisite Knowledge
    • Three.js Documentation
    • Hacking the Example
  •   Three.js Fundamentals
    • Three.js Fundamentals
  •   Hello World (Your First Scene)
    • Installing Vite
    • Three.js Setup
    • Scene
    • Camera
    • Renderer
    • Let's Have Some Fun (+ More Resources)
  •   Camera
    • Starter Pack
    • FOV
    • Near and Far
    • Orbit Controls
    • Renderloop
    • Orthographic Camera
    • Other Controls
    • Unlimited Updates
  •   Extra: Resizing and Antialiasing
    • Resizing
    • Antialiasing - The Problem
    • Antialiasing - The Solution
    • Antialiasing - The Solution Implementation
    • Implement a New Life System
  •   Manipulating Meshes
    • Starter Pack
    • Transforming Position
    • Vector3
    • Transforming Scale
    • Scene Hierarchy
    • Rotation - Part 1
    • Rotation - Part 2
    • Course Check-In
  •   Animating Meshes
    • Animating Meshes - Part 1
    • Animating Meshes - Part 2
    • Other Animations
  •   Mesh - Geometries
    • Introduction
    • Buffer Geometry
    • Primitives
    • Extra: Tweakpane
  •   Mesh - Materials
    • Materials vs. Textures
    • Material Types
    • MeshBasicMaterial
    • Mesh Lambert and Mesh Phong Materials
    • Mesh Standard and Mesh Physical Materials
  •   Textures
    • Setup
    • Loading a Texture
    • Repeating Texture
    • Texture Offset
    • UV Maps - Part 1
    • UV Mapping - Part 2
    • PBR Maps
    • Normal Map
    • Height Map
    • AO Map
    • Putting it All Together!
  •   Lighting
    • Introduction and Ambient Light
    • Hemisphere Light
    • Directional Light
    • pointLight
    • spotLight
    • Setting spotLight Target
    • Rect Area Light
    • Putting it All Together!
    • Exercise: Imposter Syndrome
  •   Shadows
    • Introduction
    • Adding Shadows
    • How Shadows Work
    • Shadow Properties
    • Shadow Properties - Pointlight
    • Shadow Map Types
  •   Solar System
    • Introduction
    • Planning Our Project
    • Adding Meshes
    • Planetary Orbit
    • Planet Array
    • Adding Materials
    • Automating Mesh Generation
    • Animating the Planet Array
    • Final Touches!
  •   Working with 3D Models
    • GLTF Introduction
    • Loading the Model
    • Load Async
    • Changing Loaded Model Properties
    • Working with Nested Meshes
    • DRACOLoader
  •   Creating Your Portfolio in Three.js
    • Introduction and Prerequisites
  •   Portfolio Code Structure
    • Exporting and Importing Modules
    • Creating Our Classes - Part 1
    • Creating Our Classes - Part 2
    • Adding Objects
    • Zustand and Resizing
  •   Pre-Loader
    • Introduction
    • Asset Array
    • Creating the AssetStore
    • Loading Our Assets
    • Preloader Progress
    • Preloader UI
    • Putting it All Together!
  •   Physics
    • Introduction to Physics and Rapier
    • Getting Started
    • Dynamic Object
    • Fixed Objects
    • Physics Helper Functions
    • Auto Compute Cuboid Dimensions
    • Setting Absolute Position
    • Adding Fixed Objects
    • Auto Compute Ball Collider
    • Auto Compute Trimesh Collider
    • Putting it All Together!
  •   Basic Inputs
    • Introduction
    • Input Controller
    • Using Arrow Keys
    • Preventing Unnecessary Updates
    • Controlling Our Mesh
    • Moving Dynamic Bodies
    • Moving Kinematic Bodies
    • Comparing Character Controllers
  •   Character Types
    • Introduction
    • Setting Up Our Body
    • Implementing Character Controller
    • Factoring in Framerate
    • Character Controller Properties
  •   Camera Controller
    • Introduction and First Person Camera
    • Basic Third Person Controller
    • Cleanup and Lerp
  •   Avatar Body
    • Ready Player Me
    • Preparing Assets for Mixamo
    • Adding Mixamo Animations
    • Previewing Our Animations
    • Setting Up Our Code
    • Adding Avatar to the Scene
    • Removing the Hitbox
  •   Animation Controller
    • Introduction to Animations
    • Playing an Animation
    • Animation Action Map
    • Transitioning Between Animations
    • Cleaning Up The Controller
  •   Creating an Environment with Blender and Three.js
    • Blender Introduction
    • Edit Mode
    • Starting Our Scene
    • Terrain and Assigning Materials
    • Adding Trees - Inset and Extrude
    • Adding Extra Objects - Timelapse
    • Adding Portals
    • Exporting GLB
    • Code - Starter Pack Recap
    • Importing Our Scene
    • Targeting Scene Objects
    • Adding Shadows
  •   Handling Interactivity
    • Introduction and Recap
    • Setting up Portals
    • Detecting Player Distance
    • Final Touches
  •   Where To Go From Here?
    • Thank You!
    • Review This Course!
    • Become An Alumni
    • Learning Guideline
    • LinkedIn Endorsements
    • Coding Challenges

Taught by

Jesse Zhou

Reviews

Start your review of Three.js Bootcamp: Zero to Mastery

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.