Monday, August 10FreeJQuery

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

Three.js and React

How to use Scroll refraction and shader effects in Three.js and React and add some more techniques to create Three.js layout with shader effects.


In This Article, I will show you how to use a couple of techniques like tying things to the scroll-offset and cast them into re-usable segments. The creation will be our primary core interest. We can also create Gooey Image hover effects with three.js we will use three.js to create efficient gooey texture images that we’ll use to reveal other images when hovering one.

Main Features of Three.js

  • build a declarative scroll rig
  • mix HTML and canvas
  • handle async assets and loading screens via React. Suspense
  • add shader effects and tie them to scroll


Leave a Reply

Your email address will not be published. Required fields are marked *