r3f-cheers icon indicating copy to clipboard operation
r3f-cheers copied to clipboard

Liquid shader with glass material using threejs and react-three-fiber

Preview https://r3f-liquid-bottle.netlify.app 🍾🍾🍾

Made with react-three-fiber and use-cannon

Based on these tutorials

  • Refraction shader: https://tympanus.net/codrops/2019/10/29/real-time-multiside-refraction-in-three-steps/

  • Liquid shader: https://www.patreon.com/posts/quick-game-art-18245226

To run locally:

# using npm
npm install
npm run start

# using yarn
yarn
yarn start