Deconstructing the homunculus.jp Distortion with Three.js

Learn how to replicate the pixel river distortion effect seen on homunculus.js using Three.js.

By in Articles on

In this ALL YOUR HTML coding session we will be deconstructing the pixel river distortion seen on homunculus.jp with Three.js, and also trying out Theatre.js.

This coding session was streamed live on October 3, 2021.

Check out the live demo.

Try to change values and animate them; use the icon on the top left corner of the website.

Support: https://www.patreon.com/allyourhtml

Setup: https://gist.github.com/akella/a19954…

Tagged with:

How to Code a Crosshair Mouse Cursor with Distortion Hover Effect

FBO Particles with Three.js

Tropical Particles Rain Animation with Three.js

Stay up to date with the latest web design and development news and relevant updates from Codrops.

From our sponsor
Divi
Create websites rapidly
With the Divi Layout Packs you'll get more than 800 world-class designs ready to be used for your client projects. Try it for free →