Importing and Interacting with a 3D Model in React with React-Three-Fiber
Tags: react, frontend, threejs, 3d
Published: 2023-08-07 13:30:40

**_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:

![3d asset in the public folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chjnd3semq9sa9ey37fu.png)

You can download one from [here.](https://sketchfab.com/3d-models/popular)
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.

![Earth Model in app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kynyxybzz3n46sh2xljb.png)

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.](https://docs.pmnd.rs/react-three-fiber/getting-started/your-first-scene#adding-lights)

### 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](https://docs.pmnd.rs/) and explore the vast world of 3D rendering in React using **_React-Three-Fiber_**.