MeshReflectorMaterial: wrong reflections if applied on a GLB plane exported from Blender

[davcri]

Problem description:

MeshReflectorMaterial works fine for a planeGeometry created from ThreeJS, however it doesn't work out of the box for a plane geometry exported from Blender.

What I noticed is that it produces wrong reflections by default:

Correct reflections:

Workarounds

There are 2 workaorunds: one from Blender and one from JS (but requires patching the material source code).

In Blender:

• add a Plane
• enter in edit mode
• rotate all the vertices by 90° on the X axis
• enter object mode
• rotate the object by -90° on the X axis
• export the GLB

In JS:

• Change this line https://github.com/pmndrs/drei/blob/master/src/core/MeshReflectorMaterial.tsx#L99
  from normal.set(0, 0, 1) to normal.set(0,1,0).

I'm not sure if it's possible to derive a normal from a GLB plane programmatically though.

Relevant code:

In this codesanbox:

• model1.glb is a Plane exported directly from Blender
• model2.glb is a Plane exported with the workaround applied

https://codesandbox.io/p/sandbox/376kv7