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

**URL:** <https://discourse.threejs.org/t/problem-with-r3f-reflector-vs-threes-three-examples-jsm-objects-reflector-js/34090>\
**Category:** Questions\
**Tags:** reflector, materials, react-three-fiber, geometry\
**Created:** [January 25, 2022, 6:57pm UTC](https://discourse.threejs.org/t/problem-with-r3f-reflector-vs-threes-three-examples-jsm-objects-reflector-js/34090 "2022-01-25T18:57:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![RobertBeric42](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/robertberic42/32/10608_2.png) [@RobertBeric42](https://discourse.threejs.org/u/RobertBeric42)\
**Post date:** [January 25, 2022, 6:57pm UTC](https://discourse.threejs.org/t/problem-with-r3f-reflector-vs-threes-three-examples-jsm-objects-reflector-js/34090/1 "2022-01-25T18:57:02Z")

</div>

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 :

 ![Capture d’écran (2)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/1/219f4921e09ae7252fc91e2e5d41fc9be9ae38b3.png)

This is achieved this way :

```javascript
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 :

```javascript
<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]}/>
            <MeshReflectorMaterial
                blur={[0, 0]}
                mixBlur={0} 
                mixStrength={1}
                mixContrast={1}
                resolution={256} 
                mirror={0} // Mirror environment, 0 = texture colors, 1 = pick up env colors
                depthScale={0} 
                minDepthThreshold={0.9}
                maxDepthThreshold={1} 
                depthToBlurRatioBias={0.25} 
                distortion={1} 
                debug={0} 
/>
            </mesh>      
        </Canvas>

```

Then what I get is this :

 ![Capture d’écran (3)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/3/437f8c34bcbff914a814e99303104a3230acf42f.png)

Or, if I change mirror to 1 :

```javascript
 mirror={1}

```

this…

 ![Capture d’écran (4)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/e/5ee8e17dafaa84f9a299f88dfec546e33d7b2291.jpeg)

…

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 !  
Vincent.

---

<div class="post-metadata">

**Author:** ![RobertBeric42](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/robertberic42/32/10608_2.png) [@RobertBeric42](https://discourse.threejs.org/u/RobertBeric42)\
**Post date:** [February 3, 2022, 10:35am UTC](https://discourse.threejs.org/t/problem-with-r3f-reflector-vs-threes-three-examples-jsm-objects-reflector-js/34090/2 "2022-02-03T10:35:43Z")

</div>

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 :

 ![Capture d’écran de 2022-02-03 11-33-32](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/2/72cf7353187b01f78a538dce580d5877178a2fe7.png)