Matthew Clark

Posted on Aug 27, 2020

Introducing React-Three-Fiber

#react #3d #threejs

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

Top comments (1)

maxmarrie • Dec 27 '22

Thank you for sharing information about React Three Fiber. React Three Fiber is a powerful library that allows developers to create 3D graphics and animations using the React JavaScript library. It is a popular choice for creating interactive and immersive experiences in applications, such as virtual reality and gaming.

As for Fiber installation in Cape Town, it is important to note that fiber optic cables are a type of communication cables that transmit data using light signals. They are typically used for high-speed internet and telephone connections, as well as for transmitting data in other industries, such as healthcare and finance.

DEV Community