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"),
})
我来评几句
登录后评论

已发表评论数()

相关站点

热门文章