hello,
how to add a text or image or a button in which it will be part of 3d environment, so for example, if i placed that html element at 0,0,5 and the camera was at 0.0,4 then it should not be displayed, i mean i want the html element to act like positioning a mesh in a 3d environment
Like this?
Is there a way to add gradients or stripes to a material color? - #4 by trusktr
( see also
MixedHtmlCssWebGl
Do we need the intermediate object. (.css3dObject.) )
1 Like
this is where it’s at GitHub - pmndrs/uikit: 🎨 user interfaces for react-three-fiber (it works to some extent in vanilla, too). this uses flexbox (via the yoga layout engine) and displays UI rendered in canvas/three. it has its own glyph renderer, every element on screen is instanced.
you can even convert html to threejs https://html23.com
or figma to threejs https://www.f2r3.com
the 2nd option is drei/html which can occlude behind geometry GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber It’s using canvas blending instead of raycasting, it’s more efficient.
demo1: The three graces - CodeSandbox
demo2: https://codesandbox.io/p/sandbox/occluded-html-forked-wp9mkp?
in vanilla threejs otherwise you only have css2d and css3drenderer, both cannot occlude. i saw some snippets and demos for css3d + raycast, but it’s not readily re-usable, it would be very expensive and raycasting means the html just disappears, a mesh can’t overlay it.