SPACE
to play / pauseARROW RIGHT
orL
to go forwardARROW LEFT
orJ
to go backwardARROW UP
to increase volumeARROW DOWN
to decrease volumeF
to toggle fullscreenM
to toggle mute0 to 9
to go to the corresponding part of the videoSHIFT
+,
to decrease playback speedSHIFT
+.
or;
to increase playback speed
Shortcuts ⌨️
⚠️ 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? 🖖
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!
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.
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