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,//折射率
})
相关推荐
Mintopia4 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
百锦再1 天前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
Mintopia1 天前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
一笑code1 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16881 天前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员2 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_2 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
良辰未晚2 天前
基于全屏 Quad 的 Three.js 后处理全解析
three.js
Mintopia2 天前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
sunbyte2 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue