Detect mouse events on ThreeJS objects using Raycaster class
In this video, I will show you how to detect mouse and touch events on objects in ThreeJS using raycaster. I will walk you through a production-ready code where I show you how you can add entry and exit animations to your ThreeJS scene. Then, I will talk about using mouse events on objects to perform more animations.
This video is part 1 of a series where I show you how we can make cool animations like what I have in my portfolio at https://akbarbakhshi.com/portfolio.
Join the Late Night Coders community to get access to online courses and more:
https://www.latenightcoders.club/
Github repository for the starter code:
https://github.com/AkbarBakhshi/Create-3D-logo-with-3js
Github repository for the finished project of this video:
https://github.com/AkbarBakhshi/mouse-events-with-raycaster
====****Video Timestamps****====
00:00 Video intro
01:33 Getting starter code
03:00 cleaning up the code
04:25 What we are trying to accomplish in this video (Threejs Raycaster)
05:06 Adding basic entry and exit animation for the ThreeJS canvas
07:43 Adding mouse and touch event listeners
12:48 Implementing Raycasting
17:23 Adding animations for mouse events on Threejs object
21:49 Outro
✅ ? Please make sure to subscribe to the channel and hit the notification bell to be the first to know whenever I upload new videos.⚠️
Check out my portfolio website at https://www.akbarbakhshi.com
Other video tutorials:
Intro to 3js: https://youtu.be/x097KglSvWc
Add image textures in 3js: https://youtu.be/KudDZuHC5-w
Production-ready webpack boilerplate: https://youtu.be/nLdqnGdSthM
Useful links:
https://threejs.org/
https://threejs.org/docs #api/en/core/Raycaster
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
Finally, leave a comment below and let me know if you have any questions or you have any topics in mind that would like me to make videos for.
Happy coding ?
Что делает видео по-настоящему запоминающимся? Наверное, та самая атмосфера, которая заставляет забыть о времени. Когда вы заходите на RUVIDEO, чтобы посмотреть онлайн «Detect mouse events on ThreeJS objects using Raycaster class», вы рассчитываете на нечто большее, чем просто загрузку плеера. И мы это понимаем. Контент такого уровня заслуживает того, чтобы его смотрели в HD 1080, без дрожания картинки и бесконечного буферизации.
Честно говоря, Rutube сегодня — это кладезь уникальных находок, которые часто теряются в общем шуме. Мы же вытаскиваем на поверхность самое интересное. Будь то динамичный экшн, глубокий разбор темы от любимого автора или просто уютное видео для настроения — всё это доступно здесь бесплатно и без лишних формальностей. Никаких «заполните анкету, чтобы продолжить». Только вы, ваш экран и качественный поток.
Если вас зацепило это видео, не забудьте взглянуть на похожие материалы в блоке справа. Мы откалибровали наши алгоритмы так, чтобы они подбирали контент не просто «по тегам», а по настроению и смыслу. Ведь в конечном итоге, онлайн-кинотеатр — это не склад файлов, а место, где каждый вечер можно найти свою историю. Приятного вам отдыха на RUVIDEO!
Видео взято из открытых источников Rutube. Если вы правообладатель, обратитесь к первоисточнику.