javascriptreactjsthree.jswebglreact-three-fiber

How to make completely white floor with shadows?


Please help. I want white floor and shadows on it, but all I get is lightgray floor with very thin shadow: lightgray floor

My floor and light configuration:

const ModelSceneEnvironment = () => {

  return (
    <>
      {/* Light  */}
      <directionalLight
        position={[0, 3, 0]}
        intensity={1}
        color='white'
        castShadow
      />
      <Environment
        files='/hdri_lightbox_default.hdr'
        background={false}
      />

      {/* Floor */}
      <fog
        attach='fog'
        args={['white', 0, 40]}
      />
      <Circle
        receiveShadow
        rotation={[-Math.PI / 2, 0, 0]}
        args={[40]}
      >
        <meshPhongMaterial
          color='white'
          emissive='white'
        />
      </Circle>
    </>
  )
}

When i change floor material to emissive='gray' I get this(shadow is good, but floor even grayer): gray floor

Baked shadows not an option, because models are changing dynamically.


Solution

  • Found a solution. You need to use shadowMaterial

    <Circle
        receiveShadow
        rotation = {[-Math.PI / 2, 0, 0]}
        args = {[40]}
    >
        <shadowMaterial opacity = {0.2} />
    </Circle>