Hi, I’m trying to create a glass-like material while it is able to see through a solid object at the back.
At first, I thought MeshPhysicMaterial is limited to this functionality and there is a limitation for threejs in order to do this using uniform it’s provided in the shader.
But then saw a GLTF loader example that has exactly what I needed.
There are two components to the glass-like transparency provided by MeshPhysicalMaterial, you can use one or both.
Transmission: (thin-walled, no refraction)
material.transparent = false;
material.transmission = 1; // 1 is fully transmissive, 0 is opaque.
material.roughness = 0; // higher roughness provides more of a glazed look
material.metalness = 0;
Volumetric Refraction:
material.thickness = 1; // or any value >0
material.thicknessMap = texture;
For refraction to vary with the shape of the object, thickness must be baked to a texture. Using material.thickness = x will provide uniform refraction across the whole object regardless of its actual thickness.
Note that only opaque objects are visible through a transmissive material. There are some other tips in this thread:
Since Three r132 MeshPhysicalMaterial started to support IOR
You can change the IOR slider on this demo to see through it.
Glass Transmission : Glass Transmission - Three.js Tutorials
Note that MeshPhysicalMaterial is still very new, every recent version of Threejs has some changes being done it so there is no promise that this demo will always work the same.
