Introduction 00:00

Until now, we’ve been learning Three.js to create web applications in pure JS. However, sometimes we need to integrate Three.js into very specific environments like, let’s say, a framework.

One of the most popular frameworks these days is React and we are going to learn how to integrate Three.js into it.

While it might be considered a constraint, React actually makes the process of creating Three.js applications much easier.

And if you don’t know React and you are thinking about leaving, don’t worry, we are going to learn it together in the next lesson.

React 01:18

As we mentioned earlier, React is a framework, but following the official website, React is actually a library whose purpose is to create user interfaces.

The idea is to write code in JSX (a tag-based language very similar to HTML), after which it gets compiled into a website with the usual content such as a header, a footer, some texts, lists, etc.

“Not very different from writing HTML”, you might think.

Here’s the catch: when the data changes, the UI will change automatically without you doing anything. In other words, the UI will “react” to the data. We also call that phenomenon “data-binding”.

On top of that, React also integrates many tools that will make a developer’s life easier. Besides easily applying structure, you will also be able to hook parts of your app together and be notified when something changes.

React is great because it not only allows you to create websites where the displayed data changes frequently, but it also benefits from the many tools and its inherent structure. This is why we also talk about React as a framework.

Also note that, although we’ve been talking about React as a way of building websites (since Three.js is for the web), React can be used to build a lot more.

There are some alternatives like Vue.js and Svelte, but those are less popular and Three.js doesn’t integrate as well with those alternatives as it does with React.

These days, React is so popular that it’s a must-have in your toolset, especially if you are looking for a job or to integrate with teams.

Drawbacks

Sounds awesome, right? Well, I should point out that there are a few drawbacks to consider:

• You need to learn it. Though it sounds obvious, React is quite a complex library and it takes time to learn it.
• It’s still under development. React is very stable and shouldn’t change that much. Still, it is prone to changes (like any maintained library). Keeping an eye on potential changes is crucial.
• If your app breaks down, debugging might get harder because of the complexity and the abstraction.

React Three Fiber 07:11

Earlier, we noted that Three.js integrates well with React and this is thanks to React Three Fiber.

Before trying to convince you with long sentences, just check those examples:

• https://codesandbox.io/s/threejs-journey-level-1-kheke
• https://codesandbox.io/s/baking-soft-shadows-hxcc1x
• https://codesandbox.io/s/backdrop-and-cables-2ij9u
• https://codesandbox.io/s/bruno-simons-20k-challenge-2qfxj4
• https://codesandbox.io/s/building-dynamic-envmaps-e662p3
• https://codesandbox.io/s/interactive-spline-scene-live-html-f79ucc
• https://codesandbox.io/s/sport-hall-s006f
• https://codesandbox.io/s/ballpit-mvkqs
• https://codesandbox.io/s/space-game-i2160
• https://codesandbox.io/s/layer-materials-nvup4

React Three Fiber is what we call a React renderer. The idea behind a renderer is that you write code in JSX (the tag-based language we mentioned earlier) and the data then gets converted to something else (in our case a Three.js scene).

React Three Fiber will also take care of a lot of default settings for us and make good use of React tools.

It has been around since 2019 and hasn’t stopped evolving and improving. Since its version 8 (May 2022), it is considered to be very stable and the syntax and structure shouldn’t change too much.

Writing “React Three Fiber” is a bit tedious, but we can write it “R3F” or just “Fiber”. Let’s use R3F from now on.

Some links about R3F:

• Github: https://github.com/pmndrs/react-three-fiber
• Website: https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
• Examples: https://docs.pmnd.rs/react-three-fiber/getting-started/examples

The authors

R3F was created by Paul Henschel, also known as 0xca0a:

• https://twitter.com/0xca0a
• https://github.com/drcmda

Paul is the founder and manager of Poimandres (PMNDRS), an open-source collective of developers at the origin of many libraries that we are going to use in the following lessons.

Quoting Paul: “The idea behind Poimandres is to form a collective where developers can join and help one another. It also serves to fund, highlight and promote projects.”

Some links:

• https://twitter.com/pmndrs
• https://opencollective.com/pmndrs (if you want to contribute)
• https://pmnd.rs/discord

I asked Paul to say a few words about R3F and why he created it. Here’s his message:

“When I started out with WebGL and Three.js years ago, the outlook was bleak. I wanted to do things I saw around, made by agencies that had high-quality output, but they rarely, if ever, shared.

As for Stackoverflow, discourse, etc., the information was not nearly enough to touch it remotely. Every project sent me into endless sub-tasks, one harder than the other, especially since I lacked a proper math background. Over time it took the fun out of it, since, even the thought of trying something would scare me.

Yet, in generic frontend, it is not at all like this, nobody needs to be an expert in everything. We are used to sharing and we have great means to do it: components. For a web dev, it is trivial to pick any package and use it, or wrap functionality and distribute it so others may benefit.

In WebGL and Three.js, other than dispersed special purpose libraries and three/examples, I always felt that was missing.

The whole idea of react-three-fiber is to give Three.js better means to share and to pack complex functionality into self-contained units.

I hope that the components that have accumulated since then will change the outlook for beginners: Three.js doesn’t have to be daring, even without a formal background, you pick your own battles and learn what interests you while being able to plug your app together with things that others already struggled with, and then shared.”

Table of contents 18:21

Now we’ll kick off the chapter about React and React Three Fiber.

Here’s a glimpse of what you are going to learn next:

1. First React Application

In this lesson, we are going to forget about Three.js for a moment and focus on React.

The lesson is very beginner-friendly and if you haven’t touched React in your life, you are in the right place.

We are going to learn the basics to be able to use R3F, but also go a little further so that we have a good understanding of the library in order to use it on real projects.

2. First R3F Application

In this lesson, we are going to learn what R3F is, how to install it and how to use it.

3. Drei

As mentioned earlier, R3F is also about code sharing.

People have been creating a lot of helpers (as we call them) and most of them have been regrouped under what we call Drei.

It’s a goldmine of pre-made components ready to be used.

4. Debug

We already learned solutions to debug a Three.js application in the Debug UI and Performance tips lessons, but R3F and React made even more solutions possible.

We are going to cover a new Debug UI library, but also a new monitoring library.

5. Environment and Staging

There are many solutions to make your scene look good.

In this lesson, we are going to talk about three important elements: lights, shadows and environment maps.

We’ve already dealt with these in native Three.js, but you’ll see that implementing them has become even better with R3F.

6. Load a Model

A classic example is to load a model and display it. And yes, it got easier with R3F.

7. 3D Text

In order to understand the differences between native Three.js and R3F, we are going to re-do some of the lessons.

8. Portal

This is another exercise where we re-do previous lessons. This time, we are going to implement the portal scene.

9. Mouse events

One of the most appreciated features in R3F, is how it handles mouse events. We should actually talk about “pointer” events since R3F also manages touch devices.

Do you remember the Raycaster and all those tricks we had to resort to? That’s in the past now.

10. Post-processing

Same thing goes for the post-processing. Do you remember EffectComposer and those passes we had to implement? Well, post-processing is going to be much easier now, but also more performant.

11. Fun and simple portfolio

In this lesson, we are going to create a new project. It’s going to consist of a mini portfolio and we are going to use some tricks to make it look good with minimum effort.

12. Physics with R3F

One of the hardest lessons was the one where we added physics, and that’s a bummer since it’s one of the coolest features we can have on a 3D website.

Again, R3F will make things much easier and it’s also going to be the opportunity to discover a new physics library named Rapier.

13. Create a game with R3F

Finally, and in order to gather everything we learned into one project, we are going to create a mini-game.