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

法線貼圖

下面程式碼在沒有設定法線貼圖之前就是一個立方體網格模型Mesh,然後把一個攜帶圓形凹坑資訊的法線貼圖jpg設定到立方體網格模型的面上，你可以看到面上多個凹陷效果。

線上演示地址

var geometry1 = new THREE.BoxGeometry(100, 100, 100);
            // 載入顏色紋理貼圖
            var
 
 texture1 = textureLoader.load('./img/normal.jpg');
            var material1 = new THREE.MeshPhongMaterial({
              color: 0xff0000,
              normalMap: texture1, //法線貼圖
              //設定深淺程度，預設值(1,1)。
              normalScale: new THREE.Vector2(3, 3),
            }); //材質物件Material
            var
 
 mesh1 = new THREE.Mesh(geometry1, material1); //網格模型物件Mesh
            mesh1.position.set(150, 0, 0); //設定mesh3模型物件的xyz座標為120,0,0
            scene.add(mesh1); //網格模型新增到場景中

凹凸貼圖

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

            var geometry = new THREE.BoxGeometry(100, 100, 100);
            
 
var textureLoader = new THREE.TextureLoader();
            // 載入顏色紋理貼圖
            var texture = textureLoader.load('./img/牆1.jpg');
            // 載入凹凸貼圖
            var textureBump = textureLoader.load('./img/牆.jpg');
            var material = new THREE.MeshPhongMaterial({
              map: texture,// 普通紋理貼圖
              bumpMap:textureBump,//凹凸貼圖
              bumpScale:3,//設定凹凸高度，預設值1。
            }); //材質物件Material
            var mesh = new THREE.Mesh(geometry, material); //網格模型物件Mesh
            scene.add(mesh); //網格模型新增到場景中

注意事項：
1、MeshLambertMaterial、MeshBasicMaterial 沒有凹凸、法線貼圖屬性

高光網格材質MeshPhongMaterial、標準網格材質MeshStandardMaterial和物理網格材質MeshPhysicalMaterial支援法線貼圖normalMap功能

2、只設置環境光的情況下，沒有辦法檢視到法線貼圖和凹凸貼圖的效果。

學習地址：http://www.webgl3d.cn/Three.js/