I was browsing various design awards for frontend development and stumbled upon the CSS Design Awards. Three.js was used in all the top 10 websites on the list.

For creating simple animations, CSS Code will do the job. So, if that’s what you’re looking for, the CSS Animation Best Courses Guide might be more suitable for you. But if you are looking for advanced animations and immersive experiences for your users, I recommend learning Three.js.

When learning something new, I usually start by searching for free courses to gain basic knowledge about the subject before delving into paid courses to deepen my understanding. Thus, I would like to present you with a list of free courses available for Three.js before listing the paid ones.

These free courses may provide you with basic to intermediate knowledge about Three.js and how to use and add 3D models to your websites, which can already get you started with using 3D models in your projects.

Javascript can be tricky when it comes to accessibility. I also recommend you look at accessibility when making 3D websites to make it easier for everyone to access your website, making it more inclusive. Here is the Accessibility Best Courses Guide.

While the Three.js documentation is quite comprehensive, it can be overwhelming at first. If you’d like to dive into the basics through video tutorials and small projects, here are my top picks. Click on one to skip to the course details:

Three.js: Building Dynamic 3D Scenes on the Web

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.

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 with 100K online courses and 200K+ reviews. 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.

Course Ranking Statistics

Here are some aggregate stats about the ranking:

• All of the courses in this ranking require an intermediate knowledge of HTML/CSS, Javascript, and 3D modeling (check out Blender Best Courses Guide to learn how to create basic models with Blender).
• All courses are free, except for the last one.

1. Three.js Tutorial 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 tutorials cover a wide range of topics, from beginner to advanced, starting with an introduction to Three.js and gradually building up to more complex topics such as importing 3D models, creating realistic rain effects, and post-processing effects. Additionally, the tutorials demonstrate how to add 3D models and create 3D worlds to websites in just a few minutes. They also explain how to create ultra-realistic lighting setups and reflection effects.

How You’ll Learn

You will learn the basics of Three.js and then create simple projects by following the videos.

2. Three.js Tutorial Crash Course (Chris Courses)

This crash 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.

What You’ll Learn

This course covers the following topics: adding a box and a plane mesh to the scene, rotating and animating the box, and adding directional lights to the scene. Additionally, you will learn how to add depth and jaggedness to the plane and modify the scene with dat.gui, a user interface library for configuring parameters. The course also demonstrates how to add hover effects, set exact plane dimensions, and add randomized vertice movement to the plane. Finally, it concludes by showing how to add an interface with HTML and CSS.

How You’ll Learn

You can follow along with the video.

Fun Facts

• Chris also has an intermediate Three.js course, where he creates an interactive globe with custom shaders.
• He covers a lot of stuff on Gamedev using Javascript for people interested in game development. Some of his freemium game development videos can be found on his website chriscourses.com.
• You might also find tons of videos in 2D Animations using Canvas.

3. Three.js Tutorials (Wael Yasmina)

Wael Yasmina’s tutorials aim to simplify WebGL for beginners. Almost all the tutorials in her channel are aimed at learning WebGL and animation for the web.

What You’ll Learn

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. The differences between perspective and orthographic cameras are explored and demonstrated in the course.

In addition, the course explains and demonstrates different types of lights, such as ambient, directional, and spot lights, and covers adding shadows to the scenes and using fog to create atmospheric effects. Adding textures to the scenes and individual objects is also covered in the course. Learners will learn how to select objects from the scenes and manipulate the positions of their vertices. The course also covers creating custom shaders using vertex and fragment shaders.

Moreover, the course demonstrates how to import 3D models into the scenes and make the canvas responsive to different 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.

How You’ll Learn

You will learn by following along with the videos.

4. Getting Started with Three.js in 2021! (Design Course)

Well, we may no longer be in 2021, but 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

The tutorial covers the process of installing the starter kit and explains the folder structure and project overview. It then goes on to explain the boilerplate code provided by the starter kit and how to start a new project. The majority of the tutorial focuses on adding interactivity to the project, such as mouse hover and click events, and demonstrates how to incorporate other HTML elements into the project, such as a button and text.

How You’ll Learn

You will learn by following along with the video.

Fun Facts

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

5. React 3D Portfolio Website with Three.js | Build and Deploy Responsive React Portfolio (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

You will learn how to create a portfolio and add interactive 3D components with animations using Three.js

How You’ll Learn

The course provides a hands-on learning experience by following along with the video tutorials.

6. Code a Squid Game JavaScript 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 by freeCodeCamp 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.

What You’ll Learn

In this course, you will learn the basics of Three.js, including how to create and render a scene, load 3D models, and create classes using GSAP animation. You will also learn how to implement keypress handling to move the player in a game, and how to add game logic to make the game functional. By the end of the course, you will have a strong foundation in game development with Three.js.

How You’ll Learn

The course provides videos for hands-on learning and practice.

Fun Facts

• You can find some more tutorials where the Angle Brace has created an animated landing page and another ocean cleaning game with Three.js

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

What You’ll Learn

The tutorial covers topics such as setting up the environment, loading assets, adding lighting and cameras, creating animations, and adding interactive elements like a theme toggle and progress bars. The tutorial also covers the basics of responsive web design and includes tips for deploying the website using Git/Github/Vercel. The video is divided into several sections, each covering a specific topic, and includes optional sections for advanced users.

How You’ll Learn

You will learn by following along with the video.

8. Three.js Journey (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.

What You’ll Learn

The course covers a wide range of topics, including the basics of Three.js, 3D modeling, animation, lighting, cameras, and much more. It also includes practical projects and exercises that help you apply what you’ve learned and build your own 3D applications. He also covers the basics of blender to get you started with making 3D elements for your portfolio.

How You’ll Learn

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.

Fun Facts

• In addition to the course content, students also have access to a community of fellow learners and a private Discord server, where they can ask questions, share their projects, and get feedback from the instructor and other students.

Bonus

This section aims to provide a comprehensive collection of resources for learners to continue their Three.js journey beyond the listed courses with relevant articles and documentation providing learners with additional learning materials to complement their coursework.

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

If you have more links that could help, please do not hesitate to mention them in the comments.