Environment not visble for MeshPhongMaterial

Questions
1

Hi,

I’m trying to add an environment to my scene using THREE.RGBELoader and HDR images. Even though the environment is added to the scene it is not visible. This only occurs with MeshPhongMaterial. its working fine for MeshStandardMaterial

MeshStandardMaterial :
image

MeshPhongMaterial :
image

Here is the code I use to add the environment:

RGBELoader.load("MR_INT-001_NaturalStudio_NAD.hdr",
      function (texture) {
           texture.mapping = THREE.EquirectangularReflectionMapping;
           scene.environment = texture
      }, 
      undefined, 
      function (error) {
           buttonBussy(false);
           console.error(error);
           }
);

Is there any other way to add environment to MeshPhongMaterial

Thanks,
Binoy

2

Can anyone tell me how reflection in envMap is added in this example Three.js Material Browser ?

3

For basic, lambert and phong: folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );

Shortly: it uses .envMap material’s property.

5

I did try to add the texture to material.envMap but no change was found. Also tried increasing reflectivity.

1 Like
6

DirectionalLight can illuminate it, but other lights cannot illuminate it. I think it is a bug.

7

scene.environment affects only PBR materials (MeshStandardMaterial, MeshPhysicalMaterial). But MeshPhongMaterial does support .envMap.

See:

8

I was able to reproduce Three.js Material Browser. In the example they do const envMap = new THREE.CubeTexture() for MeshPhongMaterial. They also set envMap.combine = 1 | 2 (MixOperation | AddOperation).
If you want to use .hdr / .exr map instead of CubeTexture, do const envMap = useLoader(RGBELoader, 'map.hdr'); envMap.mapping = THREE.EquirectangularReflectionMapping