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"),
})
更多推荐
所有评论(0)