光照、环境贴图

本节课给大家介绍下光照、环境贴图对gltf模型渲染的影响。

回顾：光照

前面给大家讲解课程时候说过，需要光照的材质，如果没有任何光源，就会漆黑一片。

平行光DirectionalLight相当于近似模拟太阳光照耀效果，你旋转三维场景可以发现，有光照的一面更亮，没有光照的偏向黑色。

// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff,3.0);
directionalLight.position.set(80, 100, 50);
scene.add(directionalLight);

光照强度增大点，你会发现场景更明亮一些。

// 平行光
directionalLight.intensity = 10.0;

你可以隐藏前面gltf加载时候的平行光进行设置，观察下。

先删除平行光代码，这时候一片漆黑，接下来给大家设置通过设置环境贴图，照亮场景。

立方体环境贴图

所谓立方体环境贴图，就是一个模型周围的环境的图像，比如人在户外，人的上下左右前后分别拍摄一张照片，得到3D空间中6个角度方向的照片。

这6张照片就构成了一个立方体环境贴图。

立方体纹理加载器CubeTextureLoader

下面6张图片放在vue项目的public/envMap/文件中。

// 加载环境贴图
// 加载周围环境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('./envMap/')
    .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
    // CubeTexture表示立方体纹理对象

设置材质环境贴图属性.envMap

递归遍历给每一个Mesh的材质设置环境贴图。

给三维场景mesh的材质设置环境贴图,这时候，你会原来一片黑色的gltf模型，可以正常预览了。

loader.load("../收费站.glb", function (gltf) {
    // 递归遍历批量设置环境贴图
    gltf.scene.traverse(function (obj) {
        if (obj.isMesh) { //判断是否是网格模型
            obj.material.envMap = textureCube; //设置环境贴图
        }
    });
})

物体与物体之间，其实会相互反射光线，彼此产生影响。这种影响，可以用环境贴图来近似模拟。环境贴图作用其实就是模拟周围环境的光照效果,这个时候，你虽然不设置任何光源，仅仅设置.envMap也能看到物体表面的颜色效果。

环境贴图反射率.envMapIntensity

材质的.envMapIntensity属性主要用来设置模型表面反射周围环境贴图的能力，或者说环境贴图对模型表面的影响能力。具体说.envMapIntensity相当于环境贴图的系数，环境贴图像素值乘以该系数后，在用于影响模型表面。

// envMapIntensity：控制环境贴图对mesh表面影响程度
//默认值1, 设置为0.0,相当于没有环境贴图
obj.material.envMapIntensity = 1.0;

给三维场景设置环境贴图

这样的话，相当于场景中每个Mesh设置envMap，不用递归遍历设置所有mesh材质的.envMap属性。

scene.environment = textureCube;

总结

如果你想模拟太阳光照射效果，你可以设置平行光DirectionalLight。

实际生活，除了太阳光影响物体，物体与物体之间，其实相互反射光线，彼此产生影响。这种影响，可以用环境贴图来近似模拟。一般做Web3D可视化项目，通常要设置环境贴图，通过环境贴图模拟物体周围相互影响的光照。