当前位置：首页 > article >正文

threejsPBR材质与纹理贴图

article 2025/6/3 19:11:02

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;//表面粗糙度

3. 环境贴图.envMap(金属效果)

环境贴图对PBR材质渲染效果影响还是比较大，一般渲染PBR材质的模型，最好设置一个合适的环境贴图。

立方体纹理加载器CubeTextureLoader

TextureLoader返回Texture
CubeTextureLoader返回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;

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;

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, //材质颜色};// 材质颜色colormatFolder.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表面影响程度

1. PBR材质简介

光照模型

PBR相关理论介绍文章

网格模型材质整体回顾

渲染占用资源和表现能力

2. PBR材质金属度和粗糙度

金属度metalness

粗糙度roughness

3. 环境贴图.envMap(金属效果)

立方体纹理加载器CubeTextureLoader

CubeTextureLoader加载环境贴图

MeshStandardMaterial环境贴图属性.envMap

环境贴图反射率.envMapIntensity

粗糙度roughness为0

选择合适的环境贴图

纹理和渲染器颜色空间一致

4. 环境贴图2

环境贴图作用测试

场景环境属性.environment

环境贴图色彩空间编码.encoding

5. MeshPhysicalMaterial清漆层

清漆层属性.clearcoat

清漆层粗糙度.clearcoatRoughness

车外壳PBR材质设置

车外壳油漆效果

GUI可视化调试PBR材质属性

.clearcoat : Float

6. 物理材质透光率.transmission

透光率(透射度).transmission

折射率.ior

玻璃透光率.transmission设置

GUI可视化调试PBR材质属性

7. 三维软件导出PBR材质属性

threejs与建模软件对接的问题

Blender导出PBR材质演示

Bledner中设置PBR材质

threejs解析gltf材质规则

设置环境贴图

相关文章：

环境贴图色彩空间编码`.encoding`