62. PBR 材质：逼真的喷漆、玻璃效果

上节学了用 PBR 材质实现金属、塑料、磨砂效果，这节我们继续来学习喷漆、玻璃效果。

比如这种车身：

就是喷了一层漆的效果，可以用 PBR 材质实现。

上面的车窗玻璃，也可以用 PBR 材质，它支持透光。

但这次不是用 MeshStandardMaterial 标准网格材质，而是 MeshPhysicalMaterial 物理网格材质：

它扩展自 MeshStandardMaterial，也是 PBR 材质，但是能实现更多效果。

比如清漆，就是喷了一层车漆的效果，还有虹彩，比如肥皂泡的效果，还有玻璃等透光材质的效果

我们在上节的代码里继续写：

创建 mesh2.js

import * as THREE from 'three';
import GUI from 'three/examples/jsm/libs/lil-gui.module.min.js';

const textureCube = new THREE.CubeTextureLoader()
    .setPath('./forest/')
    .load(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']);

const geometry = new THREE.DodecahedronGeometry(300);
const material = new THREE.MeshPhysicalMaterial({
    color: 'blue',
    metalness: 0,
    roughness: 0,
    envMap:textureCube,
    transmission: 0.9,
    ior: 1.8,
});

const gui = new GUI();
gui.addColor(material, 'color');
gui.add(material, 'transmission', 0, 1);
gui.add(material, 'ior', 0, 2.33);

const mesh = new THREE.Mesh(geometry, material);

export default mesh;

这里用十二面几何体 DodecahedronGeometry

我们先试下玻璃材质。

玻璃的话金属度 metalness 肯定是 0，光滑的玻璃粗糙度 roughness 也是 0

透光率 transmission 设置 0.9，差不多完全透光，ior 折射率范围是 0 到 2.33

我们先引入看下效果：

可以看到，现在就有一种玻璃的感觉。

调节下透光度 transmission：

透光度 1：

透光度 0.15

折射率 ior 1.1

折射率 ior 2.33

都是不同的材质的效果。

粗糙度设置 0.5

这样就是磨砂玻璃的效果了。

然后再来试一下清漆效果：

创建 mesh3.js

import * as THREE from 'three';
import GUI from 'three/examples/jsm/libs/lil-gui.module.min.js';

const textureCube = new THREE.CubeTextureLoader()
    .setPath('./forest/')
    .load(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']);

const geometry = new THREE.BoxGeometry(300, 300, 300);
const material = new THREE.MeshPhysicalMaterial({
    color: 'black',
    metalness: 0.8,
    roughness: 0.4,
    clearcoat: 1,
    clearcoatRoughness: 0.05,
    envMap: textureCube
});

const gui = new GUI();
gui.addColor(material, 'color');
gui.add(material, 'metalness', 0, 1);
gui.add(material, 'roughness', 0, 1);
gui.add(material, 'clearcoat', 0, 1);
gui.add(material, 'clearcoatRoughness', 0, 1);


const mesh = new THREE.Mesh(geometry, material);

export default mesh;