Introduction 00:00

We now have enough knowledge to start building little experiences with R3F and we are going to start simple by reproducing some of the previous lessons.

Because we already know how it works in native Three.js, you’ll see that it’s going to be super easy and much faster. Still, we are going to discover a few new features along the way.

The first lesson we are going to reproduce in R3F is the 3D Text.

Setup 00:52

The starter setup is even simpler than the previous lessons.

We have one cube at the center of the scene, OrbitControls so that we can rotate around and Perf to keep an eye on performance.

The text 01:29

Let’s start with the main component and create the 3D text.

Text3D helper

As discussed in the previous lesson, we need to use TextGeometry.

Luckily for us, drei provides a helper named Text3D that implements it.

In Experience.jsx, import Text3D from @react-three/drei:

import { Text3D, OrbitControls } from '@react-three/drei'

To use Text3D, we need to provide a typeface font.

One font called helvetiker_regular.typeface.json is provided in the /public/fonts/ folder.

If you want, you can create your own typeface font with this website http://gero3.github.io/facetype.js/

Don’t forget that if you intend to use a font (especially online), you must have the right to do so. Check the license of the font you are about to use.

Add the <Text3D> anywhere in the JSX and provide the font path in the font attribute. The text you write between the opening and closing tags will be used to generate the geometry:

export default function Experience()
{
    return <>

        {/* ... */}

        <Text3D font="./fonts/helvetiker_regular.typeface.json">
            HELLO R3F
        </Text3D>

    </>
}

You should already see the text.

By default, a MeshBasicMaterial is applied, but we can change it by providing another material.