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

BVH is now extremely easy to use.

In index.jsx, import Bvh from @react-three/drei

import { Bvh } from '@react-three/drei'

Wrap the <Experience /> in <Bvh>:

<Bvh>
    <Experience />
</Bvh>

And that’s all it takes for an immediate performance boost when raycasting.

Unlock content 🔓

To get access to 72 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? 👋

88%

That's the end of the free part 😔

To get access to 72 hours of video, a members-only Discord server and future updates, join us for only $95!

Next lesson
49.

Mouse Events

Difficulty Hard

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.

Want to learn more?

That's the end of the free part 😔

To get access to 72 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