Three.js: ShadowMesh bug when using fog

[iamnotstone]

Description of the problem

The shadow color changed when use a fog. we have set fog = false in ShadowMesh. like this:

  var shadowMaterial = new THREE.MeshBasicMaterial( {

    color: 0x606060,
    transparent: true,                                                                      
    opacity: 0.6,                                                                           
    depthWrite: false,                                                                       
    fog: false                                                                              
  } ); 

• codepen

Three.js version

• [ ] Dev
• [x] r104
• [ ] ...

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, ...)

[WestLangley]

Disable the ShadowMesh response to fog like so:

let shadowCube = new THREE.ShadowMesh( cube );
shadowCube.material.fog = false;

You are mixing concepts, however. The following lines are only required if you are using shadow mapping.

renderer.shadowMap.enabled = true;
light.castShadow = true;
cube.castShadow = true
plane.receiveShadow = true

[iamnotstone]

Shouldn't the ShadowMesh always disable the fog response ?

[WestLangley]

First of all, please modify your codepen like so and update the link in your first post.

fog = new THREE.Fog( 0xffffff, 1, 100 );

ShadowMesh is a hack to fake shadows. It does not appear to respond to fog as one would expect...

[iamnotstone]

Ok, all stuff about shadowMap has been cleared. I know the the concept about ShadowMesh, the code about casting shadowmap is just a legacy in previous sample code.

[WestLangley]

Setting this in your example looks best, I guess:

shadowCube.material.color.setHex( 0x808080 );
shadowCube.material.fog = false;