WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

Three.js材质设置金属效果

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

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

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

一个金属渲染效果,可以查看博客案例:http://www.yanhuangxueyuan.com/3D/jixiezhuangpei/index.html

代码设置

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

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

材质参数和光源参数设置没有具体的值,只有一个大概的方向和范围,如果在代码中反复设置材质参数,调试渲染效果,比较麻烦和不方便,可以借助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,
})
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com