i am trying to refract the html dom element using a 3d sphere with glass like material. to do this currently i have captured the dom element using html2canvas and set it as a texture on a plane. when i do this i cannot interact with the html (hover and click), so to tackle this i tried laying the html on top of the canvas at the same position it is being rendered. now the html interaction works but the glass effect doesn’t look great. so is there any solution to this? or is there any alternate ways i can recreate this?
here is my sandbox code:
https://codesandbox.io/p/devbox/html-distort-try-html2canvas-forked-rm92qm?workspaceId=ws_Ey8fR3fPaFpug8fddwFys4
reference where similar thing is happening:
https://xe.works/ (3d ring which distorts the html element throughout the site but the html elements are not that interactive where it distorts it)
https://evasanchez.info/ (the title with the fluted glass distortion effect)