AI WEEK IS HERE: See All New AI Courses here.
Use Code: LEARNAI to get 21% OFF any membership. Expires soon 👇
06DAYS09HOURS18MINS22SECS
Back to courses

Three.js Bootcamp: Zero to Mastery

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.

30 Days

Average time students take to complete this course.

instructor
Taught by: Jesse Zhou
Last updated: April 2024

Course overview

We guarantee you that this is the most efficient and up-to-date Three.js course that you can find. Jesse will help you go from an absolute beginner to learning Three.js and getting hired as a Web or Game Developer with a specialization in 3D designs.

What you'll learn

  • 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

This Three.js course covers all the Three.js best practices and trends for 2024 and is focused on efficiency.

That means you'll never have to spend time on confusing, out-of-date, incomplete tutorials anymore.

Instead, we'll quickly push you beyond the basics so that you can build incredible, interactive 3D browser experiences on your own using the latest version of Three.js and become a professional Three.js Developer.

The success stories speak for themselves.

Graduates of Zero To Mastery are now working at Google, Tesla, Amazon, Apple, IBM, Uber, Facebook, Shopify + other top tech companies. They are also working as top freelancers getting paid while working remotely around the world. This can be you.

By enrolling today, you’ll also get to join our exclusive live online community classroom to learn alongside thousands of students, alumni, mentors, TAs and Instructors.

Most importantly, you will learn from Jesse Zhou, a senior industry professional that has actual real-world experience working with Three.js and 3D environments.

What Is Three.js?

Three.js is a JavaScript library that is used for creating and displaying 3D graphics on web browsers.

It's built on top of WebGL, which is a powerful tool that unlocks the ability to build really innovative and interactive 3D experiences directly within a web browser.

So what does that all mean...? It means Three.js will allow the creative side of your mind run wild by enabling you to build websites with mind-blowing, immersive 3D experiences that have the 'wow' factor.

One of the main advantages of using Three.js is that it significantly simplifies the process of creating 3D graphics using WebGL. While WebGL is a very powerful API for creating 3D graphics, it can be quite challenging to learn and use effectively.

Three.js abstracts away much of the complexity of WebGL, making it much easier and more accessible for developers who are new to 3D graphics programming.

By using Three.js, JavaScript developers can create complex 3D scenes and animations that would've been difficult - or even impossible - to achieve with traditional 2D web technologies like HTML and CSS.

The library provides a wide range of tools and features, such as support for lighting, materials, cameras, and geometry, which makes it easy to create truly impressive 3D visualizations and games.

Who Should Learn Three.js?

Frankly we think everyone should learn Three.js...because it's just really awesome! But if you're looking to find your dream career then here's a few of the big roles that Three.js is useful for:

WEB DEVELOPERS: If you're a current or aspiring web developer, you'll be able to use Three.js to create stunning visualizations, interactive infographics, and other engaging 3D content for your websites.

Plus with the growing popularity of virtual and augmented reality, Three.js is also becoming increasingly important for creating immersive experiences that allow users to explore 3D environments in real-time.

The ability to create "traditional" 2D webpages is a common skill amongst web developers, especially with the rise in popularity of many user-friendly no-code website builders. But the ability to create immersive 3D experiences on the web with Three.js allows developers to really stand out from the crowd.

Personally, I built my own 3D portfolio using Three.js and became internet-famous from it. The amount of requests I get to build websites that mimic the look and feel of my 3D portfolio is off the charts. And I rarely self-promote or spend time generating leads, the work speaks for itself. This is a great example of how the unique, powerful Three.js skills are highly in-demand for web developers.

GAME DEVELOPERS: If you want to get into game development then Three.js is an amazing skill to add to your toolkit.

Why? Because Game Developers can leverage Three.js to create rich, immersive games that run directly in the browser, without the need for users to download or install any additional software.

The Three.js library provides a variety of features and tools that can be used to render game scenes and is implemented in a way that supports industry standard 3D workflows and rendering pipelines.

VR DEVELOPERS: The emerging virtual reality (VR) space is also a growing area where Three.js is gaining popularity.

With its ability to create 3D graphics that can be rendered in real-time, Three.js can be used to create immersive virtual reality experiences that can be accessed directly through something like the Oculus Quest’s web browser via WebXR, without the need to install a custom app.

3D ARTISTS: Three.js is also useful for 3D artists who want to showcase their work on the web.

With Three.js, 3D artists can create interactive galleries and portfolios that allow users to explore their work in real-time. The Three.js library provides support for industry standard file formats and rendering pipelines

Here's what this Three.js course covers:

This course, like all Zero To Mastery courses, is a living thing that will be constantly updated. That means it will be your go-to place to find the latest Three.js best practices and resources throughout your career!

Here's an overview of what you'll be learning in this course. This course is divided into three big sections that are then broken down into sub-sections.

1. GETTING STARTED WITH THREE.JS: Before diving into the world of Three.js, it's crucial to have the essential resources and prerequisite knowledge. This section serves as a foundation, introducing you to what Three.js is, the prerequisite knowledge you'll need, and where to find the official Three.js documentation.

Here are some of the details of what you'll learn:

  • What is Three.js: learn the core concepts and capabilities of Three.js.
  • Inspiration: get introduced to a collection of Three.js examples to get you started.
  • Three.js Documentation: gain and understanding of the official Three.js documentation.

2. THREE.JS FUNDAMENTALS: You'll dive into the core concepts of Three.js, such as creating scenes, manipulating meshes, and working with cameras. By the end of this section, you'll have created an immersive, 3D solar system scene using the new skills you've acquired.

Here are some of the details of what you'll learn:

  • Hello World (Your First Scene): learn how to set up your first Three.js scene.
  • Camera: understand the different types of cameras and their properties.
  • Manipulating Meshes: learn how to transform and animate 3D objects.
  • Mesh - Geometries and Materials: explore the different types of geometries and materials.
  • Textures: understand how to apply and manipulate textures.
  • Lighting and Shadows: learn how to create realistic lighting and shadows.

3. ADVANCED THREE.JS & CREATING YOUR PORTFOLIO: You'll use your Three.js skills to create a personalized portfolio designed like a third-person game. This portfolio will serve as a testament to your technical ability and creativity.

Here are some of the details of what you'll learn:

  • Portfolio Code Structure: learn the architecture of a Three.js project.
  • Pre-Loader: understand how to create a pre-loading screen for your assets.
  • Physics: implement real-world physics into your 3D scenes.
  • Basic Inputs: learn how to control objects using keyboard inputs.
  • Character Physics: implement a character controller for more complex movements.
  • Camera Controller: learn how to create first and third-person camera controllers.
  • Avatar Body: add a 3D avatar to your scene.
  • Animation Controller: implement animations for your 3D avatar.
  • Creating an Environment with Blender and Three.js: learn how to create complex 3D environments.
  • Handling Interactivity: implement interactive elements like portals.

What's the bottom line?

This Three.js course is not about making you just code along without understanding the Three.js principles so that when you're done with the course you don’t even know what to do other than watch another tutorial. No!

This course will push you and challenge you to go from an absolute beginner to someone that is in the top 10% of Three.js Developers 💪.

And you have nothing to lose. You can start learning right now and if this course isn't everything you expected, we'll refund you 100% within 30 days. No hassles and no questions asked.

When's the best time to get started? Today!

There's never a bad time to learn in-demand skills. But the sooner, the better. So start learning Three.js today by joining the ZTM Academy. You'll have a clear roadmap to developing the skills to build your own projects, get hired, and advance your career.

Join Zero To Mastery Now

What you'll build

The best way you learn is by doing. Not just watching endless tutorials. That's why a key part of this course is the real-world projects that you'll get to build. Plus they'll look great on your portfolio.

Interactive 3D Model of Solar System

Interactive 3D Model of Solar System

Use the fundamental Three.js concepts you've learned to create an interactive 3D model of the solar system, including how to create a scene, work with materials and textures, and manipulate meshes in a way that mimics the behavior of our solar system.

Your Personal Portfolio as an Interactive 3D Game

Your Personal Portfolio as an Interactive 3D Game

This project is the highlight of the course! You'll create a personalized portfolio in Three.js designed in the style of a third-person game, resulting in a visually immersive 3D experience that showcases your technical ability and creativity.

Join Zero To Mastery Now

Course curriculum

To make sure this course is a good fit for you, you can start learning Three.js for free right now by clicking any of the PREVIEW links below.

Introduction

5 lectures

Three.js Bootcamp: Zero to Mastery1:03

PREVIEW

Exercise: Meet Your Classmates and Instructor

PREVIEW

Course Resources

PREVIEW

Understanding Your Video Player (notes, video speed, subtitles + more)

PREVIEW

Set Your Learning Streak Goal

PREVIEW

Getting Started

5 lectures

Three.js Examples4:59

PREVIEW

Wait...What is Three.js?8:40

PREVIEW

Prerequisite Knowledge3:13

PREVIEW

Three.js Documentation2:47

PREVIEW

Hacking the Example5:40

PREVIEW

Three.js Fundamentals

1 lectures

Three.js Fundamentals7:47

BEGIN

Hello World (Your First Scene)

6 lectures

Installing Vite5:17

BEGIN

Three.js Setup6:00

BEGIN

Scene5:27

BEGIN

Camera5:03

BEGIN

Renderer4:41

BEGIN

Let's Have Some Fun (+ More Resources)

BEGIN

Camera

8 lectures

Starter Pack4:54

BEGIN

FOV3:49

BEGIN

Near and Far5:46

BEGIN

Orbit Controls4:43

BEGIN

Renderloop7:35

BEGIN

Orthographic Camera5:55

BEGIN

Other Controls2:46

BEGIN

Unlimited Updates

BEGIN

Extra: Resizing and Antialiasing

5 lectures

Resizing11:13

BEGIN

Antialiasing - The Problem2:08

BEGIN

Antialiasing - The Solution3:20

BEGIN

Antialiasing - The Solution Implementation3:44

BEGIN

Implement a New Life System

BEGIN

Manipulating Meshes

8 lectures

Starter Pack0:49

BEGIN

Transforming Position7:04

BEGIN

Vector37:36

BEGIN

Transforming Scale2:23

BEGIN

Scene Hierarchy6:17

BEGIN

Rotation - Part 11:46

BEGIN

Rotation - Part 214:26

BEGIN

Course Check-In

BEGIN

Animating Meshes

3 lectures

Animating Meshes - Part 11:55

BEGIN

Animating Meshes - Part 24:14

BEGIN

Other Animations5:21

BEGIN

Mesh - Geometries

4 lectures

Introduction4:28

BEGIN

Buffer Geometry12:31

BEGIN

Primitives6:58

BEGIN

Extra: Tweakpane18:58

BEGIN

Mesh - Materials

5 lectures

Materials vs. Textures3:44

BEGIN

Material Types4:17

BEGIN

MeshBasicMaterial15:19

BEGIN

Mesh Lambert and Mesh Phong Materials10:04

BEGIN

Mesh Standard and Mesh Physical Materials9:35

BEGIN

Textures

11 lectures

Setup10:53

BEGIN

Loading a Texture6:50

BEGIN

Repeating Texture10:18

BEGIN

Texture Offset3:41

BEGIN

UV Maps - Part 14:54

BEGIN

UV Mapping - Part 25:02

BEGIN

PBR Maps9:16

BEGIN

Normal Map4:17

BEGIN

Height Map2:44

BEGIN

AO Map7:29

BEGIN

Putting it All Together!3:56

BEGIN

Lighting

9 lectures

Introduction and Ambient Light10:12

BEGIN

Hemisphere Light5:13

BEGIN

Directional Light7:06

BEGIN

pointLight4:54

BEGIN

spotLight6:56

BEGIN

Setting spotLight Target2:23

BEGIN

Rect Area Light6:14

BEGIN

Putting it All Together!1:38

BEGIN

Exercise: Imposter Syndrome2:55

BEGIN

Shadows

6 lectures

Introduction4:22

BEGIN

Adding Shadows3:16

BEGIN

How Shadows Work4:34

BEGIN

Shadow Properties11:57

BEGIN

Shadow Properties - Pointlight4:11

BEGIN

Shadow Map Types2:39

BEGIN

Solar System

9 lectures

Introduction0:52

BEGIN

Planning Our Project2:47

BEGIN

Adding Meshes7:54

BEGIN

Planetary Orbit12:31

BEGIN

Planet Array4:49

BEGIN

Adding Materials3:47

BEGIN

Automating Mesh Generation13:13

BEGIN

Animating the Planet Array12:24

BEGIN

Final Touches!10:16

BEGIN

Working with 3D Models

6 lectures

GLTF Introduction6:46

BEGIN

Loading the Model14:51

BEGIN

Load Async5:11

BEGIN

Changing Loaded Model Properties7:44

BEGIN

Working with Nested Meshes7:50

BEGIN

DRACOLoader4:25

BEGIN

Creating Your Portfolio in Three.js

1 lectures

Introduction and Prerequisites4:04

BEGIN

Portfolio Code Structure

5 lectures

Exporting and Importing Modules4:11

BEGIN

Creating Our Classes - Part 115:58

BEGIN

Creating Our Classes - Part 210:24

BEGIN

Adding Objects6:54

BEGIN

Zustand and Resizing16:47

BEGIN

Pre-Loader

7 lectures

Introduction1:59

BEGIN

Asset Array4:06

BEGIN

Creating the AssetStore7:56

BEGIN

Loading Our Assets7:53

BEGIN

Preloader Progress10:04

BEGIN

Preloader UI3:43

BEGIN

Putting it All Together!11:42

BEGIN

Physics

11 lectures

Introduction to Physics and Rapier9:00

BEGIN

Getting Started6:10

BEGIN

Dynamic Object9:13

BEGIN

Fixed Objects7:33

BEGIN

Physics Helper Functions14:05

BEGIN

Auto Compute Cuboid Dimensions10:47

BEGIN

Setting Absolute Position17:04

BEGIN

Adding Fixed Objects2:31

BEGIN

Auto Compute Ball Collider7:08

BEGIN

Auto Compute Trimesh Collider16:48

BEGIN

Putting it All Together!6:16

BEGIN

Basic Inputs

8 lectures

Introduction2:33

BEGIN

Input Controller9:59

BEGIN

Using Arrow Keys1:29

BEGIN

Preventing Unnecessary Updates4:55

BEGIN

Controlling Our Mesh1:55

BEGIN

Moving Dynamic Bodies11:21

BEGIN

Moving Kinematic Bodies10:19

BEGIN

Comparing Character Controllers5:21

BEGIN

Character Types

5 lectures

Introduction6:19

BEGIN

Setting Up Our Body8:30

BEGIN

Implementing Character Controller3:01

BEGIN

Factoring in Framerate2:18

BEGIN

Character Controller Properties6:48

BEGIN

Camera Controller

3 lectures

Introduction and First Person Camera6:20

BEGIN

Basic Third Person Controller4:47

BEGIN

Cleanup and Lerp8:28

BEGIN

Avatar Body

7 lectures

Ready Player Me3:48

BEGIN

Preparing Assets for Mixamo7:10

BEGIN

Adding Mixamo Animations9:32

BEGIN

Previewing Our Animations1:55

BEGIN

Setting Up Our Code8:53

BEGIN

Adding Avatar to the Scene16:41

BEGIN

Removing the Hitbox0:37

BEGIN

Animation Controller

5 lectures

Introduction to Animations5:41

BEGIN

Playing an Animation7:13

BEGIN

Animation Action Map3:09

BEGIN

Transitioning Between Animations8:53

BEGIN

Cleaning Up The Controller5:11

BEGIN

Creating an Environment with Blender and Three.js

12 lectures

Blender Introduction13:21

BEGIN

Edit Mode5:40

BEGIN

Starting Our Scene6:34

BEGIN

Terrain and Assigning Materials10:25

BEGIN

Adding Trees - Inset and Extrude10:21

BEGIN

Adding Extra Objects - Timelapse4:47

BEGIN

Adding Portals4:42

BEGIN

Exporting GLB11:58

BEGIN

Code - Starter Pack Recap3:32

BEGIN

Importing Our Scene9:58

BEGIN

Targeting Scene Objects11:46

BEGIN

Adding Shadows14:21

BEGIN

Handling Interactivity

4 lectures

Introduction and Recap4:01

BEGIN

Setting up Portals7:02

BEGIN

Detecting Player Distance11:16

BEGIN

Final Touches9:17

BEGIN

Where To Go From Here?

6 lectures

Thank You!1:17

BEGIN

Review This Course!

BEGIN

Become An Alumni

BEGIN

Learning Guideline

BEGIN

LinkedIn Endorsements

BEGIN

Coding Challenges

BEGIN

Meet your instructor

Your Three.js instructor (Jesse) isn't just an expert with years of real-world professional experience. He has been in your shoes. He makes learning fun. He makes complex topics feel simple. He will motivate you. He will push you. And he will go above and beyond to help you succeed.

Jesse Zhou

Hi, I'm Jesse Zhou!

Jesse Zhou is a business graduate turned Software Engineer who specializes in creating 3D experiences on the web.

SEE MY BIO & COURSES

Jesse Zhou

Software Engineer

Frequently asked questions

Are there any prerequisites for this course?

  • A computer (Windows, Mac, or Linux) with an internet connection.
  • Basic knowledge of JavaScript is required. Don't have that? Take our Complete Web Developer course, included with your membership!

Who is this Three.js course for?

  • JavaScript Developers who want to take their skills to the next level by building immersive, interactive 3D browser experiences
  • Anyone who wants to gain a complete and practical understanding of the Three.js JavaScript library
  • You want a step-by-step guide to learn how to code using Three.js and get hired as a 3D Web Developer
  • Developers that want to dive into the world of 3D design
  • Students who are frustrated with their current progress with all of the beginner Three.js tutorials out there that don't go beyond the basics and don't give you real-world practice or skills you need to actually get hired
  • You want to learn Three.js from someone with real-world experience

Do you provide a certificate of completion?

We definitely do and they are quite nice. You will also be able to add Zero To Mastery Academy to the education section of your LinkedIn profile as well.

Can I use the course projects in my portfolio?

Yes, you’d be crazy not to in our slightly biased opinion! All projects are downloadable and ready to use the minute you join.

Many of our students tell us the projects they built while following along with our courses were what got them interviews and because they built the projects themselves, they could confidently explain and walk through their work during the interview.

You know what that means? Job offer!

Still have more questions about the Academy?

Still have more questions specific to the Academy membership? No problem, we answer some more here.

Invest in a better you. For less than a coffee a day.

Choose your currency:
$ USD US Dollar
Lifetime
100% OFF$999
$999
Only pay once, ever
You're serious about advancing your career and never getting left behind
Start Learning Now

MOST POPULAR

Save 40% vs. monthly (that's $189 a year)
Annual
100% OFF$279 / year
$23 / month
$279 / year
You're committed to getting hired and starting a career in tech
Start Learning Now
Monthly
100% OFF$39 / month
$39 / month
You're ready to upskill and advance your career
Start Learning Now

Every ZTM membership includes:

Unlimited access to all courses, projects + workshops, and career paths
Access to our private Discord with 400,000+ members
Access to our private LinkedIn networking group
Custom ZTM course completion certificates
Live career advice sessions with mentors, every month
Full access to all future courses, content, and features
100% RISK FREE

We know you'll love ZTM. That's why we provide a no hassle, 30-day money back guarantee.