Three.js: SpecularGlossiness materials no longer reflect the environment

[elalish]

Description of the problem

Something happened between r110 and dev, where glTF with SpecularGlossiness aren't playing well with PMREM anymore (other lights work).

To repro, put this model in Don's viewer and turn off the ambient and direct lights and you'll see this:

Three.js version

• [x] Dev
• [ ] r112
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[elalish]

Ping @donmccurdy @Mugen87

[WestLangley]

@elalish Does the three.js example work for you?

[donmccurdy]

Loading the model in my viewer...

https://gltf-viewer.donmccurdy.com/#model=https://rawcdn.githack.com/KhronosGroup/glTF-Sample-Models/130fe585dd2133fee6dc79d22ecddd3e73ea7af0/2.0/SpecGlossVsMetalRough/glTF-Binary/SpecGlossVsMetalRough.glb

... I've confirmed that copying scene.environment to material.envMap fixes the issue. Run this in the JS console to see the fix:

var envMap = content.parent.environment;
content.traverse((o) => {
  if (o.isMesh) {
    o.material.envMap = envMap;
    o.material.needsUpdate = true;
  }
});

So https://github.com/mrdoob/three.js/pull/18465 really does look like the right solution, but I'm not sure why it doesn't seem to be working.

[mrdoob]

I'll take a look tomorrow.

[Mugen87]

Just for the record: The reason why Scene.environment does not work for the specular/glossiness material is explained here: https://github.com/mrdoob/three.js/issues/18265#issuecomment-570775147

[elalish]

@WestLangley indeed, that model works, since the problem is restricted to scene.environment. Thanks for bringing that test to my attention though!