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.