Uploaded July 2023 | Updated September 2026, 1 week ago
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 🔗
github.com/wass08/r3f-vite-starter
Final Code
github.com/wass08/r3f-objects-dissolve
The original tweet (includes source code)
twitter.com/0xca0a/status/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
youtube.com/watch?v=e2ntx-fyXaE
My second Shader video
youtu.be/SOF7GBmC6gE
Maath Library
github.com/pmndrs/maath
gl-Noise library
farazzshaikh.github.io/glNoise/index.html
THREE Customer Shader Material
github.com/FarazzShaikh/THREE-CustomShaderMaterial
R3F Examples
https://docs.pmnd.rs/react-three-fiber/getting-started/examples
GLSL Color Syntax Extension
marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates
Book of Shaders
thebookofshaders.com
Simon Dev Glsl Shaders course
simondev.teachable.com/p/glsl-shaders-from-scratch
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
R3F Drei
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:
youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
discord.gg/2wBhwchcWu
📸 Instagram :
instagram.com/wawa.sensei
🎎 Facebook :
facebook.com/wawasenseiyt
🐦Twitter :
twitter.com/wawasensei
🐦TikTok :
tiktok.com/@wawasensei08
💻 My website :
https://www.wawasensei.dev
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 🔗
github.com/wass08/r3f-vite-starter
Final Code
github.com/wass08/r3f-objects-dissolve
The original tweet (includes source code)
twitter.com/0xca0a/status/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
youtube.com/watch?v=e2ntx-fyXaE
My second Shader video
youtu.be/SOF7GBmC6gE
Maath Library
github.com/pmndrs/maath
gl-Noise library
farazzshaikh.github.io/glNoise/index.html
THREE Customer Shader Material
github.com/FarazzShaikh/THREE-CustomShaderMaterial
R3F Examples
https://docs.pmnd.rs/react-three-fiber/getting-started/examples
GLSL Color Syntax Extension
marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates
Book of Shaders
thebookofshaders.com
Simon Dev Glsl Shaders course
simondev.teachable.com/p/glsl-shaders-from-scratch
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
R3F Drei
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:
youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
discord.gg/2wBhwchcWu
📸 Instagram :
instagram.com/wawa.sensei
🎎 Facebook :
facebook.com/wawasenseiyt
🐦Twitter :
twitter.com/wawasensei
🐦TikTok :
tiktok.com/@wawasensei08
💻 My website :
https://www.wawasensei.dev
