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

Published: 30 April 2022
on channel: Suboptimal Engineer

15,909

446

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

Watch video Three.js Raycaster Tutorial | How to Handle Mouse Input in Three.js online without registration, duration hours minute second in high quality. This video was added by user Suboptimal Engineer 30 April 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 15,90 once and liked it 44 people.