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: December 2024

Rated 4.8 out of 5 on Trustpilot

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 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

Getting Started

5 lectures

Three.js Fundamentals

1 lectures

Hello World (Your First Scene)

6 lectures

Camera

8 lectures

Extra: Resizing and Antialiasing

5 lectures

Manipulating Meshes

8 lectures

Animating Meshes

3 lectures

Mesh - Geometries

4 lectures

Mesh - Materials

5 lectures

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
Risk Free Pricing

100% Risk Free

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

Teams

Need a Team License?

With a team license, you can buy a number of spots to allocate to employees.

MOST POPULAR

PRO PLAN

Pay yearly
Pay monthly
$23 / month

Paid yearly at $279$468/y40% OFF

Get Annual Plan

You're committed to getting hired and starting a career in tech

Unlimited access to all ZTM content
Private Discord with 450,000+ members
Private LinkedIn networking group
Career Advice sessions with Mentors
Custom ZTM course certificates
Access to ZTM Passport
Priority Support

Lifetime PLAN

$999
Only pay once, ever
Get Lifetime Access

You're serious about advancing your career and maximizing your salary

All  PRO  benefits included
Never worry about staying up to date with the industry again, for life. You'll get access to all ZTM PRO features and future courses for life.