前言

我们之前讲解过了光照阴影，要想显示出阴影效果，物体、光照都需要进行相关设置，而光照贴图也是能为物体添加阴影，本节我们来学习一下光照贴图。

ligntMap

在three中用lightMap去设置光照贴图，光照贴图能够实现真实的光照效果，不同于之前学的法线等贴图，光照贴图是用来表述物体收光照时候的明暗度，不是用来描述纹理、颜色等信息的。一般，我们需要在建模软件中去制作所用的光照贴图，具体的用法跟其他贴图用法一样：

//创建光源
const light = new THREE.DirectionalLight(0xffffff, 2.0);
light.position.set(0, 2, 2).normalize();
scene.add(light);
const textureLoader = new THREE.TextureLoader();
const lightTexture = textureLoader.load('./textures/light.jpg');
const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({
  lightMap: lightTexture,
  lightMapIntensity: 1.0
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

一般而言光照贴图在加载模型时候会自动设置，对比之前讲解的模型阴影贴图方式更为节约资源，能够提高渲染的性能。之前我们提到过几何体有两套UV坐标，下面我们来看下如何设置BufferGeomery的uv与uv2坐标。 BufferGeometry中的uv与uv2属性可以用来设置或者获取几何体的映射信息，通过BufferGeometry的uv和uv2属性，我们能够将纹理贴图应用到几何体表面，从而在渲染时加深纹理的真实效果。我们通过geometry.setAttribute方法来设置UV和UV2属性：：

   const geometry = new THREE.BufferGeometry();
   const uv = new THREE.BufferAttribute( new Float32Array([
      0.0, 0.0, 
      1.0, 0.0, 
      0.5, 1.0,
   ], 2);
   geometry.setAttribute('uv', uv);
   const uv2 = new THREE.BufferAttribute( new Float32Array([
      0.0, 0.0, 
      1.0, 0.0,
      0.5, 1.0
  ], 2);
   geometry.setAttribute('uv2', uv2);

需要注意的uv坐标是浮点型数值，使用的是new Float32Array()类数组。

总结

以上就是光照贴图，lightMap是一种增强光照的技术，它能够模拟出更加真实的光照效果。需要注意的是lightMap只是一种辅助手段。

three学习（二十三）—— 光照贴图

前言

ligntMap

总结