00:00/00:00TIME LEFT
Choosing the a bcd
3:22
00:03:22

Shortcuts

  • SPACE to play / pause
  • ARROW RIGHT or L to go forward
  • ARROW LEFT or J to go backward
  • ARROW UP to increase volume
  • ARROW DOWN to decrease volume
  • F to toggle fullscreen
  • M to toggle mute
  • 0 to 9 to go to the corresponding part of the video
  • SHIFT + , to decrease playback speed
  • SHIFT + . or ; to increase playback speed

Want to learn more?

That's the end of the free part 😔

To get access to 45 hours of video, a members-only Discord server and future updates, join us for only $95!

47.

3D Text

Difficulty Hard

Downloads

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.js, 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.

Want to learn more?

That's the end of the free part 😔

To get access to 45 hours of video, a members-only Discord server and future updates, join us for only $95!

How to use it

  • Download the Starter pack or Final project
    (if your browser detects a menace, do not worry, it is not)
  • Unzip it
  • Open your terminal and go to the unzip folder
  • Run npm install command to install dependencies
  • Run npm run dev to launch the local server
    (your browser should start automatically)

You can now start coding.

  • The JS is located in src/script.js
  • The HTML is located in src/index.html
  • The CSS is located in src/style.css

Any trouble? Go to the discord server: