Problem with R3f reflector VS three's ('three/examples/jsm/objects/) reflector.js

Hi everybody,

I started a new project where i need a big (white) mirror on the floor, what I achieved this way for a simple THREE.js project (with imports from ./jsm/etc…). That looks like that :

This is achieved this way :

import { Reflector } from 'three/examples/jsm/objects/Reflector.js';

//creating mirror

let mirrorGeometry = new THREE.PlaneBufferGeometry( 100, 1000, 100, 1000 );
let mirror = new Reflector( mirrorGeometry, {
      clipBias: 0.01,
      textureWidth: window.innerWidth * window.devicePixelRatio,
      textureHeight: window.innerHeight * window.devicePixelRatio,
      color: 0x777777,
      opacity: 0.5
} );
mirror.position.y = 0
mirror.rotateX(  - Math.PI / 2 );
scene.add( mirror );

//creating another plane with 0.5 opacity to make a less "agressive mirror"
//adding this plane between the mirror ant he objects that need to be "mirrored"

var maskGeometry = new THREE.PlaneBufferGeometry( 300, 300, 300, 50 );
let maskMaterial = new THREE.MeshStandardMaterial({color: 0xffffff, transparent: true, opacity: 0.8})

var maskPlane3 = new THREE.Mesh( maskGeometry, maskMaterial );
maskPlane3.rotation.x = Math.PI / 2;
maskPlane3.position.x = 0.1
town.add( maskPlane3 );
//then adding some lights, mainly this ambient light (low poly scene) that is white... as you'll see

const alight = new THREE.AmbientLight( 0xffffff, 1 ); // soft white light
scene.add( alight );

This does the example above. And that’s the effect I need.

Then, for many reasons, I would like to do the exact same thing in react-three-fiber.
So what I do is :

<Canvas style={{height:"100vh",width:"100vw",backgroundColor:"#ffffff"}}>
          <Box position={[0, 0, 0]} />
          <PerspectiveCamera position={[0, 7, 15]} makeDefault={true}/>
          <OrbitControls minDistance={[10]} maxDistance={[100]}/>
          <hemisphereLight color={0xf45eff} intensity={0.5}/>
          <pointLight position={[10, 50, 0]} color={0xffffff} intensity={2} />
          <ambientLight intensity={1} color={0xffffff} />

          <mesh rotation-x={Math.PI * -0.5} position={[0, -1, 0]}>
            <planeBufferGeometry args={[20, 20]}/>
                blur={[0, 0]}
                mirror={0} // Mirror environment, 0 = texture colors, 1 = pick up env colors

Then what I get is this :

Or, if I change mirror to 1 :



Is there any way I can reproduce exactly with react-three-fiber the mirror I have with my three.js js code (first picture and code) ?

Have a nice evening !
Thanks a lot !

Ok my mistake,

It seems that setting the renderer color fixes my problem…
I was used to do it with three… i forgot it as R3F seems to set all the renderer’s by itself.
It also seems that they can be modified like this :