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!

43.

Drei

Difficulty Medium

Downloads

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.js, remove the current OrbitControls, the extend, the <orbitControls> component and useThree:

export default function Experience()
{
    return <>

        <directionalLight position={ [ 1, 2, 3 ] } intensity={ 1.5 } />
        <ambientLight intensity={ 0.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 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: