Three.js凹凸貼圖bumpMap和法線貼圖.normalMap

凹凸貼圖bumpMap和法線貼圖.normalMap

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

一個複雜的曲面模型，往往模型頂點數量比較多，模型文件比較大，爲了降低模型文件大小，法線貼圖.normalMap算法自然就產生了，複雜的三維模型3D美術可以通過減面操作把精模簡化爲簡模，然後把精模表面的複雜幾何信息映射到法線貼圖.normalMap上。

法線貼圖

下面代碼在沒有設置法線貼圖之前就是一個立方體網格模型Mesh,然後把一個攜帶圓形凹坑信息的法線貼圖3_256.jpg設置到立方體網格模型的面上，你可以看到面上多個凹陷效果。你可以測試源碼案例中法線貼圖目錄下的其它法線貼圖文件，查看渲染效果。

法線貼圖3_256.jpg

立方體設置法線貼圖後的效果

// TextureLoader創建一個紋理加載器對象，可以加載圖片作爲幾何體紋理
var textureLoader = new THREE.TextureLoader();
// 加載法線貼圖
var textureNormal = textureLoader.load('./法線貼圖/3_256.jpg');
var material = new THREE.MeshPhongMaterial({
  color: 0xff0000,
  normalMap: textureNormal, //法線貼圖
  //設置深淺程度，默認值(1,1)。
  normalScale: new THREE.Vector2(3, 3),
}); //材質對象Material
var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh

法線貼圖:地球案例

地球表面法線貼圖記錄了地面表面的幾何信息。

你可以對比兩個地球的渲染效果，一個設置法線貼圖，一個不設置法線貼圖。

var geometry = new THREE.SphereGeometry(100, 25, 25); //球體
// TextureLoader創建一個紋理加載器對象，可以加載圖片作爲幾何體紋理
var textureLoader = new THREE.TextureLoader();
// 加載紋理貼圖
var texture = textureLoader.load('./Earth.png');
// 加載法線貼圖
var textureNormal = textureLoader.load('./EarthNormal.png');
var material = new THREE.MeshPhongMaterial({
  map: texture, // 普通顏色紋理貼圖
  normalMap: textureNormal, //法線貼圖
  //設置深淺程度，默認值(1,1)。
  normalScale: new THREE.Vector2(1.2, 1.2),
}); //材質對象Material

凹凸貼圖

凹凸貼圖和法線貼圖功能相似，知識沒有發現貼圖表達的幾何體表面信息更豐富。凹凸貼圖是用圖片像素的灰度值表示幾何表面的高低深度，如果模型定義了法線貼圖，就沒有必要在使用凹凸貼圖。

你可以對比兩面牆一個使用凹凸貼圖一個不使用凹凸貼圖的視覺效果。

var textureLoader = new THREE.TextureLoader();
// 加載顏色紋理貼圖
var texture = textureLoader.load('./凹凸貼圖/diffuse.jpg');
// 加載凹凸貼圖
var textureBump = textureLoader.load('./凹凸貼圖/bump.jpg');
var material = new THREE.MeshPhongMaterial({
  map: texture,// 普通紋理貼圖
  bumpMap:textureBump,//凹凸貼圖
  bumpScale:3,//設置凹凸高度，默認值1。
}); //材質對象Material