Silver Polished material in three js

Question

I am new to three js and trying to create a cube like this: I can't figure out how to create the material for my cube. The material seems to be silver polished. It has reflection and nice edges. Would you please help me to find out which material with which parameters will give me result like that?

Answer 1

You want to create a silver, polished material in three.js.

MeshStandardMaterial is a physically-based material and was designed for that purpose.

var material = new THREE.MeshStandardMaterial( {
    metalness: 1,   // between 0 and 1
    roughness: 0.5, // between 0 and 1
    envMap: envMap,
} );

Be sure to specify an environment map so there is something to reflect. Adjust the other parameters to your liking.

three.js r.86

Answer 2

Use a THREE.MeshPhongMaterial() and set the envMap property to the renderTarget of the camera you want to use for reflection. For the polished look you can use a texture in the specularMap property (or even the specular property).

The smooth edges are done by calling geometry.computeVertexNormals().

Edit: As mentioned by @prisoner849, computeVertexNormals needs to be called before you apply the material.

Edit 2: As requested by @prisoner849, here's a working example

Edit 3: @WestLangley mentioned using THREE.MeshStandardMaterial() should work better, so the example has been updated to reflect that.