How do i get occlusions of WebGLObjects onto CSS3DObject

Questions
, , , ,
1

I have a complex scene with a lot of objects and I want to add a YouTube Panel somewhere in the scene.

Example: Voxels (this uses babylon) but achieves the same effect

But after adding the iframe the CSS3DRenderer is not occluding the objects from the WebGLscene.

How can i fix this?

image
image1170×872 53.1 KB

image

I read Combine WebGLRenderer with CSS3DRenderer but i don’t fully understand what it means.

Thanks in advance for the help

2

you can’t. or, it can’t. you have to write your own implementation.

or, pair threejs with react and it’s done:

this is actual occlusion, the html is practically part of your scene and can be sandwiched between 3d objects. it can even receive shadows and reflections. and without dirty tricks or expensive raycasting.

here’s another that’s closer to your demo:

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

1 Like
4

Thanks a lot for your response i also figured the hacky solution which u described with help of this stackoverflow article

I have written this codepen demonstrating your second answer.

However clicking on the iframe is not working here. Any ideas on to fix onClick event?