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

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:

object1.updateMatrixWorld()
object2.updateMatrixWorld()
object3.updateMatrixWorld()

⚠️ Update

In the latest versions of Three.js, lights require a higher intensity:

const ambientLight = new THREE.AmbientLight('#ffffff', 0.9)

// ...

const directionalLight = new THREE.DirectionalLight('#ffffff', 2.1)

The result will look slightly more realistic. Don’t be surprised if it’s not the exact same colors as in the video.

Unlock content 🔓

To get access to 93 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? 🤘

24%

That's the end of the free part 😔

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

Next lesson
22.

Raycaster and Mouse Events

Difficulty Hard

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)
rayDirection.normalize()

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)
console.log(intersect)

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

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