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]}/>
<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 :
Or, if I change mirror to 1 :
mirror={1}
this…
…
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.
