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

Use version 9.108 of @react-three/drei:

npm install @react-three/drei@9.108

⚠️ Update

In the latest versions of @react-three/drei, PivotControls also supports scaling.

Use the dots at the extremities of the arrows.

⚠️ Update

In the latest versions of @react-three/drei, the default size of <Text> is bigger.

Don’t worry, we are going to change it anyway.

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? 👋

83%

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
56.

Drei

Difficulty Medium

Introduction 00:00

Creating a Three.js scene is already super simple with R3F, but it’s going to get even simpler.

One of the advantages of React is the ability to make things reusable. R3F took advantage of that and developers are creating many components (called helpers) ready to be used in your R3F application.

It could be about almost anything. Here are some examples:

  • Camera Controls
  • Complex geometries
  • Post-processing
  • HTML implementation
  • Loaders
  • Environment settings
  • Complex calculations
  • Etc.

Some of those helpers can be added as components (<theHelper>), some as hooks (useHelper) and you can find most of them regrouped in drei (Three in german, pronounced /dʁaɪ̯/).

First, you should pause the lesson and check them all (no kidding).

You don’t have to test them in depth. The idea is that you discover them so that, at some point, if you need one, you’ll know these possibilities exist. Otherwise, you might end up re-inventing the wheel.

Still, we are going to discover some of them right now to get a good idea of the potential and we are going to use some more in the next lessons.

Setup 03:16

The setup is very similar to the previous lesson with a sphere, a cube and a floor.

There is also a directional light source and an ambient light source.

The cube isn’t animated and the camera is being handled by the <orbitControls>.

OrbitControls 03:51

The first helper we are going to install, is OrbitControls.

You might think that we already have it, and while that’s true, using this helper will make things easier and will grant us access to features that we haven’t activated yet.

In Experience.jsx, remove the current OrbitControls, the extend, the <orbitControls> component and useThree:

export default function Experience()
{
    return <>

        <directionalLight position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
        <ambientLight intensity={ 1.5 } />

        <mesh position-x={ - 2 }>
            <sphereGeometry />
            <meshStandardMaterial color="orange" />
        </mesh>

        <mesh position-x={ 2 } scale={ 1.5 }>
            <boxGeometry />
            <meshStandardMaterial color="mediumpurple" />
        </mesh>

        <mesh position-y={ - 1 } rotation-x={ - Math.PI * 0.5 } scale={ 10 }>
            <planeGeometry />
            <meshStandardMaterial color="greenyellow" />
        </mesh>

    </>
}

The starter could have been set like this, but I wanted you to see how much easier it’s going to be.

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