Dissolve Effect - React Three Fiber Tutorial
6.9 هزار بار بازدید -
پارسال
-
Let's learn how to build
Let's learn how to build a dissolve shader material to make 3D objects appear and disappear with React Three Fiber and Three.js
Live demo
https://r3f-objects-dissolve.vercel.app/
Get the starter pack here 🔗
https://github.com/wass08/r3f-vite-st...
Final Code
https://github.com/wass08/r3f-objects...
The original tweet (includes source code)
Twitter: 1678071371274809346
#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...
My second Shader video
Hover Image Transition Effect - React...
Maath Library
https://github.com/pmndrs/maath
gl-Noise library
https://farazzshaikh.github.io/glNois...
THREE Customer Shader Material
https://github.com/FarazzShaikh/THREE...
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:34 - Starter Pack
01:53 - DissolveMaterial
05:07 - Simplifying the effect
11:38 - Transition between objects
20:30 - Bloom Post Processing
22:53 - On other objects?
27:42 - Final Result
28:03 - 10k Thank You
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
@wawasensei
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
Discord: discord
📸 Instagram :
Instagram: wawa.sensei
🎎 Facebook :
Facebook: wawasenseiyt
🐦Twitter :
Twitter: wawasensei
🐦TikTok :
TikTok: wawasensei08
💻 My website :
https://www.wawasensei.dev
Live demo
https://r3f-objects-dissolve.vercel.app/
Get the starter pack here 🔗
https://github.com/wass08/r3f-vite-st...
Final Code
https://github.com/wass08/r3f-objects...
The original tweet (includes source code)
Twitter: 1678071371274809346
#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...
My second Shader video
Hover Image Transition Effect - React...
Maath Library
https://github.com/pmndrs/maath
gl-Noise library
https://farazzshaikh.github.io/glNois...
THREE Customer Shader Material
https://github.com/FarazzShaikh/THREE...
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:34 - Starter Pack
01:53 - DissolveMaterial
05:07 - Simplifying the effect
11:38 - Transition between objects
20:30 - Bloom Post Processing
22:53 - On other objects?
27:42 - Final Result
28:03 - 10k Thank You
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
@wawasensei
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
Discord: discord
📸 Instagram :
Instagram: wawa.sensei
🎎 Facebook :
Facebook: wawasenseiyt
🐦Twitter :
Twitter: wawasensei
🐦TikTok :
TikTok: wawasensei08
💻 My website :
https://www.wawasensei.dev
پارسال
در تاریخ 1402/04/23 منتشر شده
است.
6,907
بـار بازدید شده