Back to videos

Dissolve Effect

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-starter

Final Code

https://github.com/wass08/r3f-objects-dissolve

The original tweet (includes source code)

https://twitter.com/0xca0a/status/1678071371274809346

My Shader video tutorial

https://www.youtube.com/watch?v=e2ntx-fyXaE

My second Shader video

https://youtu.be/SOF7GBmC6gE

Maath Library

https://github.com/pmndrs/maath

gl-Noise library

https://farazzshaikh.github.io/glNoise/index.html

THREE Customer Shader Material

https://github.com/FarazzShaikh/THREE-CustomShaderMaterial

R3F Examples

https://docs.pmnd.rs/react-three-fiber/getting-started/examples

GLSL Color Syntax Extension

https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates

Book of Shaders

https://thebookofshaders.com/

Simon Dev Glsl Shaders course

https://simondev.teachable.com/p/glsl-shaders-from-scratch

React Three Fiber documentation

https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

R3F Drei

https://github.com/pmndrs/drei

Need help with this tutorial? Join our Discord community!