Quick Access:

• For beginners: Red Stapler’s Tutorials, Chris Courses Project-based, DesignCourse Project-based
• Others: Full-stack Web Dev Tutorial, Code a Squid Game,  WebGL & Three.js, Three.js and Blender
• Paid course: Comprehensive Three.js Course

I recently discovered that the top 10 websites on CSS Design Awards used Three.js, which inspired me to research and create this Best Courses Guide (BCG). While CSS is sufficient for creating simple animations (and if that’s your goal, I recommend checking out the CSS Animation BCG), Three.js is the way to go for advanced animations and immersive user experiences.

When learning something new, I typically start with free courses to gain a basic understanding before moving on to paid courses for a deeper dive. With that in mind, I’ve compiled a list of free Three.js courses, followed by paid options.

While the official Three.js documentation is comprehensive, it can be overwhelming for beginners. If you prefer learning through video tutorials and small projects, these courses are excellent starting points.

Click on the shortcuts for more details:

• Top Picks
• What is Three.js?
• Courses Overview
• Why You Should Trust Us
• Best Courses Guides Methodology

Here are our top picks

Related Guides

• Blender
• Web Accessibility
• CSS Animation
• Web Development
• React

Recommended Guides

• JavaScript
• Autodesk Maya
• ZBrush
• GSAP
• 2D Animation

Trending Guides

• Drawing
• Graphic Design
• Public Speaking
• AutoCAD
• American Sign Language (ASL)

What is Three.js?

Three.js is a powerful and a versatile 3D library used for creating stunning 3D graphics and animations on the web.

Three.js is built on top of WebGL, a low-level API for rendering 3D graphics in the browser, which means that you can create complex 3D scenes with millions of polygons and real-time lighting and shadow effects. And thanks to its modular architecture, you can easily extend Three.js with your own custom code and integrate it with other JavaScript libraries and frameworks.

One of the biggest advantages of Three.js is its ease of use. The library provides a wide range of tools and utilities that simplify the process of creating 3D graphics and animations. With just a few lines of code, you can create and manipulate 3D objects, apply textures and materials, and control camera movement and lighting. And thanks to its intuitive and well-documented API, you can quickly learn how to use Three.js even if you’re new to 3D programming.

Courses Overview

• All of the courses in this ranking require an intermediate knowledge of HTML/CSS, Javascript, and 3D modeling
• Together, these courses have been viewed over 2.5 million times
• All courses are free, except for the last one.

Best Three.js YouTube Tutorials for Beginners (Red Stapler)

The Three.js playlist by Red Stapler includes fun projects like creating a 3D Batman logo with volumetric light and a GameStop meme using Three.js. These tutorials are a great resource for anyone interested in learning how to use Three.js to create impressive 3D content for the web.

What you’ll learn:

• The fundamentals of Three.js to create and manipulate 3D web content
• Develop practical skills through project-based learning
• Enhance your 3D scenes with advanced techniques in lighting, reflection, and post-processing effects.

Best Three.js Project-based Course on YouTube (Chris Courses)

This concise course by Chris courses starts with installing Three.js and Vite, a build tool for web development, and then proceeds to create a scene, a camera, and a renderer.

Chris also has an intermediate Three.js course, where he creates an interactive globe with custom shaders.

What you’ll learn:

• Set up and manage a Three.js project using Vite
• Create, animate, and manipulate 3D objects like boxes and planes within a scene
• Implement advanced graphical features, including directional lighting and texture enhancements
• Integrate interactive elements and user interfaces with HTML, CSS, and dat.gui to control 3D scene parameters.

Best WebGL and Three.js YouTube Tutorials (Wael Yasmina)

Wael Yasmina’s tutorials aim to simplify WebGL for beginners. In fact, almost all the tutorials in her channel are about  WebGL and animation for the web.

The playlist begins with an introductory video on Three.js and progresses to other projects to help learners become familiar with importing models, textures, and camera movements. The course discusses the concept of scenes and objects in Three.js, and explains how different types of cameras can be used to view the scenes.

What you’ll learn:

• Understand the fundamentals of Three.js and WebGL for creating interactive 3D web graphics
• Manipulate camera settings to alter views within scenes, and utilize different lighting techniques to enhance visual depth
• Apply textures, manage shadows, and implement fog effects for realistic scene rendering
• Develop custom shaders and ensure responsiveness of 3D models across various screen sizes.

By the end of the course, learners will have a strong foundation in Three.js and will be able to create their own 3D graphics for the web.

Also Great Three.js Project-based Course on YouTube (DesignCourse)

While we may no longer be in 2021, Getting Started with Three.js in 2021! is still a decent course that covers the basics of Three.js with a project-based approach. The course begins by helping you understand the boilerplate for Three.js, and then proceeds to guide you through the process of creating a small 3D object for a website.

What you’ll learn:

• Set up and understand the Three.js boilerplate and starter kit for web projects
• Implement 3D objects on web pages and learn to manage basic project structures and file systems
• Add interactive features such as mouse events and integrate HTML elements like text and buttons into 3D scenes.

Once you have completed this course, you can look at the second video by Gary, where he covers particles in Three.js.

Best Full-stack Web Development with Three.js Tutorial (Lama Dev)

LamaDev offers some of the best videos and explanations for teaching full-stack development. This tutorial provides a hands-on approach and guides you through the creation of a portfolio with interactive 3D elements using Three.js. Since the project is built with React on the front-end, having prior knowledge of React would be helpful.

What you’ll learn:

• Develop a dynamic portfolio using React and Three.js, incorporating 3D models and animations
• Design responsive web sections with advanced CSS and styled components
• Implement functional elements like maps and contact forms in a React application
• Deploy a full-stack React project.

Code a Squid Game Using Three.js – Tutorial for Beginners (freeCodeCamp)

If you’re a fan of Squid Game and interested in coding your own version, this introductory course on coding the game using Three.js with Angle Brace might be a good fit for you. It’s a great resource for those interested in game development with Three.js and provides a strong foundation for building more complex games.

You’ll learn how to:

• Set up and manage Three.js environments to create interactive game scenes.
• Load and manipulate 3D models to develop a visually engaging game.
• Utilize GSAP for smooth animations and effective class handling.
• Implement interactive game mechanics such as player movement and basic game logic.

More Three.js tutorials with Angle Brace include: an animated landing page and ocean cleaning game.

Advanced Tutorial – Create a Room Portfolio with Three.js and Blender (Andrew Woan)

If you have already completed a few projects and created some basic portfolios using Three.js, and are interested in building a complete Three.js portfolio, this tutorial might be just right for you. Create a Room Portfolio with Three.js and Blender by Andrew Woan is an intermediate/advanced level tutorial that demonstrates how to build a 3D portfolio using Blender and Three.js.

You’ll learn how to:

• Set up and integrate Blender models with Three.js for dynamic 3D web presentations
• Implement advanced features like lighting, cameras, and animations to create interactive web experiences
• Incorporate interactive elements and responsive design into your 3D projects
• Deploy a sophisticated 3D web portfolio using modern web technologies.

Most Comprehensive Three.js Paid Course (Bruno Simon)

If there is a paid course that you should be looking into after completing the free courses, it should be the Three.js journey by Bruno Simon. The course is very comprehensive and covers almost all aspects of Three.js.

You’ll:

• Master the core fundamentals of Three.js and expand into complex 3D design and development
• Engage in hands-on projects to build your own 3D applications and integrate them with modern web technologies
• Learn 3D modeling and animation techniques using Blender to enhance your creative output
• Benefit from community support and expert feedback through an exclusive Discord server.

The course content is delivered through video tutorials, written lessons, and interactive exercises, making it easy for you to follow along and learn at your own pace.

What Next?

Continue your Three.js journey beyond the listed courses with these handy resources:

• Here is a complete Guide to Three.js, If you prefer learning via text-based tutorials;
• You can also check out the text-based tutorial by Three.js University
• You can also join the Reddit communities r/threejs and r/threejshelp.

If you have more links that could help, feel free  to mention them in the comments.

Why You Should Trust Us

Class Central, a Tripadvisor for online education, has helped 60 million learners find their next course. We’ve been combing through online education for more than a decade to aggregate a catalog of 200,000 online courses and 200,000 reviews written by our users. And we’re online learners ourselves: combined, the Class Central team has completed over 400 online courses, including online degrees.

Best Courses Guides Methodology

I built this ranking following the now tried-and-tested methodology used in previous Best Courses Guides (you can find them all here). It involves a three-step process:

1. Research: I started by leveraging Class Central’s database. Then, I made a preliminary selection of courses by rating, reviews, and bookmarks.
2. Evaluate: I read through reviews on Class Central, Reddit, and course providers to understand what other learners thought about each course and combined it with my own experience as a learner.
3. Select: Well-made courses were picked if they presented valuable and engaging content and they have to fit in a set of criteria and be ranked accordingly: comprehensive curriculum, affordability, release date, ratings and enrollments.

Fabio revised the research and the latest version of this article.