React-Three-Fiber: Build 3D for the Web With React and WebGL Easily

Write three.js interactions directly to React with components and clear scopes and props

Riccardo Giorato
Feb 7 · 3 min read

What’s React-Three-Fiber?

React-Three-Fiber or R3F is a powerful React renderer for three.js scenes, both for the web and with React Native.

Why should I use it?

To help you increase the speed of creation of your scenes. With R3F you’ll spend less time doing boring stuff and more time defining custom components, R3F will do all of these for you:

  • Creating the canvas
  • Binding events
  • Creating Three.js objects
  • Starting the render loop

Why Should I Use It?

Component-based scene

3JS allows us to write three.js objects in a declarative way. That means we can build up our scene creating re-usable React components, leveraging props, states, and hooks.

Built-in helper

It comes with some useful functions like raycaster and on each mesh it gives you access to all the useful pointer events like onClick, onPointerOver, onPointerOut, etc.

Hooks

It comes with lots hooks, such as useFrameor useThree, from which we can get useful objects like renderer, scene, camera, etc.

Dependency-free

Since it’s “just” a renderer it doesn’t rely on the three.js version, so you’re free to choose your preferred version.

Re-render only when needed

It works like any React component, updating itself on a dependency change (state, store, etc).


Installation

To install it with npm:

npm install three react-three-fiber

To install it with Yarn:

yarn add three react-three-fiber

You only need to add three (three-js) and this great module, no other dependencies and it’s only 33kB!


How Do I Use It?

Simply use the Canvas component to create a three-js canvas — this will take the whole height and width of its container.

Then, within the Canvas node, you’ll be able to add all your dynamic components — like your nested hierarchy of react components as well as custom ones. In this case, we created a Box component with some custom behaviors.

We used useRef to access the mesh of the cube. After it’s initialized by three-js, inside, canvas is able to keep a connection to it, altering scale or changing direction when hovered over with mouse or touch.

If you scroll down and take a look at the Canvas you will see other official components from three-js, such as ambientLight and pointLight.

<Canvas><ambientLight /><pointLight position={[10, 10, 10]} /><Box position={[-1.2, 0, 0]} /><Box position={[1.2, 0, 0]} /></Canvas>

To sum up, you will need to use just these functions/hooks from Fiber if you want to start using this great library to add more 3D:

import { Canvas, useFrame } from 'react-three-fiber'

If you enjoy your experience with this library I suggest you to start looking at a more grounded introduction to the three-js and WebGL world here: https://threejsfundamentals.org/.

If then you feel you’d like to explore more of the capabilities of fiber, you can read more in the official documentation.


What’s Your Opinion of This Library?

There are other high-level libraries, like A-FRAME, that build similar experiences and pages with a 3D element on the web.

But the real power of R3F is being able to access the low-level API of three-js, helping you become more familiar with this incredible WebGL library. It also helps you keep a clearly defined hierarchy of components, to be reused all over.


CodeSandbox React-Three-Fiber Playground


If you want to learn more about Hooks

I have personally read Learn React Hooks when I started using hooks and it helped me understand them to use tools such as useFrame or Canvas hook: https://amzn.to/2Y8hoX9


References and Resources

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store