和我一起学 Three.js【初级篇】：4. 掌握纹理

💡 本篇文章共 5953 字，最近更新于 2023 年 04 月 19 日。

感谢您一路跟随我来到这里！截止目前为止，我们应该有能力搭建一个 3D 场景，在其中添加各种官方提供的几何体，并通过使用控制器，调整摄影机位置与几何体交互。这一切看起来都还不错，但未免有些单调。所幸本章节以及下一节的内容将让我们的 3D 世界变得丰富多彩。

本章节我们会谈及 Web 3D 世界一个非常常见的概念：「纹理」（Texture），它将会和下一章节的「材质」（Materials）概念一起使我们简单的几何体变成真实世界中我们熟悉的物体！让我们一起展开这趟旅途吧！

0. 系列文章合集

本系列第 6，7，8 章节支持在我的个人公众号「前端乱步」内付费观看，将在全平台文章「点赞数」+「评论数」 >= 500（第 6 章）, 1000（第 7，8 章） 时分别解锁发布。

1. 《和我一起学 Three.js【初级篇】：0. 总论》
2. 《和我一起学 Three.js【初级篇】：1. 搭建 3D 场景》
3. 《和我一起学 Three.js【初级篇】：2. 掌握几何体》
4. 《和我一起学 Three.js【初级篇】：3. 掌握摄影机》
5. 📍 您当前在这里《和我一起学 Three.js【初级篇】：4. 掌握纹理》
6. 《和我一起学 Three.js【初级篇】：5. 掌握材质》
7. 《和我一起学 Three.js【初级篇】：6. 掌握光照》
8. 《和我一起学 Three.js【初级篇】：7. 掌握阴影》
9. 《和我一起学 Three.js【初级篇】：8. 融会贯通》

1. 什么是纹理（Textures）

也许使用纹理（Textures）的另一个名称能更加直观的反映其本质：「贴图」。没错，纹理本身就是一些图片，用来覆盖在我们的几何体或模型的表面，从而使物体具备拟真的效果。

虽然听起来简单，但是别忘了，我们不只是想让物体「看起来」像是某个现实物体，我们还希望它符合物体「在现实中的样子」，我是指在面对不同的光照环境时，物体需要有不同的反应，以及物体需要有其对应的「质感」。这就不是一张图片可以解决的问题了，为此，我们需要有不同类型的图片表达物体的不同属性（例如：哪里透明，哪里应该有金属光泽等等）。还需要了解在 Three.js 的世界中，如何为一个对象加载多张纹理贴图。

让我们先从认识不同的纹理开始：

2. 纹理的种类

🚨 在本章节中，我并不会向您介绍具体「贴图」的方法，因为这涉及「材质」和「光照」等稍后我们要提及的内容。本章节的用意在于让您明白纹理有哪些种类，它们长什么样子，以及在物体上会呈现什么样的效果。

如果您能够成功访问：https://3dtextures.me/ 这个网站，并下载其提供的免费纹理资源，您会发现，其中的一些图片会令人不明所以，它们是不同的纹理类别，有特定的用途：

🔗 图片来源于：https://drive.google.com/drive/folders/1tLmUWv9WocFh88XMqsexdTkMDE6R2ABg

本章节我会使用该纹理进行演示，后续将不再额外标明资源出处。

2.1 反照率纹理（Albedo Texture）

反照率纹理（Albedo Texture）又称「颜色（Color）纹理」，是一种基本的纹理类型，用于模拟物体表面的颜色和反射特性。它是最常用的纹理类型之一，也是创建逼真 3D 场景必不可少的一部分。

💡 在 3D 渲染中，反照率是指物体表面对于不同颜色光线的反射率，通常用一张 RGB 图片来表示。反照率纹理中的每个像素都对应着物体表面上的一个点，这个点的颜色和反射特性可以由纹理像素的颜色值来确定。例如，纹理中的白色像素表示该点表面对所有颜色的光线反射率都很高，黑色像素表示该点表面对所有颜色的光线反射率都很低。

👇 下面的图片是一张反照率纹理：

将反照率纹理应用于一个球体时，会获得这样的效果：

💡 为了演示方便，我设置了强度为 2 的白色环境光以及一束蓝色直射光，并且将粗糙度与金属度设置为 0.8，我想您透露这些只是为了将来您能够实现和我一样的效果，但现在您并不需要知道如何设置。

2.2 高度纹理（Height Texture）

高度纹理（Height Texture）又称为「深度纹理」。在该图像中，每个像素的灰度值被用于表示相应位置的高度或深度。它通常被用于创建几何体的表面细节，例如山峰、岩石、河流等。

通过使用高度纹理，可以在几何体表面添加细节，并模拟光的反射和折射等视觉效果。

👇 下面的图片是一张高度纹理：

在添加高度纹理后，我们的物体将会有明显的凹凸效果：

2.3 透明度纹理（Alpha Texture）

透明度纹理（Alpha Texture）也称为「Alpha 通道纹理」，它是一种特殊的纹理，其中包含了用于控制材质透明度的 Alpha 通道数据。

💡 Alpha 通道是图像中的第四个通道，它表示每个像素的透明度值。在 Alpha 纹理中，Alpha 通道的值被用于控制每个像素的透明度。使用 Alpha 纹理，您可以轻松地创建透明的材质效果。例如，您可以使用 Alpha 纹理来控制几何体表面的透明区域，以实现类似玻璃、水、烟雾等材质的效果。

👇 下面的图片是一张透明度纹理：

但当我们使用透明度纹理并开启透明配置时，我们会得到这样的立方体：

让我们放大球体的一部分，可以看到更明显的透视效果࿱