Mouse effet at the top of three.js like on https://lusion.co/

hello, i have a question : is it possible to apply a mouse effect like on this website https://lusion.co/ on the top of my three.js project?

Yup - lusion’s entire website is created in three.js / webgl - so it’s possible to replicate any and all parts of it in three.

yes its possible but i was more wondering how to achieve this. its like there is a layer on the top of everything that interract with all items under it. i didnt do a lot with three.js so i was wondering what way to go to achive something like that.

ok i just undertand that i need to built a custom shader and use it like any other postprocessing shader

any idea wich direction i should try to achieve this?

Yup, it’s a postprocessing pass on top of only the WebGL part (if you set opacity: 0.5 on first canvas element in the website you will see which parts are effected by it, it’s not the entire website as WebGL text is not SEO-crawlable.)

The effect itself is a 2D displacement map - basically this but applied on a rendered frame instead of a blank background.

2 Likes