threejsPBR材质与纹理贴图
1. PBR材质简介
本节课没有具体的代码，就是给大家科普一下PBR材质，所谓PBR就是，基于物理的渲染(physically-based rendering)。
Three.js提供了两个PBR材质相关的APIMeshStandardMaterial和MeshPhysicalMaterial,MeshPhysicalMaterial是MeshStandardMaterial扩展的子类，提供了更多功能属性。
光照模型
如果你有初高中最基本的物理光学知识，应该有折射、镜面反射、漫反射等基本光学概念，对于实际生活中的光学问题，Three.js会提供一些的光照模型来模拟物体表面的光照，光照模型就一种模拟光照的计算方法。MeshPhysicalMaterial和MeshLambertMaterial一样都是渲染网格模型的材质，但是他们用的光照模型不同，具体点说就是材质模拟Mesh反射光照的代码算法不同，算法不同，自然模拟光照的真实程度也不同。
如果你想深入研究光照模型，可以学习下原生WebGL或WebGPU，或者看看计算机图形学相关书籍，使用threejs的大部分情况，用不着你自己实现光照模型算法，毕竟threejs通过网格模型材质帮你实现了。
PBR相关理论介绍文章
- 半小时了解PBR：https://zhuanlan.zhihu.com/p/37639418
- PBR知识体系整理：https://zhuanlan.zhihu.com/p/100596453
- PBR核心知识体系总结与概览：https://zhuanlan.zhihu.com/p/53086060
网格模型材质整体回顾
-
MeshLambertMaterial: Lambert光照模型(漫反射)
-
MeshPhongMaterial：Phong光照模型(漫反射、高光反射)
-
MeshStandardMaterial和MeshPhysicalMaterial：基于物理的光照模型(微平面理论、能量守恒、菲涅尔反射...)
PBR材质相比MeshLambertMaterial和MeshPhongMaterial可以提供更逼真的、更接近生活中的材质效果，当然也会占用更多的电脑硬件资源。
通过MeshPhysicalMaterial文档，提供的资源，可以查看多个PBR材质的案例效果，系统课程中轿车展示案例也会用到PBR材质。
渲染占用资源和表现能力
整体上来看，就是渲染表现能力越强，占用的计算机硬件资源更多。
占用渲染资源 MeshBasicMaterial < MeshLambertMaterial < MeshPhongMaterial < MeshStandardMaterial < MeshPhysicalMaterial
渲染表现能力 MeshBasicMaterial < MeshLambertMaterial < MeshPhongMaterial < MeshStandardMaterial < MeshPhysicalMaterial
2. PBR材质金属度和粗糙度
本节课给大家介绍PBR材质MeshStandardMaterial金属度metalness和粗糙度roughness,再加上下节课讲解的环境贴图.envMap,给大家呈现一个金属渲染效果。
金属度metalness
金属度属性.metalness表示材质像金属的程度, 非金属材料,如木材或石材,使用0.0,金属使用1.0。
threejs的PBR材质，.metalness默认是0.5,0.0到1.0之间的值可用于生锈的金属外观
new THREE.MeshStandardMaterial({
metalness: 1.0,//金属度属性
})
mesh.material.metalness = 1.0;//金属度
粗糙度roughness
生活中不同物体表面的粗糙程度不同，比如地面比较粗糙，比如镜子表面就非常非常光滑。
粗糙度roughness表示模型表面的光滑或者说粗糙程度，越光滑镜面反射能力越强，越粗糙，表面镜面反射能力越弱，更多地表现为漫反射。
粗糙度roughness,0.0表示平滑的镜面反射,1.0表示完全漫反射,默认0.5。
new THREE.MeshStandardMaterial({
roughness: 0.5,//表面粗糙度
})
mesh.material.roughness = 0.5;//表面粗糙度
相关代码
// 引入three.js
import * as THREE from "three";
// 引入gltf加载器
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
// 实例化一个加载器对象
const loader = new GLTFLoader();
const model = new THREE.Group(); //声明一个组对象，用来添加加载成功的三维场景
// 加载glb格式的gltf模型
loader.load("../../ClearcoatTest.glb", function (gltf) {
// console.log('gltf', gltf);
// model.add(gltf.scene)
gltf.scene.traverse(function (obj) {
// 只获取所有mesh节点
if (obj.isMesh) { // 判断是否是网格模型
// 查看threejs渲染gltf默认材质
console.log("obj", obj.material);
obj.material.metalmess = 1.0; //设置金属度
obj.material.roughness = 0.9; //设置粗糙度
}
});
model.add(gltf.scene);
});
export default model;
3. 环境贴图.envMap(金属效果)
环境贴图对PBR材质渲染效果影响还是比较大，一般渲染PBR材质的模型，最好设置一个合适的环境贴图。
立方体纹理加载器CubeTextureLoader
TextureLoader返回TextureCubeTextureLoader返回CubeTexture
通过前面学习大家知道，通过纹理贴图加载器TextureLoader的.load()方法加载一张图片可以返回一个纹理对象Texture。
立方体纹理加载器CubeTextureLoader的.load()方法是加载6张图片，返回一个立方体纹理对象CubeTexture。
立方体纹理对象CubeTexture的父类是纹理对象Texture。
CubeTextureLoader加载环境贴图
所谓环境贴图，就是一个模型周围的环境的图像，比如一间房子，房子的上下左右前后分别拍摄一张照片，就是3D空间中6个角度方向的照片。
// 加载环境贴图
// 加载周围环境6个方向贴图
// 上下左右前后6张贴图构成一个立方体空间
// 'px.jpg', 'nx.jpg'：x轴正方向、负方向贴图 p:正positive n:负negative
// 'py.jpg', 'ny.jpg'：y轴贴图
// 'pz.jpg', 'nz.jpg'：z轴贴图
const textureCube = new THREE.CubeTextureLoader()
.setPath('./环境贴图/环境贴图0/')
.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
// CubeTexture表示立方体纹理对象，父类是纹理对象Texture
MeshStandardMaterial环境贴图属性.envMap
实际生活中，一个物体表面，往往会反射周围的环境。人的眼睛看到的东西，往往反射有周围景物，所以three.js渲染模型，如果想渲染效果更好看，如果想更符合实际生活情况，也需要想办法让模型反射周围景物。
MeshStandardMaterial材质的环境贴图属性是.envMap，通过PBR材质的贴图属性可以实现模型表面反射周围景物，这样渲染效果更好。
// 加载环境贴图
const textureCube = new THREE.CubeTextureLoader()
.setPath('./环境贴图/环境贴图0/')
.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
new THREE.MeshStandardMaterial({
metalness: 1.0,
roughness: 0.5,
envMap: textureCube, //设置pbr材质环境贴图
})
obj.material.envMap = textureCube; //设置环境贴图
环境贴图反射率.envMapIntensity
MeshStandardMaterial的.envMapIntensity属性主要用来设置模型表面反射周围环境贴图的能力，或者说环境贴图对模型表面的影响能力。具体说.envMapIntensity相当于环境贴图的系数，环境贴图像素值乘以该系数后，在用于影响模型表面。
// envMapIntensity：控制环境贴图对mesh表面影响程度
//默认值1, 设置为0.0,相当于没有环境贴图
obj.material.envMapIntensity = 1.0;
粗糙度roughness为0
你可以尝试把粗糙度roughness设置为0，看看模型对环境贴图的反射效果。
obj.material.roughness = 0.0;//完全镜面反射，像镜子一样
选择合适的环境贴图
不同的明暗或景物的环境贴图对渲染效果的影响是不一样的，所以不仅要设置环境贴图，还要根据需要选择合适的环境贴图，一般实际开发使用美术提供的环境贴图即可。
你可以尝试测试源码中提供多个环境贴图对比渲染效果差异。
纹理和渲染器颜色空间一致
//如果renderer.outputEncoding=THREE.sRGBEncoding;环境贴图需要保持一致
textureCube.encoding = THREE.sRGBEncoding;
相关代码：可以看见区别
// 引入three.js
import * as THREE from "three";
// 引入gltf加载器
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
// 实例化一个加载器对象
const loader = new GLTFLoader();
const model = new THREE.Group(); //声明一个组对象，用来添加加载成功的三维场景
const textureCude = new THREE.CubeTextureLoader()
.setPath("../../环境贴图/")
.load(["px.jpeg", "py.jpeg", "pz.jpeg", "nx.jpeg", "ny.jpeg", "nz.jpeg"]);
// 加载glb格式的gltf模型
// loader.load("../../ClearcoatTest.glb", function (gltf) {
// // console.log('gltf', gltf);
// // model.add(gltf.scene)
// gltf.scene.traverse(function (obj) {
// // 只获取所有mesh节点
// if (obj.isMesh) {
// // 判断是否是网格模型
// // 查看threejs渲染gltf默认材质
// console.log("obj", obj.material);
// obj.material.metalmess = 1.0; //设置金属度
// obj.material.roughness = 0.9; //设置粗糙度
// obj.material.envMap = textureCude //设置环境贴图属性的值为立方体纹理对象
// }
// });
// model.add(gltf.scene);
// });
loader.load("../../glTF/DamagedHelmet.gltf", function (gltf) {
// gltf加载成功后返回一个对象
// console.log('控制台查看gltf对象结构', gltf)
gltf.scene.traverse(function (obj) {
// 只获取所有mesh节点
if (obj.isMesh) {
// obj.material = new THREE.MeshLambertMaterial({
// color: 0xffffff,
// });
obj.material.metalmess = 1.0; //设置金属度
obj.material.roughness = 0.9; //设置粗糙度 可以调值，范围在0-1之间，值最大，可见度更高，更亮，值越小，更暗
obj.material.envMap = textureCude; //设置环境贴图属性的值为立方体纹理对象
obj.material.envMapIntensity = 0
}
});
// console.log('场景3D模型数据', gltf.scene)
// console.log('gltf', gltf);
model.add(gltf.scene); //三维场景添加到model组对象中
});
export default model;
4. 环境贴图2
环境贴图作用测试
实际生活中光源照射到一个物体上，这个物体反射出去的光线也会影响其他的物体，环境贴图就是用一种简单方式，近似模拟一个物体周边环境对物体表面的影响。
测试：对于PBR材质，如果threejs三维场景不添加任何光源，物体就是完全黑色的，你可以不添加任何光源，尝试只使用环境贴图，你会发现物体表面的颜色也能看到，这说明环境贴图其实相当于提供了物体周围环境发射或反射的光线。
测试：更换不同明暗的环境贴图，你会发现场景中模型的明暗也有变化。
场景环境属性.environment
网格模型可以通过材质的.envMap属性设置环境贴图，如果一个gltf模型中所有的Mesh都要设置环境贴图就需要递归遍历gltf模型，给里面每个Mesh的材质设置.envMap。
loader.load("../工厂.glb", function (gltf) {
// 递归遍历批量设置环境贴图
gltf.scene.traverse(function (obj) {
if (obj.isMesh) { //判断是否是网格模型
obj.material.envMap = textureCube; //设置环境贴图
}
});
})
如果你希望环境贴图影响场景中scene所有Mesh，可以通过Scene的场景环境属性.environment实现,把环境贴图对应纹理对象设置为.environment的属性值即可。
环境贴图色彩空间编码.encoding
//如果renderer.outputEncoding=THREE.sRGBEncoding;环境贴图需要保持一致
textureCube.encoding = THREE.sRGBEncoding;
相关代码：
// 引入three.js
import * as THREE from "three";
// 引入gltf加载器
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
// 实例化一个加载器对象
const loader = new GLTFLoader();
const model = new THREE.Group(); //声明一个组对象，用来添加加载成功的三维场景
const textureCude = new THREE.CubeTextureLoader()
// .setPath("../../环境贴图/环境贴图0/")
.setPath("../../环境贴图/环境贴图1/")
.load(["px.jpg", "py.jpg", "pz.jpg", "nx.jpg", "ny.jpg", "nz.jpg"]);
// 加载glb格式的gltf模型
// "../../ClearcoatTest.glb"
loader.load("../../ClearcoatTest.glb", function (gltf) {
// console.log('gltf', gltf);
// model.add(gltf.scene)
gltf.scene.traverse(function (obj) {
// 只获取所有mesh节点
if (obj.isMesh) {
// 判断是否是网格模型
// 查看threejs渲染gltf默认材质
console.log("obj", obj.material);
obj.material.metalmess = 1.0; //设置金属度
obj.material.roughness = 0.9; //设置粗糙度
obj.material.envMap = textureCude //设置环境贴图属性的值为立方体纹理对象
}
});
model.add(gltf.scene);
});
// loader.load("../../glTF/DamagedHelmet.gltf", function (gltf) {
// // gltf加载成功后返回一个对象
// // console.log('控制台查看gltf对象结构', gltf)
// gltf.scene.traverse(function (obj) {
// // 只获取所有mesh节点
// if (obj.isMesh) {
// // obj.material = new THREE.MeshLambertMaterial({
// // color: 0xffffff,
// // });
// obj.material.metalmess = 1.0; //设置金属度
// obj.material.roughness = 0.9; //设置粗糙度 可以调值，范围在0-1之间，值最大，可见度更高，更亮，值越小，更暗
// obj.material.envMap = textureCude; //设置环境贴图属性的值为立方体纹理对象
// obj.material.envMapIntensity = 0
// }
// });
// // console.log('场景3D模型数据', gltf.scene)
// // console.log('gltf', gltf);
// model.add(gltf.scene); //三维场景添加到model组对象中
// });
export default model;
5. MeshPhysicalMaterial清漆层
MeshPhysicalMaterial和MeshStandardMaterial都是拥有金属度metalness、粗糙度roughness属性的PBR材质，MeshPhysicalMaterial是在MeshStandardMaterial基础上扩展出来的子类，除了继承了MeshStandardMaterial的金属度、粗糙度等属性，还新增了清漆.clearcoat、透光率.transmission、反射率.reflectivity、光泽.sheen、折射率.ior等等各种用于模拟生活中不同材质的属性。
清漆层属性.clearcoat
清漆层属性.clearcoat可以用来模拟物体表面一层透明图层，就好比你在物体表面刷了一层透明清漆，喷了点水。.clearcoat的范围0到1，默认0。
const material = new THREE.MeshPhysicalMaterial( {
clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
} );
清漆层粗糙度.clearcoatRoughness
清漆层粗糙度.clearcoatRoughness属性表示物体表面透明涂层.clearcoat对应的的粗糙度，.clearcoatRoughness的范围是为0.0至1.0。默认值为0.0。
const material = new THREE.MeshPhysicalMaterial( {
clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
clearcoatRoughness: 0.1,//透明涂层表面的粗糙度
} );
车外壳PBR材质设置
在设置车外壳清漆层之前，先创建一个MeshPhysicalMaterial材质，并设置好环境贴图、金属度、粗糙度，属性值先根据文档说明给一个大概的值，具体可以通过gui交互界面可视化调试。
const mesh = gltf.scene.getObjectByName('外壳01');
mesh.material = new THREE.MeshPhysicalMaterial({
color: mesh.material.color, //默认颜色
metalness: 0.9,//车外壳金属度
roughness: 0.5,//车外壳粗糙度
envMap: textureCube, //环境贴图
envMapIntensity: 2.5, //环境贴图对Mesh表面影响程度
})
车外壳油漆效果
车外壳油漆效果，你可以通过PBR材质的清漆层属性.clearcoat和清漆层粗糙度.clearcoatRoughness属性模拟。
属性值先根据文档说明给一个大概的值，具体可以通过gui交互界面可视化调试。
const mesh = gltf.scene.getObjectByName('外壳01');
mesh.material = new THREE.MeshPhysicalMaterial( {
clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
clearcoatRoughness: 0.1,//透明涂层表面的粗糙度
} );
GUI可视化调试PBR材质属性
关于gui的使用，在第一章节入门中详细将结果，具体使用可以参照前面讲解。
// 范围可以参考文档
matFolder.add(mesh.material,'metalness',0,1);
matFolder.add(mesh.material,'roughness',0,1);
matFolder.add(mesh.material,'clearcoat',0,1);
matFolder.add(mesh.material,'clearcoatRoughness',0,1);
matFolder.add(mesh.material,'envMapIntensity',0,10);
效果：
.clearcoat : Float
表示clear coat层的强度，范围从0.0到1.0m，当需要在表面加一层薄薄的半透明材质的时候，可以使用与clear coat相关的属性，默认为0.0;
效果：与其他材质效果不一样了
代码：
index.js
// 引入threejs
import * as THREE from "three";
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import model from "./model.js";
import gui from "./gui.js";
// 创建一个三维场景scene
const scene = new THREE.Scene();
scene.add(model);
// 创建一个三维坐标轴
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper); //将坐标轴对象添加到三维场景中
// 创建一个辅助网格地面的效果
// const girdHelper = new THREE.GridHelper(600, 50, 0x00ffff,0x004444);
// scene.add(girdHelper);
// 创建一个光源对象 点光源
const pointLight = new THREE.PointLight(0xffffff, 1.0);
pointLight.decay = 0.0; //不随着距离的改变而衰减
pointLight.position.set(400, 200, 300); //偏移光源位置，观察渲染效果变化
// scene.add(pointLight); //点光源添加到场景中
//可视化点光源
// const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
// scene.add(pointLightHelper);
// 添加一个环境光
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient); //没有方向，也就没有立体的
// 删除
// scene.remove(ambient, model);
// scene.remove(ambient)
// scene.remove(model)
// 添加一个平行光
const directionalLight = new THREE.DirectionalLight(0xfffff, 0.8);
directionalLight.position.set(100, 100, 100); //棱角很弱，跟每个面的夹角都一样
directionalLight.position.set(100, 60, 50); //可以看出每个面的棱角不一样
// directionalLight.target = mesh; //默认坐标原点
scene.add(directionalLight);
// 环境光子菜单
const ambinentFolder = gui.addFolder('环境光')
ambinentFolder.close() //关闭菜单
// 环境光强度
ambinentFolder.add(ambient, 'intensity', 0,2)
// 平行光子菜单
const dirFolder = gui.addFolder('平行光')
dirFolder.close() //关闭菜单
// 平行光强度
dirFolder.add(directionalLight, 'intensity', 0,2)
const dirFolder2 = dirFolder.addFolder('位置') //子菜单的子菜单
dirFolder2.close() //关闭菜单
// 平行光位置
dirFolder2.add(directionalLight.position, 'x', -400,400)
dirFolder2.add(directionalLight.position, 'y', -400,400)
dirFolder2.add(directionalLight.position, 'z', -400,400)
// 定义相机输出画布的尺寸（单位：像素px)
const width = window.innerWidth;
const height = window.innerHeight;
// 设置相机的四个参数
// 创建一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(10, width / height, 0.001, 1000);
// 设置相机的位置
// camera.position.set(20, 20, 20); //相机在Three.js三维坐标系中的位置
camera.position.set(50, 50, 50); //相机在Three.js三维坐标系中的位置
// camera.position.set(20, 8, 9); //根据相机可视化调试camera.position
// 相机的视线，观察目标点的坐标
camera.lookAt(0, 0, 0); //坐标原点
// camera.lookAt(0.5, -0.15, 0.3);
// 创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer({
antialias: true, //启用抗锯齿,线条更加流畅,减少锯齿状
});
renderer.setSize(width, height); //canvas画布的宽高度
renderer.render(scene, camera); //执行一个渲染操作，类比相机的拍照动作 咔
//把渲染结果canvas画布，也就是所谓的“照片”，添加到网页的页面上
document.body.appendChild(renderer.domElement);
// 插入到任意的html元素中
// document.getElementById("webgl").appendChild(renderer.domElement)
// 设置编码方式和gltf贴图保持一致，解决渲染颜色偏差的问题
renderer.outputEncoding = THREE.sRGBEncoding;
console.log("查看当前屏幕设备像素比", window.devicePixelRatio); //查看当前屏幕设备像素比 2
// 告诉threejs你的屏幕的设备像素比window.devicePixelRatio，针对与像素接近于1的设置下面的语句可能不是很明显，对于屏幕比例是2的，高清屏这种，设置的效果会很明显，减少模糊
renderer.setPixelRatio(window.devicePixelRatio); //会很清晰，遇到模糊了不要忘记设置这个
// renderer.setClearColor(0x444444);
// 创建一个相机控件对象
const controls = new OrbitControls(camera, renderer.domElement);
// 渲染循环
function render() {
// console.log("camera.position", camera.position);
// console.log("controls.target", controls.target);
// model.rotateY(0.01); //周期性旋转，每次旋转0.01弧度
renderer.render(scene, camera); //周期性执行相机渲染功能，更新canvas画布上的内容
requestAnimationFrame(render);
}
render();
controls.target.set(0, 0, 0); //默认为0,0,0，所以更改值之后要注意更新，并且与lookAt的参数一致
// controls.target.set(0.5, -0.15, 0.3); //默认为0,0,0，所以更改值之后要注意更新，并且与lookAt的参数一致
controls.update();
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener("change", function () {
// console.log(camera.position);
// 每当发生改变的时候就重新渲染
renderer.render(scene, camera); //执行渲染操作
});
window.onresize = function () {
// 更新canvas画布的尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 相机的视椎体宽高比一定和画布保持一致，否则物体就会扭曲
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
};
model.js
// 引入three.js
import * as THREE from "three";
// 引入gltf加载器
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import gui from "./gui.js";
// 创建材质子菜单
const matFolder = gui.addFolder("车外壳材质");
matFolder.close(); //关闭菜单
// 实例化一个加载器对象
const loader = new GLTFLoader();
const model = new THREE.Group(); //声明一个组对象，用来添加加载成功的三维场景
const textureCube = new THREE.CubeTextureLoader()
// .setPath("../../环境贴图/环境贴图0/")
.setPath("../../环境贴图/环境贴图1/")
.load(["px.jpg", "py.jpg", "pz.jpg", "nx.jpg", "ny.jpg", "nz.jpg"]);
//如果renderer.outputEncoding=THREE.sRGBEncoding;环境贴图需要保持一致
textureCube.encoding = THREE.sRGBEncoding;
// 加载glb格式的gltf模型
// "../../ClearcoatTest.glb"
loader.load("../../ClearcoatTest.glb", function (gltf) {
// console.log('gltf', gltf);
// model.add(gltf.scene)
gltf.scene.traverse(function (obj) {
// 只获取所有mesh节点
if (obj.isMesh) {
// 判断是否是网格模型
// 查看threejs渲染gltf默认材质
console.log("obj", obj.name);
obj.material.metalmess = 1.0; //设置金属度
obj.material.roughness = 0.9; //设置粗糙度
obj.material.envMap = textureCube; //设置环境贴图属性的值为立方体纹理对象
}
});
model.add(gltf.scene);
const mesh = gltf.scene.getObjectByName("R2_ClearCoatSample");
mesh.material = new THREE.MeshPhysicalMaterial({
color: mesh.material.color,
metalness: 0.9,
roughness: 0.5,
envMap: textureCube,
envMapIntensity: 2.0,
clearcoat: 1.0,
clearcoatRoughness: 0.1,
});
// const obj = {
// color: mesh.material.color, //材质颜色
// };
// // 材质颜色color
// matFolder.addColor(obj, "color").onChange(function (value) {
// mesh.material.color.set(value);
// });
// 范围可参考文档
matFolder.add(mesh.material, "metalness", 0, 1);
matFolder.add(mesh.material, "roughness", 0, 1);
matFolder.add(mesh.material, "clearcoat", 0, 1);
matFolder.add(mesh.material, "clearcoatRoughness", 0, 1);
matFolder.add(mesh.material, "envMapIntensity", 0, 10);
});
export default model;
6. 物理材质透光率.transmission
如果你已经掌握上节课内容，可以继续学习物理材质MeshPhysicalMaterial的透光率属性.transmission和折射率属性.ior。
透光率(透射度).transmission
为了更好的模拟玻璃、半透明塑料一类的视觉效果，可以使用物理透明度.transmission属性代替Mesh普通透明度属性.opacity。
使用.transmission属性设置Mesh透明度,即便完全透射的情况下仍可保持高反射率。
物理光学透明度.transmission的值范围是从0.0到1.0。默认值为0.0。
const mesh = gltf.scene.getObjectByName('玻璃01')
mesh.material = new THREE.MeshPhysicalMaterial({
transmission: 1.0, //玻璃材质透光率，transmission替代opacity
})
折射率.ior
非金属材料的折射率从1.0到2.333。默认值为1.5。
不同材质的折射率，你可以百度搜索。
new THREE.MeshPhysicalMaterial({
ior:1.5,//折射率
})
玻璃透光率.transmission设置
先设置玻璃金属度和粗糙度
const mesh = gltf.scene.getObjectByName('玻璃01')
mesh.material = new THREE.MeshPhysicalMaterial({
metalness: 0.0,//玻璃非金属
roughness: 0.0,//玻璃表面光滑
envMap:textureCube,//环境贴图
envMapIntensity: 1.0, //环境贴图对Mesh表面影响程度
})
设置透光率.transmission和折射率.ior。
new THREE.MeshPhysicalMaterial({
transmission: 1.0, //玻璃材质透光率，transmission替代opacity
ior:1.5,//折射率
})
GUI可视化调试PBR材质属性
基本参数和代码设置好以后，就是通过GUI可视化交互界面，调试PBR材质或光源的参数，gui.js库的使用参考入门章节介绍。
const obj = {
color: mesh.material.color, // 材质颜色
};
// 材质颜色color
matFolder.addColor(obj, 'color').onChange(function (value) {
mesh.material.color.set(value);
});
// 范围可以参考文档
matFolder.add(mesh.material,'metalness',0,1);
matFolder.add(mesh.material,'roughness',0,1);
matFolder.add(mesh.material,'transmission',0,1);
matFolder.add(mesh.material,'ior',0,3);
matFolder.add(mesh.material,'envMapIntensity',0,10);
代码：
model.js
// 引入three.js
import * as THREE from "three";
// 引入gltf加载器
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import gui from "./gui.js";
// 创建材质子菜单
const matFolder = gui.addFolder("车外壳材质");
matFolder.close(); //关闭菜单
// 实例化一个加载器对象
const loader = new GLTFLoader();
const model = new THREE.Group(); //声明一个组对象，用来添加加载成功的三维场景
const textureCube = new THREE.CubeTextureLoader()
// .setPath("../../环境贴图/环境贴图0/")
.setPath("../../环境贴图/环境贴图1/")
.load(["px.jpg", "py.jpg", "pz.jpg", "nx.jpg", "ny.jpg", "nz.jpg"]);
//如果renderer.outputEncoding=THREE.sRGBEncoding;环境贴图需要保持一致
textureCube.encoding = THREE.sRGBEncoding;
// 加载glb格式的gltf模型
// "../../ClearcoatTest.glb"
loader.load("../../ClearcoatTest.glb", function (gltf) {
// console.log('gltf', gltf);
// model.add(gltf.scene)
gltf.scene.traverse(function (obj) {
// 只获取所有mesh节点
if (obj.isMesh) {
// 判断是否是网格模型
// 查看threejs渲染gltf默认材质
console.log("obj", obj.name);
// obj.material.metalmess = 1.0; //设置金属度
// obj.material.roughness = 0.9; //设置粗糙度
// obj.material.envMap = textureCube; //设置环境贴图属性的值为立方体纹理对象
}
});
model.add(gltf.scene);
const mesh = gltf.scene.getObjectByName("R2_ClearCoatSample");
mesh.material = new THREE.MeshPhysicalMaterial({
metalness: 0.0,
roughness: 0.0,
envMap: textureCube, //环境贴图
envMapIntensity: 1.0, //环境贴图对Mesh表面影响程度
transmission: 1.0,
ior: 1.5
});
const obj = {
color: mesh.material.color, //材质颜色
};
// 材质颜色color
matFolder.addColor(obj, "color").onChange(function (value) {
mesh.material.color.set(value);
});
// 范围可参考文档
matFolder.add(mesh.material, "metalness", 0, 1);
matFolder.add(mesh.material, "roughness", 0, 1);
matFolder.add(mesh.material, "transmission", 0, 1);
matFolder.add(mesh.material, "ior", 1, 2.333);
matFolder.add(mesh.material, "envMapIntensity", 0, 10);
});
export default model;
效果：透明的效果
7. 三维软件导出PBR材质属性
实际开发的时候PBR材质的属性，很多时候是可以在三维建模软件中设置的，然后通过gltf导出即可，这样就不用在threejs代码设置。
通常美术对三维场景渲染的了解也比大部分前端程序员多的多，只要美术在三维建模软件设置好并导出包含pbr材质属性的gltf即可。
threejs与建模软件对接的问题
- gltf能否存储3D建模软件的某个材质属性：有些三维软件特有的材质属性，不一定能通过gltf导出，也谈不上threejs解析
- 三维建模能否导出PBR材质：能导出的话，能导出哪些属性，不能导出哪些属性
如果你的三维建模不能导出pbr材质，或者部分pbr材质属性无法导出，那你通常需要用代码方式添加材质，这样就麻烦些。
Blender导出PBR材质演示
首先Blender最新版导出gltf模型时候，是可以把PBR材质的很多属性导出的，比如金属度metalness、粗糙度roughness、清漆.clearcoat、透光率(透射度).transmission等等。课件源码中提供了blender导出的gltf模型你可以浏览器控制台打印测试，这些PBR材质属性能否解析渲染。
Bledner中设置PBR材质
你可以在Bledner中设置车外壳、车玻璃的材质属性
车外壳：清漆、清漆粗糙度
车玻璃：透光率(透射度)
threejs解析gltf材质规则
大家都知道，MeshPhysicalMaterial是MeshStandardMaterial的子类，具有更多的PBR材质属性和功能。
所以，threejs解析gltf模型，会用两种材质PBR材质去解析，一个是标准网格材质MeshStandardMaterial，一个是物理网格材质MeshPhysicalMaterial，如果能用MeshStandardMaterial表示就用，不能就换MeshPhysicalMaterial。
具体说就是，threejs解析gltf模型材质的时候，一般默认使用标准网格材质MeshStandardMaterial，如果gltf有的材质具有.clearcoat、.transmission等属性，标准网格材质MeshStandardMaterial无法表达的时候，会用物理网格材质MeshPhysicalMaterial来解析gltf材质。
查看threejs解析的PBR材质
gltf.scene.traverse(function(obj) {
if (obj.isMesh) {
console.log('obj.material',obj.material);
}
});
console.log('外壳',mesh1.material);
console.log('玻璃',mesh2.material);
设置环境贴图
这时候清漆、清漆粗糙度、透光率(透射度)等属性Bledner都已经设置好了，threejs可以自动解析渲染,不用在代码中麻烦设置了，只要配上环境贴图即可。
const mesh1 = gltf.scene.getObjectByName('外壳01');
mesh1.material.envMap = textureCube; //环境贴图
mesh1.material.envMapIntensity = 1.0; 环境贴图对Mesh表面影响程度
const mesh2 = gltf.scene.getObjectByName('玻璃01');
mesh2.material.envMap = textureCube; //环境贴图
mesh2.material.envMapIntensity = 1.0; 环境贴图对Mesh表面影响程度
相关代码：
// 引入three.js
import * as THREE from "three";
// 引入gltf加载器
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import gui from "./gui.js";
// 创建材质子菜单
const matFolder = gui.addFolder("车外壳材质");
matFolder.close(); //关闭菜单
// 实例化一个加载器对象
const loader = new GLTFLoader();
const model = new THREE.Group(); //声明一个组对象，用来添加加载成功的三维场景
const textureCube = new THREE.CubeTextureLoader()
// .setPath("../../环境贴图/环境贴图0/")
.setPath("../../环境贴图/环境贴图1/")
.load(["px.jpg", "py.jpg", "pz.jpg", "nx.jpg", "ny.jpg", "nz.jpg"]);
//如果renderer.outputEncoding=THREE.sRGBEncoding;环境贴图需要保持一致
textureCube.encoding = THREE.sRGBEncoding;
// 加载glb格式的gltf模型
// "../../ClearcoatTest.glb"
loader.load("../../ClearcoatTest.glb", function (gltf) {
// console.log('gltf', gltf);
gltf.scene.traverse(function (obj) {
// 只获取所有mesh节点
if (obj.isMesh) {
// 判断是否是网格模型
// 查看threejs渲染gltf默认材质
console.log("obj", obj.name);
console.log("obj", obj.material);
}
});
model.add(gltf.scene);
const mesh1 = gltf.scene.getObjectByName("R2_ClearCoatSample");
mesh1.material.envMap = textureCube; //环境贴图
mesh1.material.envMapIntensity = 1.0; //环境贴图对Mesh表面影响程度
// mesh1.material.transmission = 1.0;
const mesh2 = gltf.scene.getObjectByName("R1_ClearCoatSample");
mesh2.material.envMap = textureCube; //环境贴图
mesh2.material.envMapIntensity = 1.0; //环境贴图对Mesh表面影响程度
// mesh2.material.transmission = 1.0;
console.log("r2", mesh1.material);
console.log("r3", mesh2.material);
});
export default model;
