What is React -Three-Fiber or Three.js Fiber and why should you use it?

There was once a time when rendering 3D computer-animated images depended on the presence of special browser plug-ins, which clients had to install to alter their browsers. The WebGL library (Web Design Library) was created in the early 2000s to solve this issue; it allows the rendering of 2D and 3D illustrations inside any supported web browser without the use of external plug-ins.

Besides WebGL, we have another innovation: Three.js. Three.js is a high-level JavaScript library that shows enlivened 3D illustrations in a web browser, without requiring browser extensions. Three.js contains many useful features such as geometry, lights, shaders, and certain animations.

If I’m going to learn a modern innovation on my own, I want to come up with something original and inventive. The choice of creating liveliness in the browser was both natural and prompt for me, and I began browsing technologies that I could use together with my favorite dialect — Respond. As I learned more about Three.js, I discovered that a library already exists specifically for coordinating with Respond. The library is called React-Three-Fiber and can be utilized to construct your scene declaratively with reusable, stand-alone components that respond to state and do not require any special treatment to work with Respond.
To begin utilizing React-Three-Fiber, essentially introduce it within the terminal of your Respond application with the taking after line of code.

Our first React-Three-Fiber application

Our react app needs to be set up with react-three-fiber by installing a number of conditions before we can start making our 3d scene. We’ll start with a standard create-react-app application. Use the npx create-react-app three-point-lighting command. You can also create a modern react sandbox on codesandbox.io. Once you have a fresh respond app run npm introduce three react-three-fiber to introduce the conditions we have to be complete this venture. It would additionally be a great idea at this point to replace the content of style.css with the following. Ensure that your 3D canvas component included afterward takes up the entire browser viewport by setting the height of all the parent components.

* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

Canvas can now be imported into index.js. Then change the App component to return the Canvas component. In this way, a WebGL canvas element is rendered at the top level of a react app.

import React from "react";
import ReactDOM from "react-dom";
import { Canvas } from "react-three-fiber";
import "./styles.css";

function App() {
  return <Canvas />;}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

The creation of our first three-dimensional object

With react-three-fiber, we start by creating a new react component. Let’s call this Esfera.

import React from "react";
import ReactDOM from "react-dom";
import { Canvas } from "react-three-fiber";

import "./styles.css";

function Esfera() {  return (    <mesh visible userData={{ test: "hello" }} position={[0, 0, 0]} castShadow>      <sphereGeometry attach="geometry" args={[1, 16, 16]} />      <meshStandardMaterial        attach="material"        color="white"        transparent        roughness={0.1}        metalness={0.1}      />    </mesh>  );}
function App() {
  return (
    <Canvas>
      <Esfera />    </Canvas>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Since we are using react-three-fiber, there are some unique new components available to us to use within its render method, even though this is a standard react component. The mesh component has two children, SphereGeometry and meshStandardMaterial. All three components are only available because the top-level Canvas element provides them via context to all of its children. This is what makes react-three-fiber so powerful. The API is translated into a React component-based API using three.js. All three of these are objects from three.js’ WebGL library. In general, the component is named the same as the Three.js version, but with a lower case first letter.

Documentations terms:

SphereGeometry

Mesh

You may have noticed in the mesh documentation that you need to pass two parameters in order to create a new mesh? You need to pass geometry and a material. This component tree is translated into three.js function calls by react-three-fiber and provided to the mesh as geometry and material children. Notice that the mesh, sphereGeometry, and meshStandardMaterial props match the options for each class in three.js To use react-three-fiber, you often need to review the three.js documentation.

Light up the world

Now there is a sphere in our 3D scene, but you may be wondering why it looks so black. Due to the lack of lights in our scene, the sphere is pure dark. Next, let’s add one.

import React from "react";
import ReactDOM from "react-dom";
import { Canvas } from "react-three-fiber";

import "./styles.css";

function Light({ brightness, color }) {  return (    <rectAreaLight      width={3}      height={3}      color={color}      intensity={brightness}      position={[-2, 0, 5]}      lookAt={[0, 0, 0]}      penumbra={1}      castShadow    />  );}
function Esfera() {
  return (
    <mesh
      visible
      userData={{ test: "hello" }}
      position={[0, 0, 0]}
      rotation={[0, 0, 0]}
      castShadow
    >
      <sphereGeometry attach="geometry" args={[1, 16, 16]} />
      <meshStandardMaterial
        attach="material"
        color="white"
        transparent
        roughness={0.1}
        metalness={0.1}
      />
    </mesh>
  );
}

function App() {
  return (
    <Canvas>
      <Light brightness={10} color={"white"} />      < Esfera/>
    </Canvas>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

The Complete Code for Getting Things Started

In order to create an impression of the three-dimensional space we are working in, let’s first add a floor and a backdrop plane to our scene.

import React, { useRef } from "react";
import ReactDOM from "react-dom";
import { Canvas } from "react-three-fiber";

import "./styles.css";

// Geometry
function GroundPlane() {
  return (
    <mesh receiveShadow rotation={[5, 0, 0]} position={[0, -1, 0]}>
      <planeBufferGeometry attach="geometry" args={[500, 500]} />
      <meshStandardMaterial attach="material" color="white" />
    </mesh>
  );
}
function BackDrop() {
  return (
    <mesh receiveShadow position={[0, -1, -5]}>
      <planeBufferGeometry attach="geometry" args={[500, 500]} />
      <meshStandardMaterial attach="material" color="white" />
    </mesh>
  );
}
function Sphere() {
  return (
    <mesh
      visible
      userData={{ test: "hello" }}
      position={[0, 0, 0]}
      rotation={[0, 0, 0]}
      castShadow
    >
      <sphereGeometry attach="geometry" args={[1, 16, 16]} />
      <meshStandardMaterial
        attach="material"
        color="white"
        transparent
        roughness={0.1}
        metalness={0.1}
      />
    </mesh>
  );
}
// Lightsfunction KeyLight({ brightness, color }) {  return (    <rectAreaLight      width={3}      height={3}      color={color}      intensity={brightness}      position={[-2, 0, 5]}      lookAt={[0, 0, 0]}      penumbra={1}      castShadow    />  );}function FillLight({ brightness, color }) {  return (    <rectAreaLight      width={3}      height={3}      intensity={brightness}      color={color}      position={[2, 1, 4]}      lookAt={[0, 0, 0]}      penumbra={2}      castShadow    />  );}function RimLight({ brightness, color }) {  return (    <rectAreaLight      width={2}      height={2}      intensity={brightness}      color={color}      position={[1, 4, -2]}      rotation={[0, 180, 0]}      castShadow    />  );}
function App() {
  return (
    <Canvas className="canvas">
      <GroundPlane />
      <BackDrop />
      <KeyLight brightness={5.6} color="#ffbdf4" />      <FillLight brightness={2.6} color="#bdefff" />      <RimLight brightness={54} color="#fff" />      <Sphere />
    </Canvas>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Conclusion

Build your scene declaratively with re-usable, self-contained components that react to state, are readily interactive, and can tap into React’s ecosystem.

As you will see, the method itself is quite complicated, but I must admit it’s absolutely great, considering that you can access the 3D scenes all over — even on portable devices! You should definitely try react-three-fiber if you’re interested in web development, and I assume you are if you’re reading this blog post. Although there are some downsides and a lot of googling to be done, it is definitely one of the best experiences! I highly recommend it! React-Three-Fiber docs