Three.js and React

Introduction

Three.js is a JavaScript library that provides an easy way to render 3D graphics on the web. It is used by many developers to create games, interactive visualizations, and other multimedia applications. React, on the other hand, is a flexible and scalable JavaScript library for building user interfaces.

Combining these two powerful tools, developers can create complex 3D applications and user interfaces with ease. In this guide, we will explore how to use Three.js with React.

Getting Started

To use Three.js in a React application, you must first install the library. You can do so by running the following command:

npm install three

After installing Three.js, you can import it into your React component by adding the following code:

import * as THREE from "three";

Creating a 3D Scene

Before we can add any objects to our 3D scene, we must first create the scene itself. To do so, we will create a new Three.js scene object:

const scene = new THREE.Scene();

Next, we will add a camera to our scene. The camera determines what the user will see when looking at the scene. We can create a Basic Perspective camera as follows:

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

In this example, we are creating a camera with a 75 degree field of view, an aspect ratio of the window width divided by the window height, and a near and far plane of 0.1 and 1000 respectively.

Finally, we will create a renderer that will render our 3D scene onto a canvas element. We can create a renderer as follows:

const renderer = new THREE.WebGLRenderer({ antialias: true });

We can then add the canvas element to our React component as follows:

const canvasRef = useRef<HTMLCanvasElement>(null);

useEffect(() => {
  if (canvasRef.current !== null) {
    renderer.setClearColor("#000000");
    renderer.setSize(canvasRef.current.offsetWidth, canvasRef.current.offsetHeight);
    canvasRef.current.appendChild(renderer.domElement);
  }
}, [canvasRef, renderer]);

Here, we are setting the clear color to black, setting the renderer size to match the canvas element's size, and adding the renderer's DOM element to the canvas element.

Adding Objects to the Scene

Now that we have created our scene, camera, and renderer, we can start adding objects to our 3D scene. To do so, we will create a new Three.js object (such as a sphere or a cube) and add it to our scene:

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: "#ffffff" });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

In this example, we are creating a cube with a size of 1x1x1 and adding it to our scene.

Animating the Scene

To animate our 3D scene, we can use the requestAnimationFrame method to loop through a function that updates the positions of our objects. We can update our objects' positions by accessing their .position property:

const animate = () => {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
};

animate();

In this example, we are rotating the cube on its x and y axes by 0.01 radians per frame.

Conclusion

By combining Three.js and React, we can create powerful and interactive 3D applications with ease. By following the steps outlined in this guide, you can create your own 3D scene and start adding objects to it. Happy coding!