Importing and Interacting with a 3D Model in React with React-Three-Fiber

#react #3d #frontend #threejs

React-Three-Fiber is a powerful library that combines the strengths of React with the capabilities of Three.js. In this article, we're going to examine a particular piece of code which demonstrates how to implement an interactive 3D Earth model using React-Three-Fiber and additional helper libraries such as @react-three/drei.
We will be assuming you already have a basic understanding of React and a new React application set up.

Step 1: Install Required Packages

First off, let's install the dependencies. Run the following command in your terminal (make sure you are in the root directory of your project):

npm install three @react-three/fiber @react-three/drei

Here, three is the base library that react-three-fiber uses to create and render the 3D scene. @react-three/drei is a helper library for react-three-fiber that provides a set of reusable components and functions.

Step 2: Download a 3D Model

Make sure you have downloaded a 3D model and placed it in the public folder in the root directory of your project like so:

You can download one from here.
We will be using one of .gltf format in this tutorial.

Step 3: Setup the Canvas

Now, import the Canvas from @react-three/fiber in your React component.

import { Canvas } from '@react-three/fiber';
Use the Canvas inside return like so:



import { Canvas } from '@react-three/fiber';

const EarthCanvas = () => {
  return (
    <Canvas frameloop="demand" camera={{ position: [-4, 3, 6], fov: 45, near: 0.1, far: 200 }}> 
    </Canvas>
  );
};

export default EarthCanvas;

The Canvas is taking a couple of props:

frameloop prop set to demand tells react-three-fiber to only re-render when state changes occur.
camera prop is used to adjust the camera's position in the scene, the field of view, and the near and far clipping planes. You can adjust these to your liking.

Step 4: Import 3D Model in React Component

To import the 3D model that we placed in the public folder of our project, we will use a hook called useGLTF from @react-three/drei.

Use it like this on top of your component:

const earth = useGLTF('./planet/scene.gltf');

The useGLTF hook takes in as argument, the path to your 3D model scene file.

Step 5: Render the 3D Model

We can render the component by using the primitive component. It is a low-level react-three-fiber component that can represent any three.js object.

<primitive object={earth.scene} scale={2.5} />

The scale prop is used to adjust the model's size.

Now, we can use this component in App.jsx to see it in our browser. The return statement in App.jsx will look like this:



  return (
    <div className="flex justify-center items-center h-screen w-screen">
      <EarthCanvas />
    </div>
)

And voilà, that's all you need to render your 3D model in your React app.

If you are unable to see your model or if it's too dark, try adding an ambientLight in the scene.

<ambientLight intensity={0.5} />

There are other options for adding light like directionalLight and spotLight as well. You can explore more about these here.

Step 6: Adding Interactivity

To add interactivity to our model, we can use the OrbitControls from @react-three/drei like so:

<OrbitControls autoRotate enableZoom={false} maxPolarAngle={Math.PI / 2} minPolarAngle={Math.PI / 2} enablePan={false} />

The autoRotate prop enables the model to rotate automatically.
enableZoom and enablePan props are set to false in this case to disable zooming and panning.
maxPolarAngle and minPolarAngle props are used to restrict the vertical orbiting range of the camera around the 3D object.

You will now be able to rotate the model with the cursor as well.

So the final code of our EarthCanvas Component looks like this:



import { Canvas } from '@react-three/fiber';

import { OrbitControls, useGLTF } from '@react-three/drei';

const EarthCanvas = () => {

  const earth = useGLTF('./planet/scene.gltf');

return (

    <Canvas className="cursor-pointer" frameloop="demand" camera={{ position: [-4, 3, 6], fov: 45, near: 0.1, far: 200 }}>

      <OrbitControls autoRotate enableZoom={false} maxPolarAngle={Math.PI / 2} minPolarAngle={Math.PI / 2} enablePan={false} />

      <primitive object={earth.scene} scale={2.5} />

    </Canvas>

  );

};

export default EarthCanvas;

Final Thoughts

That's the end of this tutorial. We rendered a 3D model in our React app using threejs, react-three-fiber and react-three/drei, and added some interactivity to make it more fun.

You can find the official docs here and explore the vast world of 3D rendering in React using React-Three-Fiber.