Hover Image Transition Effect - React Three Fiber Tutorial

Опубликовано: 07 Июль 2023
на канале: Wawa Sensei

6,928

226

Let's learn how to build an amazing transition effect on hover using shaderMaterial with React Three Fiber and Three.js

Live demo
https://r3f-image-transition.vercel.app/

Get the starter pack here 🔗
https://github.com/wass08/r3f-vite-st...

Final Code
https://github.com/wass08/r3f-image-t...

#threejs #r3f #shaders

▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬

My complete course to learn React Three Fiber
https://lessons.wawasensei.dev/

My Shader video tutorial
   • How to create animated shaders with t...

Leonardo AI
https://leonardo.ai/

Maath Library
https://github.com/pmndrs/maath

R3F Examples
https://docs.pmnd.rs/react-three-fibe...

GLSL Color Syntax Extension
https://marketplace.visualstudio.com/...

Book of Shaders
https://thebookofshaders.com/

Simon Dev Glsl Shaders course
https://simondev.teachable.com/p/glsl...

React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...

R3F Drei
https://github.com/pmndrs/drei

▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬

00:00 - Intro
00:38 - Starter pack
01:11 - React Three Fiber Examples
02:06 - AI Generated Images
02:55 - Copying the example
07:39 - Technical overview
09:06 - GLSL Color Syntax Highlighting
10:01 - Shaders explanation
11:50 - Playing with fragment shader
14:13 - React Three Fiber Extend
15:15 - Rounded image
16:24 - Smooth animation
18:22 - Noise based transition
23:17 - Shader resources
23:53 - Conclusion

▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
   / @wawasensei

▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬

💻 The Discord Community
  / discord

📸 Instagram :
  / wawa.sensei

🎎 Facebook :
  / wawasenseiyt

🐦Twitter :
  / wawasensei

🐦TikTok :
  / wawasensei08

💻 My website :
https://www.wawasensei.dev

Смотрите видео Hover Image Transition Effect - React Three Fiber Tutorial онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Wawa Sensei 07 Июль 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 6,928 раз и оно понравилось 226 людям.