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;