How to hide meshes behind "transparent" materials?

Questions
, , ,
1

Hi!

We are working on a web-based apartment picker using ThreeJS. The background of the whole scene is high quality image renders of the area, and we are using ThreeJS to put the boxes of apartments on top of it.

We have to show the building through the meshes so we are using transparent materials. Is there a way to limit the “depth” of transparency?

There are two projects that use ThreeJS as well, and they have transparent boxes, or at least the building background image is showing through them (same setup as ours) but the boxes closer to the camera actually block the boxes behind them and they cannot be seen, or if some parts of them are visible, they are correctly cut off.

The two apps:

https://www.lunas.pro/l-touch/web-version/london.html

Anyone has any ideas how they could’ve solved this issue?

Thank you in advance,

András

2

A limited visibility sounds like a clever application of one of the Fog, FogExp2() functions of Three.js. I’m not sure though if the screen.background or environment map would also be affected.

3

On the two links above, the limit does not apply to distance, but the front transparents are blocking the transparents behind them.