WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 Three.js免费视频教程

Three.js高光贴图(.specularMap)

高光材质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

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com