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:
You can download one from here.
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 todemand
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.
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.
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
andenablePan
props are set to false in this case to disable zooming and panning.maxPolarAngle
andminPolarAngle
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 and explore the vast world of 3D rendering in React using React-Three-Fiber.
Top comments (1)
Nice introduction!!