# How do i get occlusions of WebGLObjects onto CSS3DObject

**URL:** <https://discourse.threejs.org/t/how-do-i-get-occlusions-of-webglobjects-onto-css3dobject/47008>\
**Category:** Questions\
**Tags:** css3dobject, css3drenderer, webglrenderer, occlusion, webgl-renderer\
**Created:** [January 18, 2023, 7:49am UTC](https://discourse.threejs.org/t/how-do-i-get-occlusions-of-webglobjects-onto-css3dobject/47008 "2023-01-18T07:49:50Z")\
**Posts on this page:** 1\
**Showing post:** 3

<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:** [January 18, 2023, 10:28am UTC](https://discourse.threejs.org/t/how-do-i-get-occlusions-of-webglobjects-onto-css3dobject/47008/3 "2023-01-18T10:28:20Z")

</div>

if you want to stay vanilla, the trick is a blending mode, sorry for react syntax just adapt it to your needs

```plaintext
<mesh>
  <planeGeometry args={[2.24, 1.26]} />
  <meshPhysicalMaterial blending={THREE.NoBlending} opacity={0} />
  <Html prepend transform>
    <iframe width={560 * 2} height={315 * 2} src="https://threejs.org/" frameBorder="0" />
  </Html>
</mesh>

```

the planegeo + noblending material will stamp a hole into the canvas, it has to be exactly where the html is supposed to be. the html of course lurks behind the canvas and must be css3d transformed properly. if the hole and the html lines up you get natural occlusion with rectangular shapes.

if you need exotic shapes that’s possible, too (see the round corners in the first demo) but you need to make the geometry reflect that.

---

_[View the full topic](https://discourse.threejs.org/t/how-do-i-get-occlusions-of-webglobjects-onto-css3dobject/47008)._