00:00/00:00
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

⚠️ Update

The default <torusGeometry /> now looks better.

You can keep it like this without providing any args.

⚠️ Update

Since the version 0.152 of Three.js encoding has been replaced by colorSpace:

matcapTexture.colorSpace = THREE.SRGBColorSpace

But the idea stays the same.

Unlock content 🔓

To get access to 93 hours of video, a members-only Discord server, subtitles, lesson resources, future updates and much more join us for only $95!

Want to learn more? 👋

89%

That's the end of the free part 😔

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

Next lesson
60.

3D Text

Difficulty Hard

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.

Want to learn more?

That's the end of the free part 😔

To get access to 93 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
  • Unzip it
  • Open your terminal and go to the unzip folder
  • Run npm install to install dependencies
    (if your terminal warns you about vulnerabilities, ignore it)
  • Run npm run dev to launch the local server
    (project should open on your default browser automatically)
  • 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

If you get stuck and need help, join the members-only Discord server:

Discord