How do i get occlusions of WebGLObjects onto CSS3DObject

Questions
, , , ,
3

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

<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.