Three.js高光貼圖(.specularMap)

Three.js高光貼圖(.specularMap)

本文是Three.js電子書的8.8節

高光網格材質MeshPhongMaterial具有高光屬性.specular,如果一個網格模型Mesh都是相同的材質並且表面粗糙度相同,或者說網格模型外表面所有不同區域的鏡面反射能力相同，可以直接設置材質的高光屬性.specular。如果一個網格模型表示一個人，那麼人的不同部位高光程度是不同的，不可能直接通過.specular屬性來描述，在這種情況通過高光貼圖.specularMap的RGB值來描述不同區域鏡面反射的能力，.specularMap和顏色貼圖.Map一樣和通過UV座標映射到模型表面。高光貼圖.specularMap不同區域像素值不同，表示網格模型不同區域的高光值不同。

下面是一個地球的案例，地球地面和海面的高光值是不同的，海面更爲高亮，你可以測試使用高光貼圖和不使用高光貼圖的渲染效果有什麼不同。

// 加載紋理貼圖
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。