Quiet
  • 主页
  • 归档
  • 分类
  • 标签
  • 链接
  • 关于我

bajiu

  • 主页
  • 归档
  • 分类
  • 标签
  • 链接
  • 关于我
Quiet主题
  • WebGL
  • ThreeJs

Three.js材质设置金属效果

bajiu
前端

2020-08-06 15:27:00

皮肤定义了一个几何体看起来是否像金属、透明与否、或者显示为线框。

如果希望渲染出来某种材质效果,可以从Three.js引擎提供的基本材质中选择,首先肯定要选择网格类材质,而不是点、线材质,比如MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial、MeshPhysicalMaterial等。

  • MeshBasicMaterial不受点、平行光等光源影响,肯定是排除的。

  • MeshLambertMaterial材质受方向光影响,但是该材质并不能模拟反映材质表面的漫反射、镜面反射效果,只是网格表面有简单明暗变化。

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

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

PBR技术: 咱也不是很懂

上一篇

webpack5 重大变更

下一篇

Three.js改变模型对象的旋转轴位置

©2024 By bajiu.