#Correctly occluded HTML inside 3D

5 messages · Page 1 of 1 (latest)

winged rose
#

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

▶ Play video
lyric path
#

These even works in Firefox! Really impressive

winged rose
#

Yeah and it’s quite non-hacky which is always nice

cyan wyvern
#

that's amazing Faraz!

winged rose
#

Thanks 😄