Learn Creating a Three.js Scene in React

To build a 3D scene using Three.js inside a React app, you start by creating a React functional component that will manage the Three.js scene setup. The first step is to initialize a Three.js Scene, which acts as the container for all 3D objects. Next, you set up a Camera to define the viewpoint and perspective from which the scene will be rendered. A common choice is the PerspectiveCamera, which mimics the way the human eye sees.

After setting up the scene and camera, you need a Renderer to draw the scene onto the screen. In a React component, you typically use a useRef hook to create a reference to a DOM node (such as a div) where the renderer will mount its output. Inside a useEffect hook, you can initialize the scene, camera, and renderer, and then attach the renderer’s output (its domElement) to the referenced DOM node. This ensures that the Three.js rendering is properly managed within React’s lifecycle.

Here is a step-by-step outline of these actions in a React functional component:

Create a ref using useRef to point to the DOM node where you want to render the scene;
Use useEffect to initialize the Three.js scene, camera, and renderer after the component mounts;
Set the renderer’s size to match the container’s dimensions;
Append the renderer’s domElement to the DOM node referenced by the ref;
Render the scene using the renderer and camera.

This approach keeps the Three.js setup contained within the React component and ensures that the renderer is attached to the correct part of the DOM.