three.js - 置换贴图（displacementMap）、凹凸贴图（bumpMap）、法线贴图（normalMap）、金属贴图（metalnessMap）、粗糙贴图（.roughnessMa）

这就是个灰度图

瞅瞅下面的贴图们，加深一下印象吧

说一下灰度图

在灰度图中，

• 黑色：代表最低的深度（或最低的置换）

• 白色：代表最高的深度（或最高的置换）

• 中间的灰度值，则代表不同程度的凹凸

---

置换贴图（displacementMap）

置换贴图：displacementMap，

• 置换贴图，通常使用灰度图作为输入，来模拟表面的凹凸效果。

• 置换贴图，会实际修改物体的几何形状，通过移动顶点来创建凹凸效果，

• 置换贴图这种效果，通常是：让点的位置，沿面法线移动一个贴图中定义的距离。

另外 置换贴图需要额外注意，要设置plane的长宽的细分

* 创建平面
参数一、二：是平面的长宽；参数三、四：是置换贴图设置的长宽的细分(`长宽都细分成200个顶点`)
const planeGeometry = new THREE.PlaneGeometry(1, 1, 200, 200)

// `MeshPhongMaterial`材质，不加环境光的话，就是黑乎乎的啥也看不见
const planeMaterial_1 = new THREE.MeshPhongMaterial({
	map: texture,
	transparent: true, // 设置是否透明
	specularMap: specularTexture,
	aoMap: aoTexture // 环境光遮蔽贴图
	normalMap: normalTexture, // 法线贴图
	// bumpMap: dispTexture, // 凹凸贴图
	displacementMap: dispTexture, `置换贴图（要设置的长宽的细分）`
	displacementScale: 0.02, // 置换的程度
})

---

凹凸贴图（bumpMap）

凹凸贴图：bumpMap

• 凹凸贴图，使用灰度图来模拟表面的凹凸效果，

  但是，它并不改变物体的实际几何形状，

  而是，它通过修改表面的法线向量，来产生视觉上的凹凸感。

• 凹凸贴图，是一种更轻量级的技术，因为它不需要修改物体的几何形状。

  因此，它在性能上通常比置换贴图更优。

• 凹凸实际上不会影响对象的几何形状，只影响光照。如果定义了法线贴图，则将忽略该贴图。

---

置换、凹凸 做一下对比

• 置换贴图、凹凸贴图，都使用灰度图作为输入，来模拟表面的凹凸效果。

• 置换贴图，通过，实际修改物体的几何形状来创建凹凸效果
  凹凸贴图，通过，修改表面的法线向量来产生视觉上的凹凸感

• 置换贴图，通常需要更多的计算资源，而凹凸贴图在性能上更优

---

法线贴图（normalMap）

• 法线贴图，用于模拟物体表面微小凹凸细节的高度信息的技术

• 法线贴图，包含了表面法线方向的信息，可以让光照在物体表面产生更加生动的变化和阴影效果，从而增强物体表面的真实感、立体感。

• 法线贴图，不会改变曲面的实际形状，只会改变光照。

• 渲染效果：在渲染场景时，光照效果会根据法线贴图中的法线信息在物体表面产生细微的变化，从而使得物体表面的凹凸细节更加清晰和真实

这种就是 法线贴图

---

金属贴图、粗糙贴图

金属贴图：`metalnessMap` 和 粗糙贴图：`roughnessMap`，是用于模拟物体表面属性的两种重要贴图技术，

这两种贴图，通常与基于物理的渲染（PBR）材质（如：`MeshStandardMaterial`）一起使用，以创建更真实和逼真的3D渲染效果。

• 金属贴图metalnessMap

1、定义：金属贴图，用于定义模型表面的金属度，即：材质像金属的程度

2、贴图原理：
	金属贴图，通常使用'灰度图像'，
	其中，
	'白色'：表示，完全金属质感的区域，
	'黑色'：表示，非金属质感的区域，
	'灰度值'：则表示不同程度的金属质感，

3、使用方式：通过为`MeshStandardMaterial`的`metalnessMap`属性提供一个纹理贴图，可以控制模型表面不同区域的金属度。

• 粗糙贴图roughnessMap

1、粗糙贴图，用于定义模型表面的粗糙程度，即：表面的光滑或粗糙程度。

2、贴图原理：
	粗糙贴图，通常使用'灰度图像'，
	其中，
	'白色'：表示，非常光滑的表面，
	'黑色'：表示，非常粗糙的表面，
	'灰度值'：则表示不同程度的粗糙度，

3、使用方式：通过为`MeshStandardMaterial`的`roughnessMap`属性提供一个纹理贴图，可以控制模型表面不同区域的粗糙度。