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

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!