How to make a reflective Plane?

[jdotolsson]

Hello,
I am new to both ThreeJs and React Three Fiber.

I am still experimenting with the Box demo found in the readme.
I've managed to implement a Orbit Control and a plane found here: LINK

But I want to make the Plane reflective, how can i archive that in react three fiber?
Preferably i would also want to set a fading to the reflectivity as well, exemple

I've been looking at this example with ThreeJs but don't know where to start to actually "translate" it into react three fiber

Any chance I can get some help or pointers in the right direction?

[drcmda]

you dont need to translate it, you can use it 1:1. the challenge will be plucking it out of the original demos, because in plain threejs everything is wired into everything. reflective materials are very expensive and usually mean rendering the scene twice with an upward camera and some additional shaders. that car example, hard to think it's even possible, that image is raytraced, not rendered in the traditional sense. if you want to try, start with this: https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js --- http://hash0k.com/three-js-reflector/

contact shadows are also very similar and they have blur: https://codesandbox.io/s/r3f-contact-shadow-3iv32 all based on the same principle

from my experience it's awfully complex messing around with webglrender-targets and so on. i will never be able to do this from scratch without copy pasting code.