前言

上节我们介绍了给物体添加阴影的光照贴图，本节我们再介绍两种贴图——高光与环境贴图。

高光贴图

three中有高光网格材质MeshPhongMaterial(高光网格材质)，它有一个属性.specular，用来设置材质的高光颜色，但是该属性只适用于相同材质并且反射能力相同的情况，现实中材质的不同区域反射高光的能力不一样，这时候我们就需要用高光贴图。
specularMap用来设置材质的高光贴图，它能够让物体表面在光照下呈现一种反射效果，反射效果遵循颜色越浅对反射越强烈的规律，我们在使用高光贴图时需要指定纹理映射的uv坐标。因为是反射效果，所以我们需要设置光源。最经典的例子是地球上，海洋与陆地的反射效果不一样。

const light = new THREE.SpotLight();
light.position.set(0, 10, 0);
light.angle = Math.PI / 4;
const textureLoader = new THREE.TextureLoader();
const textureSpecular = textureLoader.load('./textures/specular1.jpg');
const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({
  shininess: 30, //高光亮度
  specularMap: textureSpecular
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube, light);

环境贴图

环境贴图顾名思义用来设置物体对周边环境的映射，我们经常看到的一个慢镜头，水滴映射出一圈的环境，就是这样的效果。如果我们设置了场景环境那么对物体设置环境贴图就会更加的逼真。
envMap设置环境贴图。环境贴图通常由一个CubeTexture（立方体贴图）组成，立方体贴图是由六张贴图构成的，正好对应立方体六个面，每个面都包含物体需要反射的信息。所以我们要想设置环境贴图，一般要先加载立方体贴图，three中通过CubeTextureLoader加载立方体贴图，该加载器由一个参数urls，就是用来加载六张贴图。

   const cubeTextureLoader = new THREE.CubeTextureLoader();
const cubeTexture = cubeTextureLoader.load([
  '1.jpg',
  '2.jpg',
  '3.jpg',
  '4.jpg',
  '5.jpg',
  '6.jpg'
]);
const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({
  envMap: cubeTexture,
  reflectivity: 0.9, // 反射率
  envMapIntensity: 1 // 环境映射强度
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube, light);

要想渲染出来的物体贴近现实，环境贴图是必不可少的。

总结

以上就是高光贴图specularMap与环境贴图envMap，我们讲解的几种贴图往往会组合着使用，最终目的就是为了让物体更加贴近现实。