Scroll, Refraction and Shader Effects in Three.js and React

Discover how to use react-three-fiber and combine some common techniques to create a Three.js powered layout with shader effects. By Paul Henschel.

Article on Codrops

Demo

Installation

yarn
yarn start

Credits

• react-three-fiber
• three.js
• React
• Image credits: Unsplash.com and Paul Henschel
• Diamond refraction based on Real-time Multiside Refraction in Three Steps