Three.js PBR材质

本文将详细介绍Three.js中的PBR(Physically Based Rendering)材质,包括PBR的基本概念、适用场景、PBR材质的构建以及一些高级应用技巧。

1. PBR(Physically Based Rendering)基本概念

PBR,即Physically Based Rendering,是一种基于物理原理的渲染技术,旨在模拟真实世界中的光照和材质表现。Three.js中的PBR材质主要包括THREE.MeshStandardMaterial和THREE.MeshPhysicalMaterial,基于物理的光照模型(微平面理论、能量守恒、菲涅尔反射...),它们能够更准确地模拟光照和材质之间的相互作用,为场景提供更加真实感的渲染效果。

2. 适用场景

PBR材质适用于对真实感渲染效果有较高要求的场景,例如:

  • 游戏场景:游戏中的角色、道具等元素可以通过PBR材质实现更真实的光照和材质效果。
  • 产品展示:三维产品展示中,PBR材质可以更真实地展示产品的外观、纹理和细节。
  • 虚拟现实:VR场景中,PBR材质有助于提高用户的沉浸感和真实感。

3. PBR材质的构建

在Three.js中,PBR材质的构建涉及以下几个方面:

3.1 基本属性.color.metalness.roughness

PBR材质的基本属性包括颜色、金属度、粗糙度等。例如:

复制代码
const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  metalness: 0.5,
  roughness: 0.5
});

金属度 属性.metalness表示材质像金属的程度, 非金属材料,如木材或石材,使用0.0,金属使用1.0。

粗糙度 属性.roughness表示模型表面的光滑或者说粗糙程度,越光滑镜面反射能力越强,越粗糙,表面镜面反射能力越弱,更多地表现为漫反射,0.0表示平滑的镜面反射,1.0表示完全漫反射。

3.2 纹理贴图

PBR材质支持多种纹理贴图,如漫反射贴图、金属度贴图、粗糙度贴图、法线贴图等。例如:

复制代码
const loader = new THREE.TextureLoader();
const diffuseTexture = loader.load('path/to/diffuse.png');
const metalnessTexture = loader.load('path/to/metalness.png');
const roughnessTexture = loader.load('path/to/roughness.png');
const normalTexture = loader.load('path/to/normal.png');
​
const material = new THREE.MeshStandardMaterial({
  map: diffuseTexture,
  metalnessMap: metalnessTexture,
  roughnessMap: roughnessTexture,
  normalMap: normalTexture
});

3.3 环境光遮蔽

为了更好地模拟环境光的影响,PBR材质还支持环境光遮蔽贴图。例如:

复制代码
const aoTexture = loader.load('path/to/ao.png');
​
const material = new THREE.MeshStandardMaterial({
  aoMap: aoTexture
});

4. 高级应用技巧

4.1 清漆度.clearcoat

清漆度是一种模拟表面光洁度的属性,用于实现汽车漆、瓷器等具有光滑表面的材质。在Three.js中,可以使用THREE.MeshPhysicalMaterial设置清漆度属性。例如:

复制代码
const material = new THREE.MeshPhysicalMaterial({
  clearcoat: 1.0,
  clearcoatRoughness: 0.1
});

典型案例(汽车外壳PBR材质设置):

复制代码
const mesh = gltf.scene.getObjectByName('汽车外壳');
mesh.material = new THREE.MeshPhysicalMaterial({
        color: mesh.material.color, //默认颜色
        metalness: 0.9,//车外壳金属度
        roughness: 0.5,//车外壳粗糙度
        envMap: textureCube, //环境贴图
        envMapIntensity: 2.5, //环境贴图对Mesh表面影响程度
})  

4.2 各向异性.Anisotropy

各向异性是一种模拟材质在不同方向上光照反射特性不同的属性,用于实现金属刷痕、木纹等具有方向性纹理的材质。在Three.js中,可以使用THREE.MeshPhysicalMaterial设置各向异性属性。例如:

复制代码
const anisotropyTexture = loader.load('path/to/anisotropy.png');
​
const material = new THREE.MeshPhysicalMaterial({
  anisotropy: 0.8,
  anisotropyMap: anisotropyTexture
});

4.3 透明度.Transparency

透明度是一种模拟材质透明程度的属性,在Three.js中,可以使用THREE.MeshPhysicalMaterial设置透明度属性。例如:

复制代码
const material = new THREE.MeshPhysicalMaterial({
  transparent: true,
  opacity: 0.5
});

4.4 透光率(透射度).transmission

为了更好的模拟玻璃、半透明塑料一类的视觉效果,可以使用物理透明度.transmission属性代替Mesh普通透明度属性.opacity。使用.transmission属性设置Mesh透明度,即便完全透射的情况下仍可保持高反射率。例如:

复制代码
const mesh = gltf.scene.getObjectByName('玻璃01')
mesh.material = new THREE.MeshPhysicalMaterial({
    transmission: 1.0, //玻璃材质透光率,transmission替代opacity 
})

4.5 折射率.ior

非金属材料的折射率从1.0到2.333。默认值为1.5。例如:

复制代码
new THREE.MeshPhysicalMaterial({
    ior:1.5,//折射率
})

典型案例(玻璃材质设置):

复制代码
const mesh = gltf.scene.getObjectByName('玻璃01')
mesh.material = new THREE.MeshPhysicalMaterial({
    metalness: 0.0,//玻璃非金属 
    roughness: 0.0,//玻璃表面光滑
    envMap:textureCube,//环境贴图
    envMapIntensity: 1.0, //环境贴图对Mesh表面影响程度
    transmission: 1.0, //玻璃材质透光率,transmission替代opacity 
    ior:1.5,//折射率
})
相关推荐
吃饭最爱2 天前
⽹络请求Axios的概念和作用
vue
魂尾ac2 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
你真的可爱呀2 天前
5.Three.js 学习(基础+实践)
学习·three.js
是罐装可乐2 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞2 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52143 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
小胖墩有点瘦4 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台
小圣贤君4 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
战场小包4 天前
弟弟想看恐龙,用文心快码3.5S快速打造恐龙乐园,让弟弟看个够
前端·three.js·文心快码
知识分享小能手4 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue