Three.js自發(fā)光貼圖.emissiveMap
WebGL/Threejs技術(shù)博客：查看更多文章和實(shí)戰(zhàn)案例
在Three.js材質(zhì)中，和顏色貼圖屬性.map對(duì)應(yīng)的是顏色屬性.color,和高光貼圖屬性.specularMap對(duì)應(yīng)的是高光顏色屬性.specular，與粗糙度貼圖屬性.roughnessMap對(duì)應(yīng)是粗糙度屬性roughness....
本文說(shuō)到的自發(fā)光貼圖屬性.emissiveMap對(duì)應(yīng)的是自發(fā)光屬性.emissive。
自發(fā)光屬性.emissive
自發(fā)光屬性.emissive的屬性值和顏色貼圖屬性.map的屬性值相同都是Three.js的顏色對(duì)象THREE.Color。自發(fā)光屬性.emissive默認(rèn)值是黑色0x000000。也就是模型默認(rèn)是不發(fā)光的，如果一個(gè)模型是發(fā)光的，比如電源上一個(gè)電源燈，你可以把電源燈的材質(zhì)設(shè)置為對(duì)應(yīng)的發(fā)光顏色。
大家應(yīng)該都知道，支持光照的Three.js材質(zhì)顏色是受光照影響的，不過(guò)材質(zhì)的自發(fā)光顏色.emissive是不受光照影響的。
自發(fā)光貼圖屬性.emissiveMap
如果一個(gè)網(wǎng)格模型Mesh整體上是同一種顏色，直接設(shè)置顏色屬性.color就可以，如果一個(gè)充電寶使用了一個(gè)網(wǎng)格模型Mesh來(lái)表示，這時(shí)候整個(gè)充電寶Mesh不同區(qū)域的顏色是不一樣的，那就需要使用顏色貼圖屬性.map。
同樣道理，一個(gè)充電寶Mesh不同區(qū)域有的發(fā)光，有的不發(fā)光，這時(shí)候不能使用自發(fā)光屬性.emissive整體設(shè)置同樣發(fā)光效果，可以通過(guò)自發(fā)光貼圖屬性.emissiveMap來(lái)解決。如果充電寶發(fā)光的電源燈單獨(dú)使用一個(gè)Mesh表示，這種情況下可以設(shè)置.emissive即可，不需要美術(shù)導(dǎo)出自發(fā)光貼圖，一般美術(shù)出圖的時(shí)候可能會(huì)把多個(gè)零件合并為一個(gè)網(wǎng)格模型
Mesh。
THree.js系統(tǒng)渲染的時(shí)候，顏色貼圖屬性.map和顏色屬性.color的RGB分量會(huì)分別進(jìn)行乘法運(yùn)算，顏色屬性.color默認(rèn)值是白色0xffffff，一般設(shè)置了.map，不去要去更改.color，不過(guò)你可以嘗試更改.color，比如設(shè)置為紅色，你會(huì)發(fā)現(xiàn)模型的顏色在map的基礎(chǔ)上會(huì)有顏色變化。
自發(fā)光貼圖屬性.emissiveMap類(lèi)似顏色貼圖屬性.map，Threejs計(jì)算材質(zhì)的發(fā)光效果，會(huì)把自發(fā)光貼圖屬性.emissiveMap和.emissive的RGB分量分別進(jìn)行乘法運(yùn)算。
Three.js自發(fā)光貼圖.emissiveMap無(wú)效
如果你設(shè)置了Three.js模型材質(zhì)的自發(fā)光貼圖屬性.emissiveMap，渲染結(jié)果中沒(méi)有顯示，這種情況下，你要注意下材質(zhì)的自發(fā)光屬性.emissive是否設(shè)置，因?yàn)門(mén)hreejs渲染的時(shí)候，著色器會(huì)從自發(fā)光貼圖.emissiveMap提取像素值RGB，然后和自發(fā)光.emissive的屬性值相乘，而Three.js中.emissive的默認(rèn)值是黑色，也就是0x000000,這種情況下，無(wú)論.emissiveMap產(chǎn)生的任何自發(fā)光都相當(dāng)于沒(méi)有。
有一點(diǎn)要注意，如果沒(méi)有自發(fā)光貼圖.emissiveMap，千萬(wàn)不能把.emissive設(shè)置為白色，這樣的話整個(gè)模型都會(huì)發(fā)白光，.emissiveMap一般局部是發(fā)光顏色，其它區(qū)域是黑色。局部發(fā)光顏色對(duì)應(yīng)模型的某個(gè)位置，比如充電寶的電源燈。
var mat = new THREE.MeshPhysicalMaterial({
emissive:0xffffff,// emissive默認(rèn)黑色，設(shè)置為白色
emissiveMap: texLoader.load("./模型/emissiveMap.png"),
})
