Introduction 00:00

This lesson is called “mouse events” in order to make things clear, but it actually deals with “pointer events” in general since what we are going to see will also work with touch screens.

For practical reasons, we are only going to demonstrate using a mouse (or trackpad), but feel free to test this lesson on your phone or whatever device you have access to.

Setup 00:27

In the starter, we have an orange sphere, an animated purple cube and a green floor.

The @react-three/drei dependency is already installed within the project and we are using the OrbitControls helper to be able to move the camera around.

We haven’t used Perf since we shouldn’t have any performance concerns, but feel free to add it if you want.

Listening to click events 00:44

As discussed in the previous lessons, handling mouse events was a bit tricky. We needed a Raycaster, cast some rays (sometimes on each frame) and tested intersecting objects that we had to put in arrays, etc.

R3F has made that process much easier and we won’t even have to implement a Raycaster.

Let’s start by listening to a click event.

All we need to do is add a onClick attribute to an object in our scene (like a <mesh>) and provide it with a function.

We can send a function directly, or we can create it before.

In Experience.jsx, create a eventHandler function before:

export default function Experience()
{
    // ...

    const eventHandler = () =>
    {
        console.log('the event occured')
    }

    // ...
}

We’ve chosen a generic name for the function (eventHandler) since we are going to use it to test other events. But for real projects, remember to name your function with something that makes sense like cubeClickHandler.

Now add the onClick attribute to the purple box <mesh> and send it the eventHandler:

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

And we are done! I’ll see you in the next lesson.

Just kidding, as we have a bunch of features to discover, but as you can see, it’s super easy.