Three.js 法线贴图 normalMap

Question

如果第一次接触 Three.js 法线贴图的概念，可能不太理解法线贴图是什么？有什么用？从哪里来？

相关案例代码可以参考本站的 Three.js 视频教程8.6节。阅读本篇文章之前建议先测试法线贴图的案例代码。

模型的几何体本质上都是由顶点构成，一个模型越复杂，顶点数量越多，也就意味着模型文件的体积越大，模型文件夹过大浏览器端的加载速度自然越慢，用户体验自然越差。这时候可以对模型进行减面，也就是减少模型顶点的数量，一般减面之后的模型称为简模，未减面之前的模型称为精模。

以一个球体几何体为例思考，顶点的数量越少，球体模型的模型曲面的光滑效果越差。只有点数足够多，显示效果才会更好，如果点数过少，视觉上就像一个正多面体。如果想减少模型顶点数量，同时又不影响模型曲面的显示效果，这时候就需要通过3dmax、substance painter等3D美术软件烘培导出法线贴图，烘培导出法线贴图都是3D美术的工作，对于程序员而言不需要深究法线贴图具体怎么得到的，只需要通过Three.js加载减过面的简模，然后配合法线贴图可以获得和精模一样的视觉效果。

关键词

美术相关关键词：简模、精模、法线贴图、3D 美术、次时代，如果你想深入了解法线贴图知识，可以百度相关的美术关键词。

图片 RGB 记录法线 xyz 分量

法线贴图normalMap和普通颜色贴图map一样是公用一套UV坐标，法线贴图通过UV坐标和三维模型几何体外表面建立一一对应的映射关系。

法线贴图通过RGB颜色值表征精模表面的法线信息，RGB分别表示法线的xyz分量。一般美术会对一个精模进行减面，得到一个简模，然后进行UV拆分，通过三维软件进行烘培得到一个法线贴图，法线贴图一般整体呈现为蓝紫色的效果。

大家应该都知道几何体表面的法线可以和光源进行光照计算，简模加上法线贴图在Three.js中就可以渲染出来精模的效果。

通过法线贴图记录几何体表面的几何细节，自然降低了模型文件的大小，提高了加载速度

材质对象 normalMap 属性和 normalScale 属性

法线贴图通过材质对象的 normalMap 属性设置，属性值是Texture对象，通过 normalScale 属性可以调节深浅程度，属性值是二维向量对象Vector2。

var geometry = new THREE.BoxGeometry(100, 100, 100); //立方体
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),
});
var mesh = new THREE.Mesh(geometry, material);

材质支持情况

基础网格材质 MeshBasicMaterial 和 Lambert 网格材质 MeshLambertMaterial 不支持法线贴图normalMap功能，高光网格材质 MeshPhongMaterial、标准网格材质 MeshStandardMaterial 和物理网格材质 MeshPhysicalMaterial 支持法线贴图normalMap功能

协作

至于UV如何拆分，如何绘制简模，如何烘培出法线贴图都需要3D美术通过相应的三维软件烘培导出，一般程序员能够理解法线贴图，会使用即可，不需要去掌握美术的这些技能，虽然不用，为了更好地理解法线贴图，更好的理解美术与程序的协作，如果学习时间充足，去学习下这些美术技能也是有好处的。

学习建议

如果你只是为了应用Three.js加载一个有法线贴图的三维模型，只需要有一个简单的印象即可，如果你想深入法线贴图，可以学习下相关三维软件如何烘培出法线贴图，可以阅读下 three.js-master\src\renderers\shaders\ShaderChunk\normalmap_pars_fragment.glsl 有关法线贴图RGB信息提取转化为法线向量的着色器源码。