MeshReflectorMaterial not working

[vinayakvivek]

Hi, I'm trying to create a reflective surface, similar to the Image Gallery example. With the similar code for reflective surface, I'm just getting a transparent surface.

<Canvas gl={{ alpha: false }}>
  <color attach="background" args={['#191920']} />
  <Environment preset="city" />
  <group>
    <Sphere position={[0, 1, 0]}>
      <meshStandardMaterial metalness={0.5} roughness={0.1} />
    </Sphere>
    <mesh rotation={[-Math.PI / 2, 0, 0]}>
      <planeGeometry args={[50, 50]} />
      {/* <meshStandardMaterial roughness={0.0} metalness={0.5} /> */}
      <MeshReflectorMaterial
        blur={[300, 100]}
        resolution={2048}
        mixBlur={1}
        mixStrength={60}
        roughness={1}
        depthScale={1.2}
        minDepthThreshold={0.4}
        maxDepthThreshold={1.4}
        color="#151515"
        metalness={0.5}
      />
    </mesh>
  </group>
</Canvas>

Could it be because of r3f or drei version difference, or anything missing from my snippet?

[Harukisatoh]

Same here, did you find a way to solve this?

[timur3d]

Add a light

[marc-aurele-besner]

MeshReflectorMaterial is part of Drei library, so probably best to ask there (https://github.com/pmndrs/drei), but I see 2 things missing

1. Some light (as mentioned before me)
2. A plane like <planeGeometry args={[20, 32]} /> before the MeshReflectorMaterial

[mqbaka02]

I don't see the rest of your code but, you are supposed to import that material with import { MeshReflectorMaterial } from '@react-three/drei'; if you don't do that, your plane will just be transparent as you say.