Three.js Raycaster Tutorial | How to Handle Mouse Input in Three.js
Suboptimal Engineer Suboptimal Engineer
24.4K subscribers
15,715 views
441

 Published On Apr 30, 2022

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 - https://github.com/SuboptimalEng/thre...
šŸŽ„Ā  YouTube - Ā Ā Ā /Ā suboptimalengĀ Ā 
šŸ¦ Twitter - Ā Ā /Ā suboptimalengĀ Ā 
šŸ“øĀ  Instagram - Ā Ā /Ā suboptimalengĀ Ā 
šŸ’» GitHub - https://github.com/SuboptimalEng
šŸŒŽĀ  Website - https://suboptimaleng.com

== [ Resources ] ==
Three.js Examples - https://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 #threejs #gamedev

show more

Share/Embed