Three.js光照貼圖添加陰影(·lightMap)

Three.js光照貼圖添加陰影(·lightMap)

本文是Three.js電子書的8.7節

在三維場景中有時候需要設置模型的陰影，也就是陰影貼圖或者說光照貼圖·lightMap，一般Threejs加載外部模型的光照貼圖·lightMap，三維模型加載器可以自動設置，不需要程序員通過代碼去設置，不過爲了讓大家更好理解光照貼圖·lightMap，這裏就通過Three.js代碼設置場景模型的陰影貼圖·lightMap。

//創建一個平面幾何體作爲投影面
var planeGeometry = new THREE.PlaneGeometry(300, 200);

planeGeometry.faceVertexUvs[1] = planeGeometry.faceVertexUvs[0];
var textureLoader = new THREE.TextureLoader();
// 加載光照貼圖
var textureLight = textureLoader.load('shadow.png');
var planeMaterial = new THREE.MeshLambertMaterial({
  color: 0x999999,
  lightMap:textureLight,// 設置光照貼圖
  // lightMapIntensity:0.5,//烘培光照的強度. 默認 1.
});
var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); //網格模型對象Mesh
...

課程5.2節設置模型的陰影是通過實時計算得到的，而光照貼圖·lightMap是3D美術渲染好提供給程序員。這兩種方式相比較通過貼圖的方式更爲節約資源，提高渲染性功能。

Geometry屬性.faceVertexUvs

一般幾何體有兩套UV座標，對於Geometry類型幾何體而言

Geometry.faceVertexUvs[0]包含的紋理座標用於顏色貼圖map、法線貼圖normalMap等,Geometry.faceVertexUvs[1]包含的第二套紋理貼圖用於光照陰影貼圖

一般通過Threejs幾何體API創建的幾何體默認只有一組紋理座標Geometry.faceVertexUvs[0]，所以爲了設置光照陰影貼圖，需要給另一組紋理座標賦值Geometry.faceVertexUvs[1] = Geometry.faceVertexUvs[0];

BufferGeometry屬性.uv和.uv2

一般通過Threejs加載外部模型，解析三維模型數據得到的幾何體類型是緩衝類型幾何體BufferGeometry，對於BufferGeometry而言兩套紋理座標分別通過.uv和.uv2屬性表示。

geometry.attributes.uv2 = geometry.attributes.uv;