Controlling Reflection Intensity

Questions
,
1

Hi, I’m trying to achieve a result similar to:

Screen Shot 2020-07-25 at 18.00.41
Screen Shot 2020-07-25 at 18.00.412208×1628 230 KB

where the blue and black objects are reflective.

I saw this example: three.js examples that uses THREE.Reflector but couldn’t find how to control the reflection intensity (so it won’t be like a mirror) or the reflective object color.

How would you go about this?

Thanks!

3

Link doesn’t work anymore. I have the same question as above.

4

The THREE.Reflector class has a color option. Can you solve your issue by changing the default value (0x7F7F7F) to a different one?

5

As you can see below, changing the color doesn’t decrease the intensity of the reflection. I’m wondering if their is a way in the fragment-shader code of the THREE.Reflector to do so. Is their any performant work around I can do?

image
image1401×788 139 KB

6

Are you looking for a fading effect like discussed in Creating a fading reflection or a constant attenuation over the entire reflector?

I’m asking since there is already a solution for the first one.

7

A constant attenuation over the entire reflector. I have looked at the fading example and its not the desired effect. I’d like as if I can change the intensity of the reflection over the entire reflector. Like make the intensity of the reflection range from 0 to 1.

8

Just do this. On top of the reflector ( just a little bit of transformation in the y axis ) create a plane that would match the size of the reflector object, and give it a material like this one :

var planeMat = new THREE.MeshLambertMaterial({
    color: 0x00008b, // dark blue
    transparent: true,
    opacity: 0.5,
    reflectivity: 0
});

… and there you go. It is not something I would call perfect, but in my case did the job.

9

the blur reflector in that post has that property, it is called “mixStrength”. put “mixBlur” to 0 and you have it.

1 Like