PBR材质简介
所谓PBR就是,基于物理的渲染(physically-based rendering)。
Three.js提供了两个PBR材质相关的APIMeshStandardMaterial和
MeshPhysicalMaterial,其中MeshPhysicalMaterial是MeshStandardMaterial扩展的子类,提供了更多的功能属性。
PBR材质金属度和粗糙度
金属度属性.metalness表示材质像金属的程度, 非金属材料,如木材或石材,使用0.0,金属使用1.0。
new THREE.MeshStandardMaterial({
metalness: 1.0,//金属度属性
})
粗糙度roughness表示模型表面的光滑或者说粗糙程度,越光滑镜面反射能力越强,越粗糙,表面镜面反射能力越弱,更多地表现为漫反射。
new THREE.MeshStandardMaterial({
roughness: 0.5,//表面粗糙度
})
环境贴图.enMap
通过前面学习大家知道,通过纹理贴图加载器TextureLoader的.load()
方法加载一张图片可以返回一个纹理对象Texture
。
立方体纹理加载器CubeTextureLoader的.load()
方法是加载6张图片,返回一个立方体纹理对象TextureLoader。
立方体纹理对象CubeTextureLoader的父类是纹理对象Texture。
CubeTextureLoader加载环境贴图
// 加载环境贴图
// 加载周围环境6个方向贴图
// 上下左右前后6张贴图构成一个立方体空间
// 'px.jpg', 'nx.jpg':x轴正方向、负方向贴图 p:正positive n:负negative
// 'py.jpg', 'ny.jpg':y轴贴图
// 'pz.jpg', 'nz.jpg':z轴贴图
const textureCube = new THREE.CubeTextureLoader()
.setPath('./环境贴图/环境贴图0/')
.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
// CubeTexture表示立方体纹理对象,父类是纹理对象Texture
MeshStandardMaterial环境贴图数据.envMap
// 加载环境贴图
const textureCube = new THREE.CubeTextureLoader()
.setPath('./环境贴图/环境贴图0/')
.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
new THREE.MeshStandardMaterial({
metalness: 1.0,
roughness: 0.5,
envMap: textureCube, //设置pbr材质环境贴图
})
obj.material.envMap = textureCube; //设置环境贴图
环境贴图反射率.envMapIntensity
MeshStandardMaterial的.envMapIntensity属性主要用来设置模型表面反射周围环境贴图的能力,或者说环境贴图对模型表面的影响能力。
obj.material.envMapIntensity = 1.0;
MeshPhysicalMaterial清漆层
MeshPhysicalMaterial和MeshStandardMaterial都是拥有金属度metalness、粗糙度roughness属性的PBR材质,MeshPhysicalMaterial是在MeshStandardMaterial基础上扩展出来的子类,除了继承了MeshStandardMaterial的金属度、粗糙度等属性,还新增了清漆.clearcoat、透光率.transmission、反射率.reflectivity、光泽.sheen、折射率.ior等等各种用于模拟生活中不同材质的属性。
清漆层属性.clearcoat
清漆层属性.clearcoat
可以用来模拟物体表面一层透明图层,就好比你在物体表面刷了一层透明清漆,喷了点水。.clearcoat的范围0到1,默认0。
const material = new THREE.MeshPhysicalMaterial( {
clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
} );
清漆层粗糙度.clearcoatRoughness
清漆层粗糙度.clearcoatRoughness
属性表示物体表面透明涂层.clearcoat
对应的的粗糙度,.clearcoatRoughness
的范围是为0.0至1.0。默认值为0.0。
const material = new THREE.MeshPhysicalMaterial( {
clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
clearcoatRoughness: 0.1,//透明涂层表面的粗糙度
} );
物理材质透光率transmission
透光率(透射度).transmission
为了更好的模拟玻璃、半透明塑料一类的视觉效果,可以使用物理透明度.transmission
属性代替Mesh普通透明度属性.opacity
。
使用.transmission
属性设置Mesh透明度,即便完全透射的情况下仍可保持高反射率。
物理光学透明度.transmission
的值范围是从0.0到1.0。默认值为0.0。
const mesh = gltf.scene.getObjectByName('玻璃01')
mesh.material = new THREE.MeshPhysicalMaterial({
transmission: 1.0, //玻璃材质透光率,transmission替代opacity
})
折射率.ior
非金属材料的折射率从1.0到2.333。默认值为1.5。
new THREE.MeshPhysicalMaterial({
ior:1.5,//折射率
})
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: 从 5s 到 0.5s!CompletableFuture 异步任务优化技巧,确实优雅!
一个接口可能需要调用 N 个其他服务的接口,这在项目开发中还是挺常见的。举个例子:用户请求获取订单信息,可能需要调用用户信息、商品详情、物流信息、商品推荐等接口,最后再汇总数据统一返回。 如果是串行(按顺序依次执行每个任务)执行的话,接口的响应速度会非常慢。考…