Three.js自發(fā)光貼圖.emissiveMap
WebGL/Threejs技術(shù)博客：查看更多文章和實戰(zhàn)案例
在Three.js材質(zhì)中，和顏色貼圖屬性.map對應(yīng)的是顏色屬性.color,和高光貼圖屬性.specularMap對應(yīng)的是高光顏色屬性.specular巫击，與粗糙度貼圖屬性.roughnessMap對應(yīng)是粗糙度屬性roughness....
本文說到的自發(fā)光貼圖屬性.emissiveMap對應(yīng)的是自發(fā)光屬性.emissive喘鸟。
自發(fā)光屬性.emissive
自發(fā)光屬性.emissive的屬性值和顏色貼圖屬性.map的屬性值相同都是Three.js的顏色對象THREE.Color什黑。自發(fā)光屬性.emissive默認值是黑色0x000000堪夭。也就是模型默認是不發(fā)光的森爽，如果一個模型是發(fā)光的，比如電源上一個電源燈橘蜜，你可以把電源燈的材質(zhì)設(shè)置為對應(yīng)的發(fā)光顏色计福。
大家應(yīng)該都知道，支持光照的Three.js材質(zhì)顏色是受光照影響的徽职，不過材質(zhì)的自發(fā)光顏色.emissive是不受光照影響的象颖。
自發(fā)光貼圖屬性.emissiveMap
如果一個網(wǎng)格模型Mesh整體上是同一種顏色，直接設(shè)置顏色屬性.color就可以姆钉，如果一個充電寶使用了一個網(wǎng)格模型Mesh來表示说订，這時候整個充電寶Mesh不同區(qū)域的顏色是不一樣的抄瓦，那就需要使用顏色貼圖屬性.map。
同樣道理陶冷，一個充電寶Mesh不同區(qū)域有的發(fā)光钙姊，有的不發(fā)光，這時候不能使用自發(fā)光屬性.emissive整體設(shè)置同樣發(fā)光效果埂伦，可以通過自發(fā)光貼圖屬性.emissiveMap來解決煞额。如果充電寶發(fā)光的電源燈單獨使用一個Mesh表示，這種情況下可以設(shè)置.emissive即可赤屋，不需要美術(shù)導(dǎo)出自發(fā)光貼圖立镶，一般美術(shù)出圖的時候可能會把多個零件合并為一個網(wǎng)格模型
Mesh。
THree.js系統(tǒng)渲染的時候，顏色貼圖屬性.map和顏色屬性.color的RGB分量會分別進行乘法運算嵌巷，顏色屬性.color默認值是白色0xffffff，一般設(shè)置了.map晓折，不去要去更改.color病梢，不過你可以嘗試更改.color觅彰，比如設(shè)置為紅色，你會發(fā)現(xiàn)模型的顏色在map的基礎(chǔ)上會有顏色變化。
自發(fā)光貼圖屬性.emissiveMap類似顏色貼圖屬性.map，Threejs計算材質(zhì)的發(fā)光效果檐晕，會把自發(fā)光貼圖屬性.emissiveMap和.emissive的RGB分量分別進行乘法運算。
Three.js自發(fā)光貼圖.emissiveMap無效
如果你設(shè)置了Three.js模型材質(zhì)的自發(fā)光貼圖屬性.emissiveMap，渲染結(jié)果中沒有顯示继控，這種情況下冶忱，你要注意下材質(zhì)的自發(fā)光屬性.emissive是否設(shè)置，因為Threejs渲染的時候眶拉，著色器會從自發(fā)光貼圖.emissiveMap提取像素值RGB谒臼，然后和自發(fā)光.emissive的屬性值相乘拾氓，而Three.js中.emissive的默認值是黑色房官，也就是0x000000,這種情況下疲酌，無論.emissiveMap產(chǎn)生的任何自發(fā)光都相當(dāng)于沒有。
有一點要注意油航，如果沒有自發(fā)光貼圖.emissiveMap揉稚，千萬不能把.emissive設(shè)置為白色，這樣的話整個模型都會發(fā)白光，.emissiveMap一般局部是發(fā)光顏色，其它區(qū)域是黑色顽聂。局部發(fā)光顏色對應(yīng)模型的某個位置全景，比如充電寶的電源燈揭鳞。
var mat = new THREE.MeshPhysicalMaterial({
emissive:0xffffff,// emissive默認黑色鉴裹，設(shè)置為白色
emissiveMap: texLoader.load("./模型/emissiveMap.png"),
})
