\
**Category:** Questions\
**Tags:** html\
**Created:** [June 19, 2024, 12:15pm UTC](https://discourse.threejs.org/t/html-in-a-3d-environment/67036 "2024-06-19T12:15:37Z")\
**Posts on this page:** 3\
**Page:** 1
**Author:**  [@Jason\_Maximilian](https://discourse.threejs.org/u/Jason_Maximilian)\
**Post date:** [June 19, 2024, 12:15pm UTC](https://discourse.threejs.org/t/html-in-a-3d-environment/67036/1 "2024-06-19T12:15:37Z")
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
---
**Author:**  [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [June 19, 2024, 3:55pm UTC](https://discourse.threejs.org/t/html-in-a-3d-environment/67036/2 "2024-06-19T15:55:58Z")
Like this?
[Is there a way to add gradients or stripes to a material color? - #4 by trusktr](https://discourse.threejs.org/t/is-there-a-way-to-add-gradients-or-stripes-to-a-material-color/946/4)
( see also
[MixedHtmlCssWebGl](https://hofk.de/main/threejs/MixedHtmlCssWebGl/MixedHtmlCssWebGl.html)
[Do we need the intermediate object. (.css3dObject.)](https://discourse.threejs.org/t/do-we-need-the-intermediate-object-css3dobject/20313) )
---
**Author:**  [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [June 21, 2024, 7:50am UTC](https://discourse.threejs.org/t/html-in-a-3d-environment/67036/3 "2024-06-21T07:50:24Z")
this is where it’s at [GitHub - pmndrs/uikit: 🎨 user interfaces for react-three-fiber](https://github.com/pmndrs/uikit) (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](https://html23.com)
or figma to threejs [https://www.f2r3.com](https://www.f2r3.com)
the 2nd option is drei/html which can occlude behind geometry [GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber](https://github.com/pmndrs/drei?tab=readme-ov-file#html) It’s using canvas blending instead of raycasting, it’s more efficient.
demo1: [The three graces - CodeSandbox](https://codesandbox.io/s/0n9it)
demo2: [https://codesandbox.io/p/sandbox/occluded-html-forked-wp9mkp](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.