Pure white MeshReflectorMaterial

[imjoshin]

Hello everyone!

I'm very new to three.js and I've been attempting to make a pure white mesh material with MeshReflectorMaterial.
For my surface, I'm using:

<MeshReflectorMaterial
  blur={[250, 150]}
  color="#ffffff"
  depthScale={0.5}
  maxDepthThreshold={5}
  minDepthThreshold={0}
  mixBlur={1}
  mixStrength={8}
  metalness={0}
  resolution={1024}
  roughness={0.8}
/>

Here's the result so far:

Thought increasing lighting or other parameters on the MeshReflectorMaterial itself wash out the reflections. Is it possible to get the result similar to mirror={1}, but with the black background being transparent or white?

Thank you 😄

[mwmwmw]

I don't think transparent will work, but white is possible.

mirror=1 will reflect the surrounding environment. So add a sphere that encompasses your scene, set it to side=BackSide and make it quite large.

MeshReflectorMaterial will "see" that dome and reflect it.

Use some fog to hide the boundary between the pure white reflection and the grey-ish dome.

<fog attach="fog" color="white" near={10} far={20} />

Here is an example
https://codesandbox.io/s/mirror-reflector-wvcwqz?file=/src/index.js