type
status
date
slug
summary
tags
category
icon
password
Edited
Jul 31, 2023 06:28 AM
Created
Jul 31, 2023 06:08 AM
PBR材质
PBR材质,所谓PBR就是,基于物理的渲染(physically-based rendering)
Three.js提供了两个PBR材质相关的API
MeshStandardMaterial
和MeshPhysicalMaterial
MeshPhysicalMaterial
是MeshStandardMaterial
扩展的子类,提供了更多功能属性。渲染占用资源和表现能力
整体上来看,就是渲染表现能力越强,占用的计算机硬件资源更多。
- 占用渲染资源 MeshBasicMaterial < MeshLambertMaterial < MeshPhongMaterial < MeshStandardMaterial < MeshPhysicalMaterial
- 渲染表现能力 MeshBasicMaterial < MeshLambertMaterial < MeshPhongMaterial < MeshStandardMaterial < MeshPhysicalMaterial
金属度 metalness
金属度属性
.metalness
表示材质像金属的程度, 非金属材料,如木材或石材,使用0.0,金属使用1.0。threejs的PBR材质,
.metalness
默认是0.5,0.0到1.0之间的值可用于生锈的金属外观粗糙度 roughness
生活中不同物体表面的粗糙程度不同,比如地面比较粗糙,比如镜子表面就非常非常光滑。
粗糙度
roughness
表示模型表面的光滑或者说粗糙程度,越光滑镜面反射能力越强,越粗糙,表面镜面反射能力越弱,更多地表现为漫反射。粗糙度
roughness
,0.0表示平滑的镜面反射,1.0表示完全漫反射,默认0.5。镜面反射
把粗糙度
roughness
设置为0,看看模型对环境贴图的反射效果环境贴图 envMap
环境贴图对PBR材质渲染效果影响还是比较大,一般渲染PBR材质的模型,最好设置一个合适的环境贴图
立方体纹理加载器
CubeTextureLoader
立方体纹理加载器
CubeTextureLoader
的.load()
方法是加载6张图片,返回一个立方体纹理对象CubeTexture
。立方体纹理对象
CubeTexture
的父类是纹理对象Texture
。最后,结合所有
场景环境
如果你希望环境贴图影响场景中scene所有Mesh,可以通过Scene的场景环境属性
.environment
实现,把环境贴图对应纹理对象设置为.environment
的属性值即可。MeshPhysicalMaterial
MeshPhysicalMaterial
和MeshStandardMaterial
都是拥有金属度metalness
、粗糙度roughness
属性的PBR材质,MeshPhysicalMaterial是在MeshStandardMaterial基础上扩展出来的子类,除了继承了MeshStandardMaterial的金属度、粗糙度等属性,还新增了清漆.clearcoat
、透光率.transmission
、反射率.reflectivity
、光泽.sheen
、折射率.ior
等等各种用于模拟生活中不同材质的属性。Demo
最后来做个Demo
内容差不多到这里就介绍完了 🎉🎉🎉
参考链接
- 作者:JinSo
- 链接:https://jinso365.top/article/three-pbr
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。