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.
📖 Code - github.com/SuboptimalEng/thre...
🐦 Twitter - / suboptimaleng
💻 GitHub - github.com/SuboptimalEng
🌎 Website - suboptimaleng.com
== [ Resources ] ==
Three.js Examples - threejs.org/examples/
== [ Timestamps ] ==
00:00 What is a Raycaster?
00:37 Three.js Setup Guide
01:09 Set up Raycaster + Detect Objects
02:11 Update All Intersecting Objects
02:40 Update First Intersecting Object
== [ Tags ] ==
#suboptimal #metaverse #threejs

[@juanmacias5922]

That's pretty cool!

[@bestapps4709]

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.

[@btvvideochannel2591]

nice Tut

[@dhruvyadav3492]

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

[@FS-yq9ef]

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

[@SuboptimalEng]

I tested this code on an imported object (Shiba glTF model) and it worked without any changes. You can check it out on GitHub.

[@kynan1976]

Ty

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

[@justdoeverything8883]

you can measure the difference between the mouse position down, and the mouse position up, and if it is greater than X (maybe 20 pixels) you don't trigger the ray cast.

[@ultrawhiff]

@justdoeverything8883 Thank you!, this is exactly what popped into my mind back then

[@justdoeverything8883]

@@ultrawhiff awesome, glad you figured it out! How's the project going?

[@user-hd3pz2ow1b]

cool

[@sandeepGupta-ud2ns]

good tutorial but also add source code in discription

[@SuboptimalEng]

It’s in the description 😭

[@remink3092]

I can't find the actual js code in the github repo !

[@gerardocardenas8805]

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