How to render a 3D model in your React application with Three.js

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 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

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

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

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

Render the 3D model in React app

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

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

There is a super awesome snippet gltfjsx can turn GLTFs into React component. We can leverage this with following command and it will generate the JSX component automatically.

npx gltfjsx model.glt

We can create the container component to display the model.

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>
  );
}

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