How to render a 3D model in your React application with Three.js
Tags: threejs, react, blender
Published: 2022-07-28 12:33:38

---
title: How to render a 3D model in your React application with Three.js
published: true
description: Tutorial for put a 3D model in
tags: threejs, react, blender
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91vwxdcwe53pnvo5e6rg.png
# Use a ratio of 100:42 for best results.
---

In this article, we'll cover how to put a 3D model in the React application with Three.js. We'll also cover how to configure the 3D model with Blender. So you will able to render a 3D object (glb) on your application.


## 3D model sourcing and configuration
First of all, we can find our favourite 3d model from [sketchfab.com](https://sketchfab.com/feed) and I would like to use 3D model with dae format. Then we can import it to Blender and apply the texture on the model. Eventually convert it from fbx format to glb format. Please find the keyboard model here: https://skfb.ly/6VHVW

![keyboard 3D model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/srzcky9o5m2h93yh8o3l.png)

![import dae file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oh27mqyjsy4osyz7n6yg.png)
 
For applying texture on different parts of the model:
1. Select every objects of the model and it will show orange when selected the object
2. Click `Material Properties` icon on right hand side panel
3. Choose the `Image Texture` for Base Color of Surface
4. Select the corresponding texture image files under textures directory of the downloaded folder

![applying image texture to the model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gcktrnlsx5zjulsu9ns.png)

Note: Select viewport shading icon at the top right corner to display the texture of the models

![select viewport shading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8d6m9wm0gt2bhm5gs4h.png)

Once we applied the textures, we could export the model to glb format.

![export to glb format](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/viirhuhohadierg8fadt.png)

## Render the 3D model in React app

Time to code now, we can start from installing the required packages:

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

There is a super awesome snippet [gltfjsx](https://github.com/pmndrs/gltfjsx) can turn GLTFs into React component. We can leverage this with following command and it will generate the JSX component automatically.

```shell
npx gltfjsx model.glt
```

We can create the container component to display the model.
```js
import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import Model from "./Model";

export default function App() {
  return (
    <Canvas
      camera={{ position: [3, 20, 14.25], fov: 8 }}
      style={{
        backgroundColor: "#111a21",
        width: "100vw",
        height: "100vh"
      }}
    >
      <ambientLight intensity={1.25} />
      <ambientLight intensity={0.1} />
      <directionalLight intensity={0.4} />
      <Suspense fallback={null}>
        <Model position={[0, -0.1, 0]} />
      </Suspense>
      <OrbitControls autoRotate />
    </Canvas>
  );
}
```

{% embed https://codesandbox.io/embed/3d-model-animation-forked-8v24n5?fontsize=14&hidenavigation=1&theme=dark %}

Hope you enjoy this article and can't wait to see mor interesting 3D object popping up.