React-Three-Fiber | How three.js is used with React.js

React-Three-Fiber | How three.js is used with React.js

Introduction

React-three-fiber is the react renderer for three.js. It means that all the functionality of three.js is supported in this library. It doesn’t depend on any particular version of three.js. So, overall there are no limitations and no performance lag.

Rather than using divs and spans, react-three-fiber (R3F) lets you render Three.js objects like meshes, lights, cameras, and shaders. Your code looks more like this:

const MyScene = () => {
return (
<Canvas>
<PointLight position={[10, 10, 10]} />
<Camera position={[0, 0, 10]} />
<Product color={selectedColor} />
</Canvas>
);
};

You declare the 3-D objects you want in a scene and R3F takes care of running the imperative Three.js code under the hood. And, in the same way that React gives you hooks to access the primitive DOM elements via refs, R3F lets you access the primitive Three.js objects for when you need a little more control.

Use Cases
Three.js is great for all kinds of 3-D experiences on the web, and I’d say you should always consider using react-three-fiber to manage a Three.js scene, whether that’s for art, adding a 3-D product viewer to an e-commerce site, VR/AR experiences, productivity tools, or even games.

If you’re already building a web page in React and need to add 3-D functionality, you can use all the same state management libraries, data fetching abstractions, and pass data and props between your 3-D scene and other parts of your React project.

Performance

R3F on top of Three.js has the same performance characteristics as React on top of the DOM. Any abstraction has some overhead, and theoretically it’s possible to write faster lower-level code yourself, but in practice and at scale, React’s component model makes balancing complexity and performance significantly easier.

But, building performant 3-D experiences on the web can be challenging regardless of the abstraction you’re using. Once you reach a certain level of complexity, you may need to start digging in to how the GPU and WebGL work in order to achieve your performance goals. You’re significantly more likely to be bottlenecked by your specific approach rather than by the abstractions provided by R3F or Three.js.

What You Need to Know

The world of 3-D can be overwhelming at first. These libraries and abstractions help significantly, but building 3-D experiences can require understanding a few new concepts.

In the same way that you need to understand HTML when using React, you need to understand Three.js when using R3F, since ultimately, R3F is just a way to manage a Three.js scene. All of the actual renderings is done by Three.js. You will need to reference the Three.js docs when working with different types of concepts.

If you’re new to Three.js you should get comfortable with these core Three.js concepts first:

Cameras
Lights
Materials, textures, shaders
Geometry
Meshes
3-D model file formats

Once you’re comfortable with these, the react-three-fiber documentation will make a lot more sense.

The last section of this article is a roundup of documentation, tutorials, and community libraries that will help get you started. Hopefully this overview and these resources give you everything you need to start building 3-D experiences on the web. Good luck!