65. PBR 材质：逼真的毛绒、虹彩效果

前面学了 PBR 材质 MeshPhysicalMaterial 的透光度 transmission、清漆 clearcoat 属性，可以用来实现玻璃、喷了一层漆的车身的效果。

这节继续来学习另外两种效果：

光泽层 sheen、虹彩层 iridescence

这俩什么意思呢？

我们知道，清漆 clearcoat 是在物体表面喷了一层漆，也就是有了清漆层的效果。

那光泽层 sheen 就是毛绒织物上面的一层毛绒反射的光，多一层毛绒的效果。

虹彩层 iridescence 则是在物体上多了一层油膜，反射七彩光的效果。

就不创建新项目了，继续在 pbr-material 那个项目里写：

用 TorusGeometry 创建个圆环，我们来搞一个抱枕：

创建 mesh4.js

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

const geometry = new THREE.TorusGeometry(300, 100);
const material = new THREE.MeshPhysicalMaterial({
    color: 'blue'
});

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

export default mesh;

引入看一下：

npm run dev

现在并没有毛绒的感觉。

设置下光泽层强度、光泽层粗糙度、光泽层颜色：

const material = new THREE.MeshPhysicalMaterial({
    color: 'blue',
    sheen: 1,
    sheenRoughness: 1,
    sheenColor: 'white'
});

看下效果：

是不是就明显有一层毛绒的感觉了？

这层光泽层也可以设置纹理。

比如把之前的砖墙的图片拿过来：

放到 public 目录下：

加一下光泽层颜色贴图看下效果：

const loader = new THREE.TextureLoader();
const texture = loader.load('./zhuan.jpg');
texture.colorSpace = THREE.SRGBColorSpace;

const geometry = new THREE.TorusGeometry(300, 100);
const material = new THREE.MeshPhysicalMaterial({
    color: 'blue',
    sheen: 1,
    sheenRoughness: 1,
    sheenColor: 'white',
    sheenColorMap: texture
});

这样毛绒的光泽层就有纹理了。

然后再来试一下虹彩层 iridescence：

创建 mesh5.js

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

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

const geometry = new THREE.SphereGeometry(300);
const material = new THREE.MeshPhysicalMaterial({
    color: '#ffffff',
    metalness: 0,
    roughness: 0,
    transmission: 1,
    envMap: textureCube
});

const gui = new GUI();
gui.addColor(material, 'color');


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

export default mesh;

首先创建一个球体，设置金属度为 0、粗糙度为 0，然后透光度为 1

环境贴图换了一套城市的：

之前的森林的太杂乱了。

你可以从这里下载。

放到 public 目录下：

然后 main.js 设置下 scene 的背景：

看下效果：

现在就是一个透明的气泡的效果。

然后我们给它加上虹彩：

const material = new THREE.MeshPhysicalMaterial({
    color: '#ffffff',
    metalness: 0,
    roughness: 0,
    transmission: 1,
    envMap: textureCube,
    iridescence: 1,
    iridescenceIOR: 1.8,
    reflectivity: 1,
});

const gui = new GUI();
gui.addColor(material, 'color');
gui.add(material, 'iridescence', 0, 1);
gui.add(material, 'iridescenceIOR', 1, 2.33);
gui.add(material, 'reflectivity', 0, 1);