Please help: How to create a physical material that is transparent only in certain areas?

Hi there!

I’ve scoured the internet about this topic and basically, I was wondering how this could be replicated in three.js via a MeshPhysicalMaterial running a GLSL shader with an alpha channel on .onBeforeCompile()?

I know that generally a MeshPhysicalMaterial should be used, and the easy part is making it transparent because generating a normal glass material is very straightforward, but how could someone pass the alpha channel from a GLSL shader into the MeshPhysicalMaterial, making the parts where the dots exist colored, still translucent, refracting light?

I don’t really know how to do this, and really this is just for the sake of discussion. I can provide code, but generally… I don’t really know how that would look.

If anyone has any advice please let me know!

Also: the best I could find was this example though it still doesn’t really get it right because you can’t see the texture overlapping on the back of the sphere!

It sounds like you are describing an alphaMap.
MeshPhysicalMaterial inherits alphaMap since it is derived from a MeshStandardMaterial that implements alphaMap.

Here is an example that uses an alphamap on a MeshStandardMaterial. It still works if you change it to a MeshPhysicalMaterial.

Transparent Shadows : Transparent Shadow - Three.js Tutorials