Three.js Raycasting Tutorial for Beginners

💻 GITHUB

👾 LIVE DEMO

0:00 Intro
0:32 Project Demo
1:40 Starting Project
2:29 Handling Mouse Events
3:21 Raycaster Setup
7:08 Painting Selected Object
8:09 Limiting Selection using Scene Hierarchy
8:58 Limiting Selection using Layers
10:43 Wrap Up

[genshian]

As usual some of the best Three.js content. I've been messing around with Raycasters to create a drag functionality. Similar to DragControls from drei. It needs quite a bit of math to ensure the objects transform based on where the camera's pointing and also the pointer data + raycast data. Would be a great tutorial if possible! :D

[tedreams]

Great and straightforward tutorial thanks again. Now the step should be how to move the selected object around the scene.

[LightFromThePast]

Thank you very much for the tutorial and the git example! Helped me a lot!

[taize]

I have a problem with Spirtes that beeing toggeld on and off, when I toggle them off and on again the raycaster doesnt intersects with the sprites, any Ideas?

[moodyhamoudi]

Great tutorial. Wondering how to select a larger area with the raycaster 🤔 e.g. a square area around the ray itself, or you can think of it as a fuzzy distance threshold for an object to qualify as intersected

[thiagoborges]

Great tutorial! Didn't vote on the poll, but could you please do one about physics? I feel kinda lost when about using physics libraries and how to set those up.

[maazid]

Great tutorial ❤❤ but my mousedown, mouseover, and other events not working only mouseclick event working any solution

[billythekid]

New sub here . Thank you for your video . Btw, do you have a course website to learn all of this? If you do, I am very interested in Three.js to create a warehouse system. With the need for drag and drop objects like racks in specific positions, each rack having an ID, and the ability to stack racks.