Hey fellas! Here is an update to my attempts at correctly occluding HTML elements inside of ThreeJS https://twitter.com/CantBeFaraz/status/1599096000777318401?s=20&t=j2_lUmSyHF2xqxcA4lMBEQ The plain is to eventually have this will be a part of Drei's <Html />
Its based off an old demo by Joe Pea on CodePen https://codepen.io/trusktr/pen/RjzKJx
It uses CSS3DRenderer and runs at 60fps on mobile which is leagues better than the previous attempt which used CSS mask-image
Also this method lets us "apply" material properties to HTML, which means it responds to light and correctly recieves and casts shadows, all optional
Next up:
- Fix bugs
- Re-impliment features present in current
<Html />in Drep - Think about API
Another stab at correctly occluded interactive HTML inside of @threejs with R3F
Here: A fully interactive instance of @tldraw behaving like a normal plane with shadows at 60fps on iOS
Based on an old pen by @trusktr
Demo: https://t.co/Soc2gEfCcU
Inspo: https://t.co/ymei8PNUgM