My path to Three.js and 10 resources to start learning it

In a previous post I talked about how I started to learn Three.js during my #100DaysOfCode challenge. Here I want to describe the whole process: what I learned, what issues I had and some resources I gathered that I wish I had when I started.

I became very curious about complicated 3d animation on the web and really wanted to learn how to create those amazing effects myself. After a little digging I found out that it is best to utilize the WebGl API. I looked into learning it via youtube tutorials but very quickly realized it would be a heck of a beast to tackle. But don’t worry, I soon found out that there are some very nice JavaScript libraries like Three.js (3d), Pixie.js (2d) and others that help you to get the same results with much nicer API.

I decided to focus on learning Three.js. This library has a large community, a good amount of tutorials and is very popular on the modern web. I picked this framework because I noticed that the vast majority of the websites I like utilize this exact one. So I started with their official website. It has a lot of examples, great documentation and a good list of tutorials.

My learning path was very hectic, just like it usually is when you start learning something new. I used numerous tutorials and blog posts to learn how to achieve different effects. Somehow I started with a quite advanced topic that utilized shaders - GLSL code - that’s executed directly on the GPU. That made me quite confused and unsure about how to use Three.js initially. I was taking courses and following the tutorials in the order of their discovery but if I were to start learning Three.js over again I would approach the resources in a different sequence.

Here is the list I would recommend to my previous self:

1. The Three.js official web site - Start Here. It’s perfect to learn about the library’s power and capabilities. It has a lot of amazing examples, documentation and information. Just spend a good amount of time there and always have it as a resource to come back to.

2. “Discover three.js” by Lewy Blue - this would be the first place for me to start actually learning. It’s a book by Lewy Blue - one of the main Three.js collaborators. This book is still being written, but the first chapter is fully available for free! Going to the docs right away is great, but for me I wanted something more like an overview of the fundamentals. The first chapter is definitely doing it’s job. I highly recommend that you start there as well as going through the docs of course. On May 11, 2020 Lewy posted a book update on his Twitter account saying that 7 new chapters are going to be available soon. So I’m keeping my fingers crossed for them to arrive shortly! I’m hoping it’s going to happen this year, because we really need good things happening this year.

3. The next resource for me would be “Three.js Fundamentals” - this series of tutorials are pretty good and they cover a lot of ground. I wasn’t able to follow it in the exact order, because I felt like it was not as simply put as in the previous book, but I was definitely going back to these tutorials as I went through the various topics.

4. “Learning 3D Graphics on the Web with Three.js” course on lynda.com - this is a must have resource in my opinion! I went through this course pretty late in my learning journey, so I knew a lot of things already. But I definitely picked up a lot of very useful information and I wished I found this course earlier. Check to see if you have a lynda.com account through your community library. That’s how I got access to their courses.

5. “Advanced Creative Coding with WebGL & Shaders” workshop by Matt DesLauriers on FrontendMasters - another great workshop that introduces the concept of shaders and additional packages to create more complicated effects. I would take this workshop when I knew the Three.js basics, but if you want to start a little earlier, don’t worry, Matt goes over the basics.

6. “The Book of Shaders” by Patricio Gonzalez Vivo and Jen Lowe. After I took all of those courses/tutorials above, I would start digging more into shaders. This online book is a pretty advanced resource that I have yet to finish entirely. In each chapter they have some challenges for you to try and figure out. To be honest a lot of the time I couldn’t solve them and got stuck and frustrated. Eventually I was googling the question and most of the time I could find an answer on Stack Overflow or somewhere similar.

7. Shadertoy.com - this is an online community of very talented and advanced WebGl developers and also a platform for creating GLSL shaders. It’s definitely worth checking out. Along with this site, I used the Youtube playlist “ShaderToy Tutorials” on The Art of Code channel. I found the explanations very to the point and pretty thorough. I would definitely recommend going over all of the videos, which I haven’t done yet, but am planning on doing in the future.

8. Codrops tutorials are worth checking out as well, but I’d say they are geared to more advanced developers. I wouldn’t start there until I had a good understanding of setting up scenes, texture mapping, creating simple animation, GLSL shaders, etc. A lot of the times authors assume that you have all that knowledge already and they omit the setup part of the code.

9. Yuri Artyukh Youtube channel - Yuri is an extremely talented frontend developer who does Sunday live streams, where he recreates some interesting 3d animations that he finds online as well as his own very creative sketches. His videos are not scripted, he literally just tries to achieve a certain effect in real time, and it’s very useful to see how he approaches different problems and how he solves them. I definitely learned a lot from his channel. Also he is my fellow Ukrainian from Kyiv, which I’m very proud about. I’m hoping to participate in his Kyiv workshops in the future.

10. There is also a book “Learn Three.js” by Jos Dirksen, if you are more of a book person. I only read a sample chapter and thought it was really good, I definitely see myself purchasing this book in the future.

The bonus resource I’m going to share is actually an upcoming course from a French creative developer Bruno Simon, who teaches the development at French “l’ecole”. I was bummed that I couldn’t take his classes, but the great news is - he is creating an online course right now. He promises to release the course by the end of the year so I’d subscribe for his Twitter and wait for the updates. From his teasers on Twitter I can tell it’s going to be a hit!

So this is the list I wish I had when I just started, a list which would have saved me a lot of time and energy and created a good learning path. Also it’s a good reminder to myself that there is so much exciting material that I can study, practice and incorporate in my work.

One issue I came across is that there are no good tutorials or articles for mid level 3d graphics comprehension. It seams to me that all the courses and articles fall into two categories:

• tutorials on how to create a 3d cube - which is like printing “Hello World!” to the screen, when you start learning a new programming language.
• posts about how to create a very advanced 3d animation with shaders, additional packages and some magic.

I wish there were more tutorials for people who fall somewhere in between, who know how to set up a scene, but can’t yet write an advanced custom shader from scratch. Unfortunately for right now, even with the knowledge that I’ve gained from the resources above and my experiments I wasn’t able to recreate all the ideas I have. I know it takes practice, but I wish I had something to rely on and go back to for some examples and explanations.

Despite my frustration, learning Three.js fundamentals was such a fun and exciting experience! I’m definitely going to continue studying WebGl and advancing my skills. This topic really sparks my interest and consumes my attention for hours. Also it’s so rewarding to see all the amazing results and be proud of what I have accomplished. It felt very nice to show the awesome visual effects to my friends and to the developer community as well as receiving lots of sweet kudos.

I hope my gathered resources will be helpful for the 3d web animation enthusiasts and will make learning fun and smooth. Feel free to share this list and have a wonderful time playing with Three.js!

If you know of more courses, articles, blog posts, tweets etc on this topic, please share them with me on Twitter or via the contact form on the home page.