How to create glass material that refracts elements in DOM?

Questions
,
1

How would I achieve the effect on the hero of this website?

The glass seemingly refracts the page in the background, which is DOM. My guess is that it’s a static screenshot that’s in the scene. I tried something like this with a plane behind my mesh, but how would I achieve the masking, where the image is only seen through the refraction of the glass, so my canvas can be transparent and integrated into my page?

2

That’s not html, it’s reflecting a texture part of the scene, what you see is well crafted blend between the canvas and the DOM.

3

I’m incredibly impressed by the implementation of three js with the text…at the bottom of the page, the maker of the site has a contact section…I recommend asking the developer personally, you might find that they are open to giving you tips/help on this issue

4

the puzzle pieces that you need:

  • text, i would prefer troika-three-text
  • something that can bind html to a mesh and transform it, in vanilla three the only thing that can do that is css3drenderer
  • a glass material that refracts properly. you might want to look for MeshTransmissionMaterial, you’ll find a vanilla implementation
2 Likes
5

had some time to make it

now, if you wanted the selection behind the model, like in the original, that would be pretty easy, too, the html would have to be behind the canvas, but im using postprocessing (AO and tilt shift) which requires an opaque canvas.

3 Likes
6

btw this is fun, the author wrote me on twitter by accident, the original site is open source :laughing:

7

@drcmda Thanks for the quick reply, and I appreciate you creating that demo project. Gonna take a look at that code, since I’m also using Webflow. I haven’t gotten around to learning about shaders so the code is a little intimidating but gonna see what I can make of it!