Add Text as Texture on a 3D Object in a React App
Tags: react, 3d, threejs, frontend
Published: 2024-02-06 20:31:00

Let's learn how to add text to a 3D object in a React application!

We will use `@react-three/fiber` to accomplish this feat.
I'll be assuming you already have a basic understanding of React and a new React application set up.

### Step 1: Install Required Packages
Let's install the required packages first. 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: 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 in a functional component like so:

```
const CubeCanvas = () => {
  return (
     <Canvas
      camera={{
        fov: 25,
        position: [5, 5, 5],
      }}
    >
    </Canvas>
  );
};
```

Set the `fov (Field of View)` and `position` of the `Canvas` according to your use case. (A larger `fov` will result in a wider view.)

### Step 3: Add Some Lights
Add some lights inside the Canvas so the Cube isn't too dark when added later on. Let's use `ambientLight` and `directionalLight` (They don't need importing).

```
 <Canvas
      camera={{
        fov: 25,
        position: [5, 5, 5],
      }}
    >
      <ambientLight intensity={1} />
      <directionalLight position={[3, 2, 1]} />
    </Canvas>
```

### Step 4: Create a Cube
Now, let's create a separate component to render our cube.

```
function Cube() {
  return (
    <mesh>
      <boxGeometry />
      <meshStandardMaterial>
        <RenderTexture attach="map">
          <color attach={"background"} args={["#dc9dcd"]} />
        </RenderTexture>
      </meshStandardMaterial>
    </mesh>
  );
}
```

Here, a `mesh` component is used, which is a low-level react-three-fiber component used to create and manipulate 3D objects. Inside `mesh`, we use `boxGeometry` for displaying a cube shaped object.

We also need a `meshStandardMaterial` to define the appearance of the cube. Inside, `meshStandardMaterial`, a `RenderTexture` component, imported from `@react-three/drei` is used to render texture on the cube. `attach="map"` indicates that the rendered texture should be used as the texture map for the material of the parent mesh.

We also give a color to the cube by using a `color` component.


### Step 5: Add Text to Cube

Let's use the `Text` component from `@react-three/drei` to use text as a texture on our cube. Add the following inside the `RenderTexture` component.

```
<Text position={[-0.2, 0, 0]} fontSize={1} color={"#555"}>
 hello
</Text>
```

![Cube with unaligned text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3d6w824vsz11ee6p11c.png)

And that's all we need to add text to the cube. The positioning of the text may seem a little odd at the moment. But we can fix that using the `PerspectiveCamera` from `@react-three/drei`. Also, add `Cube` inside the `CubeCanvas` This is how both components finally look:

```
import {
  Text,
  PerspectiveCamera,
  RenderTexture,
} from "@react-three/drei";
import { Canvas } from "@react-three/fiber";

function Cube() {
  return (
    <mesh>
      <boxGeometry />
      <meshStandardMaterial>
        <RenderTexture attach={"map"}>
          <PerspectiveCamera makeDefault position={[0, 0, 5]} />
          <color attach={"background"} args={["#dc9dcd"]} />
          <Text position={[-0.2, 0, 0]} fontSize={1} color={"#555"}>
            hello
          </Text>
        </RenderTexture>
      </meshStandardMaterial>
    </mesh>
  );
}

function CubeCanvas() {
  return (
    <Canvas
      camera={{
        fov: 25,
        position: [5, 5, 5],
      }}
    >
      <ambientLight intensity={1} />
      <directionalLight position={[3, 2, 1]} />
      <Cube />
    </Canvas>
  );
}
```

And the text is now fixed 👌


![Cube with aligned text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xq7niyprvg4wk2a6bq7z.png)

### Final Thoughts
That's the end of this tutorial. We rendered a 3D object in our React app using `threejs`, `react-three-fiber` and `react-three/drei`, and learned how to add text as texture to it.

You can find the official docs [here](https://docs.pmnd.rs/) and explore the vast world of 3D rendering in React using **_React-Three-Fiber_**.