I also gave the material a little metallicity (0.38) to make it more reflective, while it’s transmission is 1.0.
(The screenshot uses a simple three.js scene with one mesh for the dragon and a flat THREE.PlaneGeometry behind it. The object behind shines through nicely).
Now when I put together a model , using different materials, (glasses in this case), I can not see the objects behind the thin glasses anymore:
There’s a complex mix of transmission, alpha blending (.transparent = true), and opaque materials here, which you probably don’t want. Note that transmission only shows opaque surfaces behind it. Transmissive and transparent surfaces are not visible behind a transmissive surface.
Also – it’s usually best to have .transparent = false on your transmissive materials, to keep metalness at 0, and to decrease roughness instead if you prefer crisper reflections.
it looks a thousand times better, is otherwise based on MPM with the same props, and doesn’t have that problem as it “sees” all. and it’s faster, too.
there is a vanilla material in the post, though, sadly, it reverts back to the problem as it can’t see other transmissive/transparent objects. but the code that makes it support that is very little, you can quickly add it from the react material. it just can’t be a self contained single class no more because it needs some setup.
the bunny and the sphere have meshtransmissionmaterial and “see” one another, but they also see their own shadows, which is a transparent plane. MPM wouldn’t be able to do that as well.