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!

49.

Mouse Events

Difficulty Hard

Downloads

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.js, 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.

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: