# How to make CSS3DObject on a gltf plane

**URL:** <https://discourse.threejs.org/t/how-to-make-css3dobject-on-a-gltf-plane/30407>\
**Category:** Questions\
**Tags:** plane-geometry, css3d, gltf, threejs\
**Created:** [September 30, 2021, 5:04pm UTC](https://discourse.threejs.org/t/how-to-make-css3dobject-on-a-gltf-plane/30407 "2021-09-30T17:04:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![whackter](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/whackter/32/20240_2.png) [@whackter](https://discourse.threejs.org/u/whackter)\
**Post date:** [September 30, 2021, 5:04pm UTC](https://discourse.threejs.org/t/how-to-make-css3dobject-on-a-gltf-plane/30407/1 "2021-09-30T17:04:15Z")

</div>

Hello,

Can someone tell me how I can make a CSS3DObject (Divs, texts, buttons etc.) on a plane geometry that is from a gltf file in three.js.

A reference:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/2/f259181781d453f8dac941195feaa8d03b7eea98.jpeg)

Thank you.

---

<div class="post-metadata">

**Author:** ![bhushan6](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bhushan6/32/19074_2.png) [@bhushan6](https://discourse.threejs.org/u/bhushan6)\
**Post date:** [September 30, 2021, 7:35pm UTC](https://discourse.threejs.org/t/how-to-make-css3dobject-on-a-gltf-plane/30407/2 "2021-09-30T19:35:17Z")

</div>

Something like [this](https://codesandbox.io/embed/youtube-streaming-in-3d-world-jjv5e?codemirror=1)?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 30, 2021, 11:26pm UTC](https://discourse.threejs.org/t/how-to-make-css3dobject-on-a-gltf-plane/30407/3 "2021-09-30T23:26:07Z")

</div>

this is threejs in react, but it’s almost trivial there: [Mixing HTML and WebGL w/ occlusion - CodeSandbox](https://codesandbox.io/s/mixing-html-and-webgl-w-occlusion-9keg6) the html on the screen is interactive, you can click and scroll it. it has occlusion as well, so it “hides” behind geometry.

---

<div class="post-metadata">

**Author:** ![whackter](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/whackter/32/20240_2.png) [@whackter](https://discourse.threejs.org/u/whackter)\
**Post date:** [October 1, 2021, 9:12am UTC](https://discourse.threejs.org/t/how-to-make-css3dobject-on-a-gltf-plane/30407/4 "2021-10-01T09:12:47Z")

</div>

Yes it worked, thanks a lot 🙂