React Three Fiber

What is Three.js?

A cross-browser Javascript library called three.js enables you to use the HTML5 canvas API and WebGL API to create and edit engaging 2D and 3D graphic animations in your browser.

The HTML5 canvas API standard enables the development of 2D graphics, animations, data visualisation, photo editing, and real-time video processing.

We have WebGL for 3D rendering since the Canvas API is primarily intended for 2D graphics. The Web Graphics Library API is referred to as WebGL. It enables the development of fast, dynamic 2D and 3D graphics on the web.

Introduction to React Three Fiber

Frontend development has advanced in a variety of ways over time, one of which is 3D animation. They encourage user involvement with your web application and provide the sense that you are interacting with real objects.

react-three-fibre is a React renderer for threejs that is open source. It facilitates the use of three.js in React by offering reusable and self-contained three.js components.

One of the best practices for integrating three.js with React is to use the react-three-fibre three.js renderer. This is because you will see how the components are self-contained and reusable.

Set Up Our React-Three-Fiber Application

Now that we are aware of what react-three-fibre and three.js are. We'll look at how to establish the react-three-fibre library in React and make a simple 3D component that takes part in the render loop in this section.

Create a New React Application

We'll build a new React app called my-3d-app-demo to show how 3D in React works with react-three-fibre. CRA (Create React App) is used in this article.

Use the command below to create a new React my-3d-app-demo application:

Navigate to the recently created my-3d-app-demo directory:

Start the React server and your React app should open a new tab in your browser using:

Installing React-Three-Fiber

For your React application, run the command given below to install react-three-fibre.

Using the Mesh Geometry Component to Create a 3D Cylinder

We'll create a reusable 3D component with mesh that holds the geometry and the material required to display a shape in 3D space to render things to the scene.

To create a new mesh that will automatically join to its parent, we'll use a cylinder geometry and a meshStandardMaterial. 

In your src folder, do the following:

• Create a new folder named component.
• Create a new file named Cylinder3d.jsx in the component folder.
• Inside the Cylinder3d.jsx file, paste the following code:

Using the Cylinder3d component previously:

• The useFrame hook is imported from react fibre. With the help of this hook, we will be able to manage features like rotation and generate effects.
• Additionally, we want to monitor the Cylinder3d component's hover state since we want the colour to switch from white to red when the mouse hovers over it.
• The mesh state responds to user input and interacts with events via the onClick and onPointerOver properties.
• Additionally, we set the wireframe prop, which requires a value of either true or false.

3D Cylinder Component Rendering

The following code should be added to the App.js file:

This is how our 3D Cylinder should appear:

Including Lights in the Scene

In this section, we'll install and examine the point light and ambient light lights to see how they change the application.

If pointLight is added to the scene

A single point can radiate light in all directions, which is referred to as a point light.

Within the App.js file's <Canvas /> component, insert the next line as  follows:

The position prop is used to specify the light's direction on the 3D cylinder.

This will make our 3D cylinder more visible, as demonstrated below:

Including ambient light in the scene

This light has no direction and uniformly illuminates every object in the scene.

In the App.js file, include the component inside the <Canvas />component:

The following outcome will be achieved when the ambient light and the point light are combined:

Final Application

We're going to render several variations of the 3D cylinder with various positions and props for the final demonstration.

Change the code in your App.js file as follows:

As a result of the previous part:

Canvas No.2

We set the ambient light's intensity prop to 0.5. The Wireframe prop is set to true, giving the cylinder an outline appearance.

Canvas No.3

We choose yellow as the colour for the ambient light. Our final 3D cylinder output should resemble the following:

How does React-Three-Fiber Work?

A new THREE object will be effectively created by each Fiber component and then added to a scene. Although knowing how it works is not strictly necessary to use Fiber, it will better prepare you to handle any issues that may arise in your projects, read other people's Fiber code, and even contribute to them.

Consider this brief React example:

This is equivalent in three.js to:

Explanation:

A new scene will be created by our Canvas element, and Fiber will correctly instantiate a new object for every component and combine them in a scene graph!