The principle of roughness and metalness maps in THREE.JS is: the roughness map determines the smoothness of the surface, where black represents a smoother surface and white represents a rougher surface. The metalness map determines the amount of metal in the surface, where black represents a non-metallic surface and white represents a metallic surface.
I followed this principle to create my maps, but I found that the grayscale values for roughness and metalness did not show much difference. Only when the grayscale values are either completely black or white, can I see some variation in material texture.
This image is a metalness map.
This image is a roughness map.