和我一起学 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 纹理来控制几何体表面的透明区域，以实现类似玻璃、水、烟雾等材质的效果。

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

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

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