Hey there👋, Nowadays the browsers are becoming more powerful then in the past and now they can render different complex animations with ease. You might have seen lot of websites rendering 3D model without any performance issues. In this article we are going to use to render an iPhone model in a React application. Three.js Before we start this tutorial let me show you a demo website which renders this model. Here is the demo link: https://apple-iphone14.netlify.app/ For this website I have used Three.JS along with the GSAP to add smooth scrolling animations. If you want to learn to make this responsive 3D landing page you can watch the following tutorial👇. https://youtu.be/cT160dOzpGY Let's render an awesome 3D model in our React application. Setup and Installation For this tutorial we will be using (create-react-app) template. Open your project folder and use the following command to install CRA template. CRA npx create-react-app 3d-model-in-reactjs You can name your application as you wish for this tutorial I have kept it as "3d-mode-in-reactjs". Here the npx is a utility that comes when you install the npm, It helps us to run any npm package available on npm registry without installing that package. Let's install required libraries to render 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 the and . @react-three/fiber @react-three/drei npm install @react-three/fiber @react-three/drei : It is a React renderer for threejs. @react-three/fiber : It is a collection of useful helpers and fully functional, ready-made abstractions for @react-three/fiber. @react-three/drei For this tutorial we are going to use a 3D model of Apple iPhone 13 Pro Max. You can get this model from the following link👇. by DatSketch is licensed under . Before you use this model in any project make sure to check it's license. "Apple iPhone 13 Pro Max" Creative Commons Attribution Open the given link and download the model in format.
Why GLTF? As per the threejs gltf documentation glTF is focused on runtime asset delivery, it is compact to transmit and fast to load. Once you download the file, create one folder called inside the folder and extract all the model file under folder called . assets src 3D-Model Open the file and replace all code with the following css. App.css .App {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
} Now we are ready to render the model. Let's understand the basics of rendering a 3D model Now there are 3 things that you have to keep in mind while rendering a model. scene: Here you can setup all objects, lights and cameras. camera: It is used to view the 3D model through different angels. renderer: It is used to display/render a scene on an HTML element called . canvas If you are directly using threejs in a plain JavaScript project then you might have to setup all these things from the basics, but in this tutorial we are using and so we don't have to do all the things from scratch. @react-three/fiber @react-three/drei Open the file, clean up the default code and let's import the element from . Checkout the following code snippet. App.js canvas @react-three/fiber import "./App.css";
import { Canvas } from "@react-three/fiber";

function App() {
  return (
    <div className="App">
      <Canvas>{/* Here we will render out model */}</Canvas>
    </div>
  );
}

export default App; Here the component sets up the and the and renders every frame. Canvas scene camera scene Now copy the following code inside the component. <Canvas /> <Canvas>
  <mesh>
    <boxGeometry />
    <meshStandardMaterial />
  </mesh>
</Canvas> Let's understand each of these elements. : A is a class that inherits from Object3d and it represents polygon objects. In the mesh you can instantiate the polygon object by using and . <mesh> mesh Geometry Material : It is a geometry class for a rectangular cuboid with a given 'width', 'height', and 'depth' <boxGeometry /> : It is a standard physically based material. <meshStandardMaterial /> For now you might see one black square in the middle that does not look like a 3D object. Let's add controls so that we can move the camera angle around this 3D object. Import the from the by using the following line. <OrbitControls /> @react-three/drei import { OrbitControls } from "@react-three/drei"; Now render this inside the components and after the . Refresh the development server page and try to grab the object. Now you might be able to see this square as an 3D object. This allow the camera to orbit around a target. <OrbitControls  /> <Canvas> <mesh> <OrbitControls  /> Now the object is total black because there is no source of light. So let's add lights in our scene. Inside the component add the following line before the . <Canvas /> <mesh> <ambientLight /> Here this globally illuminates all objects in the scene equally. Now you are able see the off-white color of the mesh material. We can also change the intensity of ambient light through props as shown in the following code. ambientLight <ambientLight intensity={1.25} /> You can also change the color of 3D object by using prop in the . checkout the following line. color <meshStandardMaterial /> <meshStandardMaterial color="green"/> Now the color of the 3D object is green. There are lot of different lights and elements are available which you can use to create whole model. For that you can refer the documentation of . That's it for the basics not let's render our iPhone. threejs Converting model to JSX component Open the model files and you will see different files like , , etc. We will convert into a JSX component so that we can easily render it in our React application. textures scene.gltf scene.bin scene.gltf Now to convert any GLTF files to JSX component we will use one simple command line tool called as . As per the documetation the is a small command-line tool that turns GLTF assets into declarative and re-usable react-three-fiber JSX components. gltfjsx gltfjsx Now open the terminal/cmd and go to the directory where you have stored all the model files, in my case it is inside the folder which is in the folder. So I will use the following command to change the directory. 3D-Model assets cd src/assets/3D-Model Now use the following command. npx gltfjsx scene.gltf This command will take few seconds and returns the file which is the JSX component. Scene.js NOTE: This gltfjsx command might give you an error if you are using latest NodeJS version. I'm currently using 17.2.0 and this command is working fine. If you face any error please downgrade your NodeJs version and try this code again. You can use tools like to use different versions of the NodeJs. nvm Important! Before we render the model from file we have to copy the model files into directory since if you look in the file it uses hook which loads nodes and materials from file. So copy , and into folder of your project. Scene.js public Scene.js useGLTF /scene.gltf textures scene.bin scene.gltf public Rendering the 3D model Open the file and remove the . Let's import the from file. App.js <mesh> Model Scene.js import Model from "./assets/3D-Model/Scene"; Now render the inside the component, before the . <Model /> <Canvas /> <OrbitControls /> <Canvas>
  <ambientLight intensity={1.25} />
     <Model />
  <OrbitControls />
</Canvas> Refresh the output page. Now you should be able to see the iphone rendering on the screen, you can zoom in and zoom out and move the model. Let's increase the view of the model. You can directly access the camera from the canvas element. Add the camera inside canvas as the following code snippet. <Canvas camera={{fov: 18}}> Here the stands for the "field of view". After setting the refresh the page to see the output. For now we have set the to 18. You can try different numbers and see the output. fov fov fov For now there is no reflection on the model. To add reflection on the model you have to set images around this model so that these images can reflect on the surface of this model. Instead of adding these images let's use from the library. <Environment /> component @react-three/drei Let's import the , <Environment /> import { Environment, OrbitControls } from "@react-three/drei"; Now after the model, let's add the Environment. <Environment preset="sunset" /> Here the preset sets 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 out model inside the component of the React so that it can load asynchronously. Suspense <Suspense fallback={null}>
   <Model />
</Suspense> Here is the final code. https://gist.github.com/codebucks27/6defde4db7e290d95d7ff1ae39078a06 Final Thoughts That's the end of this tutorial. You can use to read the documentation of the and and try different elements. If you want to create full fledge website using the 3D model and animate it's colors then you can follow the video tutorial given at the start of this lesson. https://docs.pmnd.rs/ @react-three/fiber @react-three/drei If you like this tutorial then you should checkout awesome tutorials I have on my YouTube channel called . You can check it from . CodeBucks here You might also like these website templates: A beautiful portfolio template in ReactJS => here NFT collection landing page in ReactJS => [here](- A beautiful portfolio template in ReactJS => ) here Thank you for reading this tutorial. Have a great day! Also published . here

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

Polygon

Apple

Target

YouTube

Top 10 Popular VS Code Themes You Need to Try in 2023

CodeBucks, #Noonies2021 Nominee: I would not invest in cryptocurrency 

Checkout my new website🤩

Portfolio

Hire Me

Buy Me a Coffee

2021 - HackerNoon Contributor of the Year - REDUX

2021 - HackerNoon Contributor of the Year - CSS3

Too Long; Didn't Read

Make resilience your competitive advantage

How to Render 3D Model in a React JS Application

How to Render 3D Model in a React JS Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Here's How Developers Can Build Their Own Personal Brand

$2M Backing and a Vision: How GAM3S.GG is Reshaping Web3 Gaming

$1M Hackathon Prizes Announced By MultiversX to Expand the Blockchain Ecosystem

Windows Sticky Keys Exploit: The War Veteran That Never Dies

$PEPE, a Purple Lamborghini, and More: The Story Continues

Here's How Developers Can Build Their Own Personal Brand

$2M Backing and a Vision: How GAM3S.GG is Reshaping Web3 Gaming

$1M Hackathon Prizes Announced By MultiversX to Expand the Blockchain Ecosystem

Windows Sticky Keys Exploit: The War Veteran That Never Dies

$PEPE, a Purple Lamborghini, and More: The Story Continues

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps