Occlusion with Three.js CSS3DRenderer

Hello, I am trying to display a 2D canvas in a Three.js scene, and I have it working well so far, but the Canvas seems to only be completely in front of everything, or behind everything if I change the z-index, regardless of where it is in the 3D space. This is a problem because if I have it in an enclosed space, it is either completely invisible, or visible from outside the walls.

I have seen this solved before, but I can’t seem to reverse engineer it. Here is what I have found:

As you can see in their demonstration, the content is able to be behind the character models when they are in front of it, without being behind all models.

Any help is much appreciated, thanks!

see: How do i get occlusions of WebGLObjects onto CSS3DObject - #2 by drcmda

there’s two ways to solve this,

  • raycasting. every html object casts a ray (through the entire scene) towards the camera. if the ray hits anything the object suddenly disappears. this is complicated, very expensive and looks :poop:

  • blending. this makes html practically part of your scene and objects occlude naturally without suddenly disappearing, without any expense or complex calculation, it comes practically for free.