Three js React Three fiber noob question

Questions
, ,
1

Hey !

I am a newbie and I am trying to build a chair configurator app.

Captura de ecrã 2025-01-20, às 14.04.11
Captura de ecrã 2025-01-20, às 14.04.11990×579 76.7 KB

As you can see on the print, its very basic.
I would like to see no color difference between the “sky” and the plane responsible for the chair shadow… How could I do it ?
For the plane I am using:

 <mesh
          rotation={[-Math.PI / 2, 0, 0]}
          receiveShadow
          position={[0, -1, 0]}
        >
          <planeGeometry args={[100, 100]} />
          <MeshReflectorMaterial
            blur={[300, 100]}
            resolution={2048}
            mixBlur={1}
            mixStrength={40}
            roughness={1}
            depthScale={1.2}
            minDepthThreshold={0.4}
            maxDepthThreshold={3.5}
            color="#3c7aad"
            metalness={0.5}
          />
        </mesh>

Can you please help me ?
Thank you very much

2

You see that color difference because the plane’s material is lit/reflected differently than the sky. There are a few options:

  1. Match Colors Exactly: Use the same color for the plane and the scene background, and reduce reflection/lighting differences. For example:
scene.background = new THREE.Color('#3c7aad');
<MeshReflectorMaterial color="#3c7aad" metalness={0} roughness={1} … />

Setting metalness={0} and roughness={1} will reduce reflective contrast.
2. Use a “Shadow Only” Plane: If you only need shadows, a simpler approach is a ShadowMaterial, which catches shadows but remains invisible:

const shadowMaterial = new THREE.ShadowMaterial({ opacity: 0.5 });
// Then set your plane to use shadowMaterial
  1. Lighting Adjustments: If you want some reflection, ensure your environment or scene lighting matches so the plane doesn’t appear darker/lighter than the background.