Three.js 材质设置金属效果 - 文章教程

Three.js 材质设置金属效果

发布于 2021-10-08 字数 2157 浏览 973 评论 0

如果希望渲染出来某种材质效果,可以从Three.js引擎提供的基本材质中选择,首先肯定要选择网格类材质,而不是点、线材质,比如MeshBasicMaterialMeshLambertMaterialMeshPhongMaterialMeshPhysicalMaterial等。
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,
})

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

归属感

这个人比较懒,什么都没有填写!

10 文章
2 评论
20734 人气
更多

推荐作者

魏剑帆

文章 0 评论 0

yanggwq

文章 0 评论 0

qq_c2gI5

文章 0 评论 0

qq_iQVWB

文章 0 评论 0