Does anybody know of a way to pull off this look? Anyway to add blur to Reflection.js or something similar?
I saw this pic as I have been working on floors and thought this would be a great addition to my app
Jeff
1 Like
if you use threejs with react it’s very simple, tweak the amount of blur and depth-blur with props.
import { MeshReflectorMaterial } from "@react-three/drei"
...
<mesh>
<planeGeometry />
<MeshReflectorMaterial />
if you don’t you can re-purpose it to your needs, here’s a quick and easy sandbox: Reflector variant - CodeSandbox it’s a special variant that only displays the reflection and stamps out everything else. for the real thing that supports ground color, normalmaps, distortionmaps and all that stuff you’ll find the code here: drei/MeshReflectorMaterial.tsx at 67ed4a448f594355fa99100871a4977276de96fc · pmndrs/drei · GitHub
WOW that’s exactly what I want to achieve, but I do not use react or ES6, is there an old ES5 version available?
Only modules, but you’ll have to port it to vanilla code anyway. There is no vanilla variant of this, it would be very hard to share because of system interop and awareness of the environment it’s in. When you do port it, the only part that’s React is the main file (MeshReflectorMaterial.tsx), everything inside useFrame must run in your render-loop.
Porting is a bit out of my wheel house. Any chance to hire you to do so?
No time 
It’s not really “porting” the vanilla three code is right there. It just needs to be sticked into a class or whatever coding pattern you prefer.
ps. made a quick prototype with images aligned like in your example Reflector variant (forked) - CodeSandbox
2 Likes
Damn you. That looks f–king Awesome, just like my photo
However I feel it’s beyond me to pull it out and redo correctly. Maybe some other more talented folk in here can help or if you ever get bored with spare time on your hands
Thanks
Jeff
PS. I WISH I KNEW ES6 & REACT!!!
you could attempt to learn it, it’s quite easy. the thing is, i’ve made that box under 5 minutes, that’s something that will never be possible in raw oop code without components. same as anything else on the web. what these frameworks did isn’t much, but it enabled people to finally share code, so you don’t have to be an expert in each and everything, you just compose building blocks.
i’ve had some fun and added click to zoom and linkable url routes. i think this can actually be turned into some kind of gallery now. 
NFT Gallery - CodeSandbox
1 Like
Well the thing is my app has hundreds of components already that I have pulled together from various sources. I did take a look at the code and it simply looks unfamiliar to me. For example all the shaders I have used in the past have been in JavaScript files in 2 parts. I did not find that in your code. I see some resemblance of parts but I don’t know enough about that.
That’s great you did it so fast and that’s what I am trying to do for others with my app. A drag and drop interface to threejs and other apis. This is my only project and so far into it, I would rather find new pieces to add to it than to start over from scratch to learn a different way even if it’s a better way for a project I have been working on for 7 years.
I already have reflections working on my floors with reflection.js, I just need to figure a way to blur them.
You can see the beta of my app here.
I recently revamped it for the nft market, but I have a lot of OLD code in there and to think about redoing it all just gives me the shivers. I would LOVE to add this to my app, but without help I can’t see a way to do so.
Just think of a little puppy looking up at you with sad eyes 
1 Like
So amazimg. I tried to port it but was inpossible with my current knowledge of react. 
. Someone found it anywhere? I really need it for a new project. Any help would be greatly appreciated. Thanks.
1 Like
fyi there is a react-less version here, the blur settings could have been better I guess (cc @MrBodean )
1 Like
Well that does let you blur but bad banding and no fade off, well maybe one day:)
1 Like
Thank you so much for your reply Mack. She helped a lot!
I implemented it in my project, but apparently the reflection is misaligned when applied with the blur. Using the default reflector, the reflection is aligned, but no blur.
I think it must be something related to the RTT reflector normals.
But anyway, it helped me a lot with your answer and time dedicated to answering.
Best regards
It works perfectly. It was my mistake. The original code changes the offset of the normals. I took that off and now the blur works perfectly. I just need to study now how to put more intervals for the blur to be smoother and also how to apply a texture or opacity to it to allow you to see the real floor of the model.
But the current result was very good. It is already much better than the standard reflector with the appearance of the mirror.
Thank you one more time!
@MrBodean Bodean, your reflector is very unique. I’ve been looking for a long time and never found another one but yours :P. And it is the best one ;). Congratulations for your amazing job with threejs.
It was not mine, I was Looking for one like you 
the other options you mentions texture and opacity a must, what I do now is lay another plane above mirror and change opacity of that. It works but would be nice to have it all together. One last thing I am interested is the fade out on the layer, like in his example you see how the objects are sharper toward top and fade to nothing. I think he called it depth blur If you could get those all together in one that worked in vanilla js, I would call you GOD for a week! No, year, ok forever…. 
PS.he had answer someone asking same in another thread and had this link, maybe it will help
1 Like
do you think you could update that example, it fails with
Could not load potsdamer_platz_1k.hdr: NetworkError when attempting to fetch resource.
for me rn.
edit: seems like I cant access rawcdn.githack.com - removing <Environment> helps 
there is a bug (feature ?) with TV shadow skewing into the direction of rotation, btw.
seems like they blocked us i guess hosting assets on github, not a good idea. i’ve updated the links to the poimandres market, hopefully that lasts. here’s the updated box Image Gallery - CodeSandbox
yep, i know it behaves like that, it seems to lag a frame behind. most likely it’s at the wrong spot (before/after render) but i haven’t attempted to fix it yet. not even sure i can given that the math in that component kills me.