Is there a simpler example of how I can achieve?

Questions
,
1

I have to create a website where by there is a 3D object using Threejs but the 3D object refracts the html text or image on the webpage with abit of the Fresnel rainbow effect.

Exactly like the website below.

I am still very new to WebGL and Shaders, could someone assist me of show me a simple way or example to achieve the exact way or similar to the website above.

Thank you

2

Can’t promise it will work, since the repo is old - but you can try using, or at least learn from, html-gl (it uses html2canvas.)

To get this effect you’ll probably need to render HTML as a texture, then use it with a fresnel shader or a refraction map (source).

3

Thank you very much,

I shall have a look and try to learn from the above links

1 Like