https://github.com/emmelleppi/r3f-liquid-bottle

Liquid shader with refraction using threejs and react-three-fiber
https://github.com/emmelleppi/r3f-liquid-bottle

drei javascript r3f react-three-fiber reactjs three-js threejs

Last synced: about 1 year ago
JSON representation

Liquid shader with refraction using threejs and react-three-fiber

• Host: GitHub
• URL: https://github.com/emmelleppi/r3f-liquid-bottle
• Owner: emmelleppi
• Created: 2020-09-28T19:13:47.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-10-13T22:23:09.000Z (over 5 years ago)
• Last Synced: 2025-04-13T22:46:47.634Z (about 1 year ago)
• Topics: drei, javascript, r3f, react-three-fiber, reactjs, three-js, threejs
• Language: JavaScript
• Homepage: https://r3f-liquid-bottle.netlify.app/
• Size: 16.5 MB
• Stars: 45
• Watchers: 4
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

README

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

Made with react-three-fiber and use-cannon

![](https://raw.githubusercontent.com/emmelleppi/r3f-liquid-bottle/master/screenshot.jpg)

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:


```bash

# using npm

npm install

npm run start

# using yarn

yarn

yarn start

```