Choosing the a bcd
00:00/00:00TIME LEFT

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

Subtitles 💬

Subtitles are only available for members

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

⚠️ Update

It’s not.

Values should be 0.5, 2.5, 4.5, but Three.js updates the objects’ coordinates (called matrices) right before rendering them. Since we do the ray casting immediately, none of the objects have been rendered.

You can fix that by updating the matrices manually before ray casting:


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!

Next lesson

Raycaster and Mouse Events

Difficulty Hard

Starter packFinal project

Introduction 00:00

As the name suggests, a Raycaster can cast (or shoot) a ray in a specific direction and test what objects intersect with it.

You can use that technique to detect if there is a wall in front of the player, test if the laser gun hit something, test if something is currently under the mouse to simulate mouse events, and many other things.

Setup 01:34

In our starter, we have 3 red spheres, and we are going to shoot a ray through and see if those spheres intersect.

Create the Raycaster 01:48

Instantiate a Raycaster:

 * Raycaster
const raycaster = new THREE.Raycaster()

To change the position and direction where ray will be cast, we can use the set(...) method. The first parameter is the position and the second parameter is the direction.

Both are Vector3, but the direction has to be normalized. A normalized vector has a length of 1. Don't worry, you don't have to do the mathematics by yourself, and you can call the normalize() method on the vector:

const rayOrigin = new THREE.Vector3(- 3, 0, 0)
const rayDirection = new THREE.Vector3(10, 0, 0)

raycaster.set(rayOrigin, rayDirection)

This example of a normalized vector isn't very relevant because we could have set 1 instead of 10, but if we change the values, we will still have the normalize() method making sure that the vector is 1 unit long.

Here, the ray position supposedly start a little on the left in our scene, and the direction seems to go to the right. Our ray should go through all the spheres.

Cast a ray 07:19

To cast a ray and get the objects that intersect we can use two methods, intersectObject(...) (singular) and intersectObjects(...) (plural).

intersectObject(...) will test one object and intersectObjects(...) will test an array of objects:

const intersect = raycaster.intersectObject(object2)

const intersects = raycaster.intersectObjects([object1, object2, object3])

If you look at the logs, you'll see that intersectObject(...) returned an array of one item (probably the second sphere) and intersectObjects(...), returned an array of three items (probably the 3 spheres).

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 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

If you get stuck and need help, join the members-only Discord server: