Three.js自發光貼圖.emissiveMap

Three.js自發光貼圖.emissiveMap

在Three.js材質中，和顏色貼圖屬性.map對應的是顏色屬性.color,和高光貼圖屬性.specularMap對應的是高光顏色屬性.specular，與粗糙度貼圖屬性.roughnessMap對應是粗糙度屬性roughness....
本文說到的自發光貼圖屬性.emissiveMap對應的是自發光屬性.emissive。

我的技術博客

自發光屬性.emissive

自發光屬性.emissive的屬性值和顏色貼圖屬性.map的屬性值相同都是Three.js的顏色對象THREE.Color。自發光屬性.emissive默認值是黑色0x000000。也就是模型默認是不發光的，若是一個模型是發光的，好比電源上一個電源燈，你能夠把電源燈的材質設置爲對應的發光顏色。
你們應該都知道，支持光照的Three.js材質顏色是受光照影響的，不過材質的自發光顏色.emissive是不受光照影響的。

自發光貼圖屬性.emissiveMap

若是一個網格模型Mesh總體上是同一種顏色，直接設置顏色屬性.color就能夠，若是一個充電寶使用了一個網格模型Mesh來表示，這時候整個充電寶Mesh不一樣區域的顏色是不同的，那就須要使用顏色貼圖屬性.map。

一樣道理，一個充電寶Mesh不一樣區域有的發光，有的不發光，這時候不能使用自發光屬性.emissive總體設置一樣發光效果，能夠經過自發光貼圖屬性.emissiveMap來解決。若是充電寶發光的電源燈單獨使用一個Mesh表示，這種狀況下能夠設置.emissive便可，不須要美術導出自發光貼圖，通常美術出圖的時候可能會把多個零件合併爲一個網格模型
Mesh。

THree.js系統渲染的時候，顏色貼圖屬性.map和顏色屬性.color的RGB份量會分別進行乘法運算，顏色屬性.color默認值是白色0xffffff，通常設置了.map，不去要去更改.color，不過你能夠嘗試更改.color，好比設置爲紅色，你會發現模型的顏色在map的基礎上會有顏色變化。

自發光貼圖屬性.emissiveMap相似顏色貼圖屬性.map，Threejs計算材質的發光效果，會把自發光貼圖屬性.emissiveMap和.emissive的RGB份量分別進行乘法運算。

Three.js自發光貼圖.emissiveMap無效

若是你設置了Three.js模型材質的自發光貼圖屬性.emissiveMap，渲染結果中沒有顯示，這種狀況下，你要注意下材質的自發光屬性.emissive是否設置，由於Threejs渲染的時候，着色器會從自發光貼圖.emissiveMap提取像素值RGB，而後和自發光.emissive的屬性值相乘，而Three.js中.emissive的默認值是黑色，也就是0x000000,這種狀況下，不管.emissiveMap產生的任何自發光都至關於沒有。

有一點要注意，若是沒有自發光貼圖.emissiveMap，千萬不能把.emissive設置爲白色，這樣的話整個模型都會發白光，.emissiveMap通常局部是發光顏色，其它區域是黑色。局部發光顏色對應模型的某個位置，好比充電寶的電源燈。

var mat = new THREE.MeshPhysicalMaterial({
  emissive:0xffffff,// emissive默認黑色，設置爲白色
  emissiveMap: texLoader.load("./模型/emissiveMap.png"),
})