Hello, I have created a gold ring with MeshPhysicalMaterial and added a envMap to make it more realistic (https://jsfiddle.net/hesamoy/o6jy4b0f/29/). However, I would like to have a look like this:
Since the ring is supposed to be shown to customers so its look is my priority. Please guide me to reach a better look (even if I need to use shaderMaterial). I really appreciate it. Thank you.
The first thing you should do is to use a real environment map in cube map format. Use this example as a starter template to see the intended visual output:
https://threejs.org/examples/#webgl_materials_envmaps_hdr
Right now, you are using the following texture for all sides of your cube texture which is not correct.
Besides, use MeshStandardMaterial instead of MeshPhysicalMaterial. I don’t think you need the clear coat features for a golden ring (pure metals normally don’t use this shading model see here).
That first image looks like it’s using some sort of photography studio environment map. You could download some similar free HDRIs here: https://www.deviantart.com/zbyg/art/HDRi-Pack-1-97402522
Once you have selected an env map of your liking, you can convert it into a Three.JS-friendly cubemap with this helpful tool that @MateuszWis built: https://matheowis.github.io/HDRI-to-CubeMap/
Also, the yellow you’re using doesn’t really look like gold. I recommend a more creamy-orange color. Maybe #ffcc88 would look closer to the sample image.