Shortcuts ⌨️
SPACE
to play / pauseARROW RIGHT
orL
to go forwardARROW LEFT
orJ
to go backwardARROW UP
to increase volumeARROW DOWN
to decrease volumeF
to toggle fullscreenM
to toggle mute0 to 9
to go to the corresponding part of the videoSHIFT
+,
to decrease playback speedSHIFT
+.
or;
to increase playback speed
Want to learn more? 🖖
That's the end of the free part 😔
To get access to 71 hours of video, a members-only Discord server and future updates, join us for only $95!
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.
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
to install dependencies
(if your terminal warn you about vulnerabilities, ignore it) -
Run
npm run dev
to launch the local server
(your browser should start 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