How to Implement Three.js in React: Creating 3D Image and Shapes

Have you ever imagined how these graphics and games run on a web browser? What is the main technology behind it? Off course, it is not possible by just using HTML and CSS. In previous days we used WebGL for this task. So we are introducing you to Three.js and how to implement it in React in this blog.

You already know what Three.js is and what wonders it can do! But, if you don’t, then Three.js is a javascript library that can help you render 3D objects and scenes on a web browser.

In this article, we’ll discuss minor adjustments to implement Three.js in React. While you can use third-party wrappers such as react-three-fiber to quickly set up your project, if you prefer to avoid using a wrapper or are curious about the core workings of Three.js, this blog post is for you.

Basic Part of 3D Screen

  • Camera: The viewpoint of the user.
  • Lights: The scene needs to be lit to be visible.
  • Objects: 3D meshes.
  • Materials: Applied to the surface of a 3d mesh to fill it in.

Components

  • WebGLRenderer
  • Canvas
  • Mesh
  • Ambient Light
  • Spot Light
  • Point Light
  • Orbit Control

Basic Setup

First, install a boilerplate react app. I’ll use create-react-app for this. Use the following npm command to get started.

npx create-react-app threejs-react

Next, create a new file ThreeCube.js in the src folder. Add the following starter code to this file:

src/ThreeCube.js

import React from "react";

const ThreeCube = () => {

return (

  <div>

    <h3>Three Cube</h3>

  </div>

);

};

export default ThreeCube;

This is how your App.js file should look now:

src/App.js

import React from "react";

import ThreeCube from "./ThreeCube";

const App = () => {

return (

  <div>

    <h1>Three.js-React Integration</h1>

    <ThreeCube />

  </div>

);

};

export default App;

That’s it for our starter code.

Installing Three.js

We are ready to install the Three.js package now. Use the following npm command to install Three.js:

Terminal command

npm install three

That’s it. We’re done. Now we can use Three.js in React.

Hire Our Expert React.js Developers

Creating a 3D Cube

Our next step is to create a 3D cube. All code we write from now on will go into our ThreeCube.js file. We’ll use the getting started code from the official Three.js website. You can view the getting started code here.

If we paste the code in the above example into a useEffect hook in our react app, the code should technically work. So let’s do that.

Let’s add the cube example from the official docs to a useEffect hook in our ThreeCube.js file. We’ll also need to import three from the three libraries we installed earlier.

Modify your ThreeCube.js file so that it looks like this:

src/ThreeCube.js

import React, { useEffect } from "react";

import * as THREE from "three";

const ThreeCube = () => {

useEffect(() => {

  var scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera(

    75,

    window.innerWidth / window.innerHeight,

    0.1,

    1000

  );

  var renderer = new THREE.WebGLRenderer();

  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

  var geometry = new THREE.BoxGeometry();

  var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

  var cube = new THREE.Mesh(geometry, material);

  scene.add(cube);

  camera.position.z = 5;

  var animate = function () {

    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;

    cube.rotation.y += 0.01;

    renderer.render(scene, camera);

  };

  animate();

}, []);

return (

  <>

    <div></div>

  </>

);

};

export default ThreeCube;

This is how our web app should be looking at the moment:

Creating A 3D Cube

coma

Conclusion

In conclusion, Three.js in React is a versatile tool for generating 3D images and shapes on the client side, regardless of the platform you’re working on. Its functionality and flexibility make it an ideal choice for developers looking to create immersive web experiences or visualizations. With the help of React Three.js, the possibilities for creating stunning 3D graphics are virtually limitless.

Leverage the benefits of Three.js in React for your business with Mindbowser. Hire a skilled react.js developer today and create stunning 3D visuals and custom solutions. Contact us to get started.

Keep Reading

Keep Reading

Mindbowser is excited to meet healthcare industry leaders and experts from across the globe. Join us from Feb 25th to 28th, 2024, at ViVE 2024 Los Angeles.

Learn More

Let's create something together!