Transmission | MeshPhysicalMaterial | does not work

transmission property does not work in MeshPhysicalMaterial. Console does not have errors but one warning:

three.module.js:8827 THREE.MeshPhysicalMaterial: ‘transmission’ is not a property of this material.

i did check examples and I am structuring my material exactly like in the documentation:

this.carPaintGlass= new THREE.MeshPhysicalMaterial( {

  transparent: true,
  envMap: this.envTex,
  color: 0xff0000, 
  metalness: 0, 
  roughness: 0, 
  transmission: 0.9, 

} );

Does it look like MeshPhysicalMaterial does not recognize transmission property?

transmission is a very new feature. You are most likely using not the most recent version of threejs.
I can see on the github history, transmission was added on July 17 2020

thanks for the reply, looks like latest available version on NPM is 118 and this is the one i am on, i see latest version here is 119 but it is not available on npm.

i’ve got 119
npm update

thanks, all good !

sorry, i meant to say,
npm install three@latest

1 Like

woa i wasn’t aware three had this! i tried and it looks great, but transmission does not support roughness, is that correct? i mean, it does something, but it doesn’t smudge the background shining through.

Yeah, the implementation is pretty simple right now: similar to a thin, smooth glass, where reflections don’t disappear at 100% transmission like they would with alpha transparency. See discussion in

We would like to support the full glTF transmission material spec (which would include surface roughness), and eventually volume, refraction, and subsurface scattering.


thanks don! looking forward.

as a daily practice i tried recreating one of ARC’s visuals:

this is what i’ve got so far:

but there wouldn’t be any way to easily get surface blur, correct?


Ah that’s a really nice example!

The surface refraction / blur can be approximated by blurring the IBL, but that doesn’t work for objects seen through the surface. No easy answer for the latter.

I liked drcmda’s example so much, that I had to try it out myself.


It seems like Three v133 transmission is not working when the object behind it has transparent set to true. Is this a known issue? Let me know if I should post a repro.

This is a known limitation – see Examples: webgl_loader_gltf_transmission issues · Issue #22009 · mrdoob/three.js · GitHub

1 Like