Three.js Raycaster Tutorial | How to Handle Mouse Input in Three.js

In this coding tutorial, we go over raycasting in Three JS. We start off by learning when you may want to use a raycaster. Then initialize the raycaster code in our 3D scene. Finally, we detect the objects intersecting with the raycaster and update them with a mouse click.

== [ Resources ] ==

== [ Timestamps ] ==
00:00 What is a Raycaster?
01:09 Set up Raycaster + Detect Objects
02:11 Update All Intersecting Objects
02:40 Update First Intersecting Object

== [ Tags ] ==
#suboptimal #threejs #gamedev

[gun-ep]

Short and sweet, not too fast and easy to understand. Thanks!

[dhruvyadav]

hi i am trying to create a shooting gun, so do i need to use raycaster for that ?

[bestapps]

What wonderful class bro 10☆.
How can I use the cellphone touch to do the same thing buddy?

[dawnriddler]

How can I translate the coordinate values that we get from the mouse to 3D world values? My object is at (0, 50) but mouseX and mouseY are 0 something.

[ultrawhiff]

Hey nice tutorial, but can you help me with something.
Instead of mousemove, i did "click" to only cast ray when clicked. But when i use orbit controls to rotate my camera and my pointer is on the object and when i "mouseup" (leave orbit rotation), it triggers click event on the object.
I only want click event when not using orbit controls. just simple click

[FS-yqef]

Awesome! can you do a video on how this can be done to raycast on a imported object like fbx?

[rallysahil]

How to render exploded views so that user can slide to control exploded view.

[sandeepGupta-udns]

good tutorial but also add source code in discription

[gerardocardenas]

Buen video, como hacerlo para angular cli, no me funciona, me retorna un array null 🥲