Search code examples
javascriptthree.jswebgllightingmirror

Three.js creating a mirror VS. steel effect on material?

In three.js I'm a bit confused about metalness and roughness. What would be the difference in the metalness and/or roughness in a mirror and metal/steel example, and how would I make them?

For example, how can I make a mirror, like this:

Mirror

and a metal material, like this:

Metal

Solution

  • If you have ever used PhotoShop or GIMP, you may remember using the Gaus blur tool. This is exactly how the roughness works. If you set roughness to 1, the environment map will be blurred. If you set it to 0, it won't have any of the blur at all.

    Metalness on the other hand, is how much of a environment the object is supposed to reflect. Setting this to 1, will set the intensiveness of environment to 100%, so you will get the clear image. Think of this as of a opacity of enviroment placed on object. If you set it to 0, you may find yourself troubled, as the object - that has no textures (In your case, that's the mirror - the reflecting part has no texture set. It may have attached displacement map, or a UV texture to give a bit more details) will be black. And that makes sense, since you don't have any textures placed.

    Here are great examples from the three.js:
    https://threejs.org/examples/webgl_materials_envmaps.html https://threejs.org/examples/webgl_materials_envmaps_hdr.html