How to Render a 3D Model in a React JS Application

Hi👋,

Browsers nowadays are becoming more powerful than in the past and now they can easily render different complex animations. You might have seen many websites render a 3D model without any performance issues. In this article, we’ll use Three.js to render an iPhone model into a React app.

Before starting this tutorial, let me show you a demo website that renders this template. Here is the demo link: https://apple-iphone14.netlify.app/

For this website, I used Three.JS with the GSAP to add smooth scrolling animations. If you want to learn how to create this responsive 3D landing page, you can watch the following tutorial👇.

Let’s render an awesome 3D model in our React app.

Setup and Installation

For this tutorial, we will use the CRA (create-react-app) pattern. Open your project folder and use the following command to install the CRA template.

npx create-react-app 3d-model-in-reactjs

You can name your app whatever you want for this tutorial I kept it as “3d-mode-in-reactjs”.

Here the npx is a utility provided when you install the npm. It helps us to run any npm package available on npm registry without installing that package.

Let’s install the libraries required to render the 3D model. Change the directory to “3d-mode-in-reactjs” using the following command.

cd 3d-mode-in-reactjs

Use the following command to install two libraries, @react-three/fiber and @react-three/drei.

npm install @react-three/fiber @react-three/drei
  • @react-three/fiber: This is a React renderer for threejs.

  • @react-three/drei: This is a collection of useful helpers and fully functional out-of-the-box abstractions for @react-three/fiber.

For this tutorial, we are going to use a 3D model of Apple iPhone 13 Pro Max. You can get this template from the following link👇.

Open the given link and download the template in gltf format. Why GLTF? According to the threejs documentation glTF focuses on delivering runtime assets, it is compact to transmit and fast to load.

Once you have downloaded the file, create a folder called assets inside of src folder and extract all the template file to the folder called 3d model.

Open the App.css file and replace all code with the following css.

.App {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

We are now ready to render the model.

Let’s understand the basics of rendering a 3D model

Now there are 3 things you need to keep in mind when rendering a model.

  1. scene: Here you can configure all objects, lights and cameras.

  2. camera: It is used to view the 3D model through different angels.

  3. renderer: It is used to display/render a scene on an HTML element called canvas.

If you’re using threejs directly in a simple JavaScript project, you may need to set up all of these things from the ground up, but in this tutorial we’re using @react-three/fiber and @react-three/drei so we don’t have to start all over again.

Open the App.js file, clean up the default code and import it canvas element of @react-three/fiber. See the following code snippet.

import "./App.css";
import { Canvas } from "@react-three/fiber";

function App() {
  return (
    
{/* Here we will render out model */}
); } export default App;

Here the Canvas component configures the scene and the camera and makes scene each frame.

Now copy the following code into the making up.


  
    
    
  

Let’s understand each of these elements.

  • : A mesh is a class that inherits from Object3d and represents polygonal objects. In the mesh, you can instantiate the polygon object using geometry and material.

  • : This is a geometry class for a rectangular cuboid with given ‘width’, ‘height’ and ‘depth’

  • : This is a standard physical material.

For now, you can see a black square in the middle that doesn’t look like a 3D object.

Let’s add controls to be able to move the camera angle around this 3D object. Import it from @react-three/drei using the following line.

import { OrbitControls } from "@react-three/drei";

Now render this inside of components and after . Refresh the development server page and try to grab the subject. Now you may be able to see this square as a 3D object. This allow the camera to orbit around a target.

Now the object is completely black because there is no light source. So let’s add lights to our scene. Inside of component add the following line before the .


Here this ambientLight globally illuminates all objects in the scene equally. You can now see the off-white color of the mesh material. We can also change the ambient light intensity using props as shown in the following code.


You can also change the color of the 3D object using color support in the . check the next line.


Now the color of the 3D object is green. There are many different lights and elements that you can use to create an entire model. For this you can refer to the threejs documentation. That’s it for the basics not rendering our iPhone.

Converting the model to a JSX component

Open template files and you will see different files like textures, scene.gltf, scene.bin etc We will convert scene.gltf in a JSX component so that we can easily render it in our React application.

Now, to convert all GLTF files to JSX component, we will use a simple command line tool called gltfjsx. According to the documentation, the gltfjsx is a small command-line tool that turns GLTF assets into reactive, declarative, reusable three-fiber JSX components.

Now open terminal/cmd and go to the directory where you stored all the template files, in my case it’s inside the 3d model folder located in the assets case. So I will use the following command to change directory.

cd src/assets/3D-Model

Now use the following command.

npx gltfjsx scene.gltf

This command will take a few seconds and will return the Scene.js file which is the JSX component.

NOTE: This gltfjsx command may throw an error if you are using the latest version of NodeJS. I am currently using 17.2.0 and this command works fine. If you encounter an error, please downgrade your version of NodeJs and try this code again. You can use tools like nvm to use different versions of NodeJs.

Important!

Before rendering the model Scene.js file where we need to copy the model files public directory since if you look in the Scene.js file it uses useGLTF hook that loads nodes and materials from /scene.gltf case. So copy textures, scene.bin and scene.gltf in public your project folder.

3D model rendering

Open the App.js file and delete it . Let’s import it Model of Scene.js case.

import Model from "./assets/3D-Model/Scene";

Now render the inside of component, before .


  
     
  

Refresh the exit page. Now you should be able to see the render of the iphone on the screen, you can zoom in and out and move the model around. Let’s zoom in on the model. You can access the camera directly from the canvas element. Add the camera inside the canvas as the following code snippet.

Here the fov represents the “field of vision”. After setting the fov refresh the page to see the result. For now, we have defined the fov to 18. You can try different numbers and see the result.

For the moment there is no reflection on the model. To add reflection on the model, you need to define images around this model so that these images can reflect on the surface of this model. Instead of adding these images, let’s use component of the @react-three/drei library.

Let’s import it ,

import { Environment, OrbitControls } from "@react-three/drei";

Now, after the model, let’s add the environment.


Here the preset defines different types of environment surrounding the model. For now, we have set it to “sunset”. You can check the different presets available from here.

After adding this environment, you should see the beautiful reflection on our iPhone. Let’s render the model inside the Suspense component of React so that it can load asynchronously.


   

Here is the final code.

Final Thoughts

This is the end of this tutorial. You can use https://docs.pmnd.rs/ to read the documentation of the @react-three/fiber and @react-three/drei and try different items. If you want to create a complete website using the 3D model and animate its colors, you can follow the video tutorial given at the beginning of this lesson.

If you like this tutorial, you should check out the awesome tutorials I have on my YouTube channel called CodeBucks. You can check it from here.

You might also like these website templates:

  • A beautiful portfolio model in ReactJS => here

  • NFT collection landing page in ReactJS => [here](- A beautiful portfolio template in ReactJS => here)

Thanks for reading this tutorial. Have a nice day!

LOADING
. . . comments & After!


Source link

Comments are closed.