Three.js 材质设置金属效果

Question

如果希望渲染出来某种材质效果，可以从Three.js引擎提供的基本材质中选择，首先肯定要选择网格类材质，而不是点、线材质，比如MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial、MeshPhysicalMaterial等。
MeshBasicMaterial不受点、平行光等光源影响，肯定是排出的。MeshLambertMaterial材质受方向光影响，但是该材质并不能模拟反映材质表面的漫反射、镜面反射效果，只是网格表面有简单明暗变化。

高光网格材质MeshPhongMaterial和物理网格材质MeshPhysicalMaterial材质都能模拟物体表面的漫反射、镜面反射效果，不过物理网格材质是基于物理渲染，也就是PBR技术，效果更加逼真，如果是为了渲染更好的效果，可以选择物理网格材质，物理网格材质的基类是标准网格材质MeshStandardMaterial。

查看Three.js文档，可以看到标准网格材质 MeshStandardMaterial 有金属度 .metalness 和粗糙度 .roughness 两个属性，可以通过设置这两个属性来模拟一个金属效果。

代码设置

一方面是设置材质的金属度和粗糙度属性，另一方面需要设置环境贴图，设置环境图，模型反射周围的环境，显示效果更逼真。

除了设置材质参数外，光照也需要设置，比如添加具有方向的点光源、平行光源、聚光源等。

材质参数和光源参数设置没有具体的值，只有一个大概的方向和范围，如果在代码中反复设置材质参数，调试渲染效果，比较麻烦和不方便，可以借助Three.js editor编辑器或在前端代码中设置一个滚动条控制一个材质或光照参数，可视化手动调试出来一个好的效果，就像3D美术使用三维软件一样调材质。

var textureCube = new THREE.CubeTextureLoader()
  .setPath('./环境贴图/')
  .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
mesh.material = new THREE.MeshPhysicalMaterial({
  color:0xff0000,
  // 材质像金属的程度. 非金属材料，如木材或石材，使用0.0，金属使用1.0，中间没有（通常）.
  // 默认 0.5. 0.0到1.0之间的值可用于生锈的金属外观
  metalness: 1.0,
  // 材料的粗糙程度. 0.0表示平滑的镜面反射，1.0表示完全漫反射. 默认 0.5
  roughness: 0.6,
  // 设置环境贴图
  envMap: textureCube,
  // 反射程度, 从 0.0 到1.0.默认0.5.
  // 这模拟了非金属材料的反射率。 当metalness为1.0时无效
  // reflectivity: 0.5,
})