DEV Community

loading...
Cover image for Introducing React-Three-Fiber

Introducing React-Three-Fiber

alexeychang profile image Alexey Chang ・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

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 useFrame or 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

https://codesandbox.io/s/react-three-fiber-poc-udkii/

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

Discussion (1)

pic
Editor guide
Collapse
alexeychang profile image
Alexey Chang Author

Recommending react-three-fiber who wanna build 3D experience with React.js!