Three.js-硬要自学系列14 (PBR材质、环境贴图、清漆层、物理材质透光率)

本章主要学习知识点

了解PBR材质概念
学会使用PBR材质
学会加载环境贴图，并将贴图材质应用到物体上
掌握创建物理材质，并学会如何添加清漆层
学会对物理材质设置透光率

PBR材质

PBR 材质（基于物理的渲染材质）是一种模拟真实世界光照和材质表现的技术，通过物理属性（如金属度、粗糙度）和纹理贴图让 3D 模型看起来更逼真。

PBR材质基础原理

金属度（Metalness）

定义材质像金属的程度：

0 表示非金属（如木头、塑料），表面以漫反射为主

1 表示纯金属（如黄金、钢铁），表面以镜面反射为主

粗糙度（Roughness）

控制表面光滑程度:

0 像镜子般光滑，反射清晰

1 像粗糙石头，反射模糊

js 复制代码

const material = new THREE.MeshStandardMaterial({ 
    metalness: 0.8, // 高金属度（金属感强）
    roughness: 0.2 // 低粗糙度（表面光滑） 
});

上手操作下

设置材质

js 复制代码

 const material = new THREE.MeshStandardMaterial({
  color: 'deepskyblue',
  metalness: 1,  //金属度
  roughness: 0.5,  //粗糙度
})

在场景中添加一个点光源，注意单独添加环境光需要配合环境贴图，否则物体将漆黑一片

js 复制代码

const light = new THREE.PointLight(0xffffff,1,0,0)
// 光源位置
light.position.set(130,30,30)
scene.add(light)

转动模型，你将看到如下效果

环境贴图

环境贴图（Environment Map）是一种模拟物体周围环境反射或折射效果的技术，能让 3D 模型表面像镜子一样反射周围环境，或像玻璃一样透出背景，从而增强场景的真实感。

环境贴图的类型

立方体贴图（CubeMap）

由 6 张图片组成，分别对应立方体的前、后、左、右、上、下六个面。适合表现室内或对称环境，UI人员给到的图如下

HDR贴图（高动态范围贴图）

单张全景图，包含更广的亮度范围，适合模拟室外自然光照（如天空、阳光），UI人员给到的图如下

加载环境贴图

js 复制代码

const cubeTexture = new THREE.CubeTextureLoader()
.setPath('texture/environmentMaps/2/')
.load(['px.jpg','nx.jpg','py.jpg','ny.jpg','pz.jpg','nz.jpg'],(texture)=> {
  scene.background = texture
}, (progress)=> {
  console.log(progress);
}, (err)=> {
  console.log(err);
});

const geometry = new THREE.BoxGeometry(3,3,3);
const material = new THREE.MeshStandardMaterial({
  metalness: 1,  //金属度
  roughness: 0,  //粗糙度
  envMapIntensity: 1, //环境贴图强度
  envMap: cubeTexture  //环境贴图
})

这里设置metalness金属度为1，roughness粗糙度为0，使物体表面光亮平滑

清漆层

清漆层（Clearcoat） 是一种用于模拟物体表面透明涂层的技术，常用于表现车漆、指甲油、塑料保护膜等具有多层材质感的物体。

关于清漆层的一些核心参数

通过 MeshPhysicalMaterial 材质（MeshStandardMaterial 的升级版）控制

.clearcoat（清漆层厚度）
- 范围：0（无涂层）到 1（最厚涂层）。
- 例如：车漆设为 1.0，木桌漆面设为 0.5
.clearcoatRoughness（清漆层粗糙度）
- 范围：0（光滑如镜）到 1（磨砂质感）。
- 例如：新车漆设为 0.1，旧车漆设为 0.3
其他辅助参数（可选）
- .clearcoatNormalMap：模拟涂层表面的凹凸细节（如细微划痕）
- .clearcoatNormalScale：控制凹凸强度。

应用场景

汽车模型
- 底层材质 ：金属色（通过 metalness 和 roughness 控制）；
- 清漆层 ：高厚度（clearcoat: 1.0）和低粗糙度（clearcoatRoughness: 0.1），模拟新车漆效果
塑料电子产品
- 底层材质 ：非金属（metalness: 0）的塑料颜色；
- 清漆层 ：中等厚度（clearcoat: 0.6）增加表面光泽

上手实践下

js 复制代码

const material = new THREE.MeshPhysicalMaterial({
  color: 'deepskyblue',
  clearcoat: 1,  // 清漆层
  clearcoatRoughness: 0.3,   // 清漆层粗糙度
})

效果图

物理材质透光率

物理材质透光率（Transmission） 是一种模拟光线穿透物体表面的技术，常用于表现玻璃、透明塑料、水等材质的视觉效果。

核心参数

.transmission（透光率）
- 范围：0（不透明）到 1（完全透光）。
- 示例：玻璃设为 1，磨砂玻璃设为 0.8
.ior（折射率）
- 定义光线穿过材质时的弯曲程度（如水的折射率 1.33，玻璃 1.5）。
- 调整折射率可实现不同介质的视觉效果

上手实践下

js 复制代码

 const cubeTexture = new THREE.CubeTextureLoader()
.setPath('texture/environmentMaps/2/')
.load(['px.jpg','nx.jpg','py.jpg','ny.jpg','pz.jpg','nz.jpg'],(texture)=> {
  // scene.background = texture
}, (xhr)=> {
  console.log(xhr);
}, (err)=> {
  console.log(err);
});

const geometry = new THREE.SphereGeometry(3,64,64);
const material = new THREE.MeshPhysicalMaterial({
  color: 'deepskyblue', 
  transmission: 1,  // 透明度
  ior: 2,   // 折射率
  metalness: 0,   // 金属度
  roughness: 0,   // 粗糙度
  envMap: cubeTexture,   // 环境贴图
  envMapIntensity: 1     // 环境贴图强度
})

简单配置下参数，一个漂亮的玻璃球就实现了

以上案例均可在案例中心查看体验

THREE 案例中心