How to Create 3D Text in React Three Fiber

Sometimes when creating a scene in React Three Fiber (R3F) you will want to add text. This guide will walk you through the steps needed to add this text geometry into your React application. This guide will not focus on the basics of setting up a scene as there are already plenty of great resources online.

First things first, let’s download the dependencies that we will need for this project: React Three Fiber and Drei. Once installed we are going to import these dependencies into our project. In my example I have created a new component to render only my 3D text so my imports look like so:

The extend function increase three-fibers catalogue of JSX elements, the aptly-named FontLoader function helps us load our fonts from a JSON file and the TextGeometry allows us to have access to the text geometry mesh we will use. Speaking of fonts, let’s grab one now. I’m using Google Fonts to download a font, in this case I will use Almendra SC. After selecting a font, choose ‘Download All’ from the right side of your screen.

After downloading the font, we need to convert it to a JSON file. My go-to for this process is FaceType.js. Upload the file .ttf that you obtained from Google Fonts and make sure that the JSON option is chosen and click on the ‘Convert’ button. This will download a new JSON file to your computer.

Now we can add this to our project. IMPORTANT: Add this file to your src folder. Otherwise React will prohibit you from importing the file, I usually make an ‘assets’ folder where I store mine. Next we will import our JSON file into our component using the relative path. Note that you can call this whatever you like, I will just go with ‘almendra’ as that is the name of the font. Just to verify, our imports should look something like this:

Now that we’ve set up our imports, let’s actually write some code. First we will need to get access to our textGeometry mesh.

Now inside of our component we can create a new FontLoader and have it parse the JSON file by passing it in as an argument.

Now the magic happens. Lets return a mesh so that our component returns something. And within that mesh let’s create a textGeometry component that will accept two arguments: the text that you want displayed (in our example it is ‘test’) and an object that holds information pertaining to your font. Within this object, ‘font’ references the font variable we created using FontLoader, size determines the height and width of the text, and height determines the depth:

The size and height arguments can be changed to fit your needs, and there are many other properties you can fiddle with as well. Now there is one last step for this text to appear on the canvas: we need some materials to display over the mesh. You can use any material you like, I am just going to use the physical material. So our finished product looks like this:

And there you have it! Just render this onto your canvas for the words to appear.