How to reflect the color (and not the shinyness) of a sun on a plane (mirror effect, reflection, cubecamera, etc)

Questions
, , ,
1

Hi everybody,

I would like to do exactly what’s done with the cube mesh in the ocean shader example. It refllects the light (of the sun) position, but also its colours.

As I see in the example (ocean shader), the cube is loaded and reflects the light of the sun, but it seems it does not come from the code shown in the example as it does that when I use it on my local installation :

image

VS

image
image819×720 124 KB

That’s not what I aim to do but I studied a lot the code of this example and I now assume that there’s no answer to my question in it : I don’t find anything related to mirror effect, cube camera, material metalness, or anything that could give me a clue.

Although i did not manage to reflet sun color on a solid, I did manage to display it’s shinyness a “dynamic way”, as in the ocean shader example.

What do I need to learn ? Do I need to have a look at the RectangleLight example (that does what I want to do),

And a more simple question :

Why does this cube reflects the sun color and luminosity, and how does it works (Mirror effect ? Cube camera ? Opacity reflection effect ? EnvMap ?)? Is it related to this topic by any mean : SkyShader example, get light color
And last but not least :
Why should it work on github and not on my local installation ?

2

I’m trying to update / upgrade node dependencies, and not load anything that should be deprecated, that may change something… that would be quite logical, I’ll try to import dependencies directly from the three.js online repository. Edit : I’ll try to set up a new local installation as made in Looeee’s tutorial, that might help me.

As in the pen below, in fact : https://codepen.io/vincent789/pen/QWNWmKa

3

The reflection on the cube from the scene.environment which is set here.

4

Ok, thanks a lot !
What I don’t understand is the fact it works on the github official three repository,
-> https://threejs.org/examples/#webgl_shaders_ocean <- With this example, and logically…
… this code ->https://github.com/mrdoob/three.js/blob/fd046cbc06b7a93ed2e34090e7fe19c72afdde9f/examples/webgl_shaders_ocean.html<-

But not in any local installation, as in the pen below -> this one is the exact code for the ocean shader on the github repository.

Also, I saw PMREM is in related to mesh’s roughness, but do I have to set an envMap + do things exactly like in this example : https://threejs.org/examples/#webgl_materials_envmaps_hdr_nodes

Should’nt it be able to work a more simple way, as in the original ocean shader example ?

5

It’s because you’re using an older version of three. Should work if you change the imports from

https://threejsfundamentals.org/threejs/resources/threejs/r115/

to

https://unpkg.com/browse/three@0.119.1/

There have been quite a few changes to how environments are handled in the last few months. I’m not sure what change makes the difference here.

6

Ok, thanks a lot !!! That will be quite difficult to keep up to date though, I’ll try to follow the versions evolutions a bit more.