Three.js 高光贴图 .specularMap - 文章教程

Three.js 高光贴图 .specularMap

发布于 2021-08-23 字数 1302 浏览 839 评论 0

高光材质 MeshPhongMaterial 具有高光属性 .specular,如果一个网格模型 Mesh 都是相同的材质,可以使用.specular属性设置高光材质MeshPhongMaterial的高光颜色值就可以,如果一个网格模型表示一个人,那么人的不同部位高光程度是不同的,不可能直接通过.specular属性来描述,在这种情况通过高光贴图属性.specularMap来表达,.specularMap和颜色贴图.Map一样和通过UV坐标一一映射对应。高光贴图.specularMap不同区域像素值不同,表示网格模型不同区域的高光值不同。

下面是一个地球的案例,完整源码和贴图参见 threejs 视频教程 8.8 节课。

地球地面和海面的高光值是不同的,海面更为高亮。

// 加载纹理贴图
var texture = textureLoader.load('earth_diffuse.png');
// 加载高光贴图
var textureSpecular = textureLoader.load('earth_specular.png');
var material = new THREE.MeshPhongMaterial({
  // specular: 0xff0000,//高光部分的颜色
  shininess: 30,//高光部分的亮度,默认30
  map: texture,// 普通纹理贴图
  specularMap: textureSpecular, //高光贴图
}); //材质对象Material

高光贴图属性.specularMap和高光属性.specular是对应的,也就是说只有高光网格材质对象MeshPhongMaterial才具备高光贴图属性.specularMap

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

清晨说ぺ晚安

我之所以活到现在的全部意义,是为了此刻能对你说,我爱你,我会在你身后永远守护你。

16 文章
2 评论
21557 人气
更多

推荐作者

qianbiandeboy

文章 0 评论 0

少女净妖师

文章 2 评论 0

zangqw

文章 0 评论 0

qq_7HKsl

文章 0 评论 0

伪装你

文章 1 评论 0