January 24, 2022

Issue 07: Learning Three.js and an early look at my first scene ⚡️

Hi there friend 👋

I hope the year is off to a good start! I’ve been willing to send out a new issue of this newsletter a bit earlier but got distracted busy, but for a good reason: I finally got started, and got pretty far, with Three.js, the Javascript 3D library.

This one was on my personal roadmap for way over a year, to be honest, but I kept pushing it back and every time I’d try to get into it I’d give up at the first challenge. I know many of you have been there and reached out after seeing me posting my progress on Twitter to ask for some advice I’d give in their own learning journey. So I thought I’d dedicate this newsletter to some of the steps I took/projects I made and also why I decided to do it now.

Why even learn Three.js?

That’s quite a subjective question. If I had to give you my answer, the catalyst for my will to finally learn how to build advanced 3D scenes/web experiences, was browsing godly.website: a curated list of the most unique, beautiful websites out there.

I was intrigued by many of the websites there, and how they were managing some of their transitions and animations. Every time I’d open the inspector to take a closer look I’d always see one thing: canvas, canvas everywhere. And whenever you see a sleek animation in a canvas there’s a good chance that WebGL is involved. And what’s an easy way to do WebGL? It’s Three.js.

In a nutshell: if I/you wanted to build the same kind of unique experience and stand out as a developer/creator, learning Three.js could seem like a good idea (plus having a new tool under your belt is always nice 😄).

Where to even get started?

Anything dealing with 3D can be quite overwhelming at first, and Three.js is no different. On my end, I chose to go through the learning process with Three.js Journey, but I can understand that the price tag can be quite steep in some geographies, so here’s a rough roadmap and free resources I’d recommend to a friend if they were to ask me where to get started:

1. The basics: start with learning how to set up a scene:

   • Learn how to place objects in space
   • How to instantiate and place the camera
   • What is the renderer
   • Handle screen resize

   I found this fantastic hands-on blog post ✨ Discover Three.js: Your first scene that describes in detail all the concepts involved when it comes to creating your first rendered scene.

2. Learn how to animate things. In Three.js animating is actually quite simple, you can think of it like a flipbook: you move your objects a little bit on each frame. You can start by animating something simple like rotating a cube.

3. Go play with the different materials and lights to see how you can create realistic renders with shadows.

4. Deep dive in the specifics such as:

   • particles
   • textures
   • shaders (which can be a bit frightening at first 😰)
   • loading custom 3D assets

The first three items (1,2, and 3) I detailed above, to me, are the fundamentals that you’ll need to undertake any project. At a certain point, your own curiosity and the Three.js docs alone will get you further.

After that, my other advice would be to start looking at 3D scenes you like and work towards rebuilding them to apply what you learned. Like Josh Commeau says in his blog post titled How to Learn Stuff Quickly: you will “need to be able to convert raw information into usable skills.” and for that you need to escape “tutorial hell”.

For Three.js, it’s no different: you’ll need to build stuff! Pick a simple scene, and try to reproduce it as closely as possible. On my end, I chose to rebuild this WebGL animation from the Linear 2021 release page.

---

👉 If you want to learn how I proceeded and how I achieved this result, you can read my latest blog post Building a Vaporwave scene with Three.js. As a subscriber, you get to have an early look while I add some final touches to it 😄 I’ll announce it publicly on Tuesday.

---

Need inspiration?

Here are some of my favorite sources of inspiration for Three.js/WebGL content:

• godly.website which I mentioned earlier
• Look for #genuary2022 #three.js on Twitter. You’ll find a lot of generative art that’s built using Shaders, or basic Three.js. Often the developer will share the source code from which you can learn a lot by just reading it.

• Take a look at @0xca0a’s content: one of the maintainers of React Three Fiber. He shares some of the cool projects that the other members of the community are undertaking, often with links to some source code for you to take a peek at 👀.

• The Three.js documentation has tons of examples. Looking at those is a great way to get introduced to some individual concepts or post-processing effects with links to the original code.

I’m very excited about exploring Three.js even more by creating more sophisticated scenes as I learn new techniques. Moreover, I’ll be looking at merging some of that newly acquired knowledge with what I learned with some of my other favorite subjects such as Framer Motion (yes, you can use Framer Motion with Three.js, and yes I will write about that 😄, soon). In the meantime, I’ll be on the lookout for your own Three.js creation 👀 so don’t hesitate to send some of your own work to me!

– @MaximeHeckel

---

Did you like this Maxime’s ideas issue? Click here to spread the word and share this newsletter on Twitter. I really appreciate your support!

Want to check out other topics I wrote about? There’s a lot of great content waiting for you on my blog 👉 blog.maximeheckel.com