Threejs 紋理貼圖2--凹凸貼圖、法線貼圖

一個復雜的曲面模型，往往模型頂點數量比較多，模型文件比較大，為了降低模型文件大小，法線貼圖.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/