前言

上节文章介绍了如何将画布与视频作为贴图，在贴图时用的都是ma贴图方式，当模型复杂时map效果可能就没有那么好，这时候我们需要新的贴图方式，本节我们就来看一下凹凸贴图与法线贴图。

法线normalMap

normalMap是MeshPhongMaterial网格材质的一种贴图方式，法线贴图不会改成曲线的形状，它只会改变颜色照亮方式。法线贴图原理是根据物体表面的像素来存储法线信息，来增加模型的细节。normal会从高模型得到信息然后应用低模型中，这样模型不需要增加更多的顶点，相对于模型文件大小就会降低。简单来说就像人脸开了美颜效果。法线贴图有两种：

标准：标准法线贴图是基于RGB纹理，该方式产生的信息便于计算，存储简单，其也能够轻松地压缩传输。
object space：object space贴图是基于XYZ的坐标，它能够展示表面的细节，并且显示形状，可以用来展示高质量贴图。下面我们用法线贴图做一个小案例，我们需要设置模型、灯光等：

const textureLoader = new THREE.TextureLoader();
const woodTexture = textureLoader.load('./textures/wood.jpg');
const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({
  normalMap: woodTexture,
  normalScale: new THREE.Vector2(0.5, 0.5)
});
const directionalLight = new THREE.DirectionalLight();
directionalLight.position.set(0, -10, 0);
scene.add(directionalLight);
material.needsUpdate = true;
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

DQM{71%I(AAYM9`W$CCI95T.png

凹凸贴图bumpMap

bumpMap也只是网格材质的属性，它的作用跟法线贴图相似，不过并没有法线贴图表述的那么丰富。它的本质是使用一张灰度纹理，不同的灰度代表着不同的高度。不同的灰度值在光照下会产生不同的效果，这样就得到了凹凸贴图的效果。凹凸贴图能够增加物体的真实感，我们把上述例子中的法线贴图变成凹凸贴图。

   const material = new THREE.MeshPhongMaterial({
  bumpMap: woodTexture,
  bumpScale: 0.5
});

QQ图片20230429233409.png

总结

法线贴图能将贴图精美化，凹凸贴图能让贴图更加真实，这两个贴图属性是MeshPhongMaterial材质的专属，其他材质没有这两个属性。

three学习（二十二）——法线与凹凸贴图

前言

法线normalMap

凹凸贴图bumpMap

总结