Wawa Sensei logo

What is React Three Fiber?

Before we start coding, let's take a look at why we are using React Three Fiber and what it is.

WebGL

WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins.

It is based on OpenGL ES, a low-level 3D graphics API for embedded devices. WebGL allows for hardware-accelerated rendering of 2D and 3D graphics, which makes it possible to create complex visualizations and games that run smoothly in the browser.

But writing WebGL code directly is very difficult and time-consuming. That's where Three.js comes in...

Three.js

Three.js is a JavaScript library that provides a simple API for creating and animating 3D graphics in the browser using WebGL.

It abstracts away many of the low-level details of WebGL, making it easier to create complex 3D scenes and animations.

React Three Fiber

React Three Fiber is a React renderer for Three.js that allows you to use Three.js in a declarative way, similar to how you use React to build user interfaces.

You will also see it referred to as R3F.

R3F provides a set of React components that correspond to Three.js objects, such as meshes, lights, and cameras, and allows you to use React's component model to build complex 3D scenes and animations.

For the same result, React Three Fiber code is much shorter and easier to read than Three.js code.

Here is a simple example to display a cube with both libraries:

// Three.js
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// React Three Fiber
<mesh>
  <boxGeometry />
  <meshBasicMaterial color={0x00ff00} />
</mesh>

Poimandres

Poimandres known as pmndrs is a highly active developer collective responsible of React Three Fiber and other very useful libraries such as:

  • drei: a collection of useful helpers and fully functional components for r3f
  • gltfjsx: a command-line tool that generates ready-to-use components from gltf files (3D models file format)
  • react-spring: a spring-physics based animation library
  • zustand: a small, fast and scalable bearbones state-management solution
  • react-xr: a set of React components that make it easy to create VR and AR experiences using R3F ... and many more!

We will be using some of these libraries in this course.

I recommend you to check them out, and to do it often, as they are constantly updated with new features and improvements.

Alternatives

There are other libraries that provide similar functionality for other front-end frameworks, such as Threlte for Svelte, TresJS for Vue, and Angular Three for Angular.

Recently pmndrs has also release drei-vanilla which is a vanilla version of drei for those who want to use its components without React.

< Introduction
Setup >