本文详细介绍了如何在Unity中为一个Cube对象正确应用纹理贴图，包括理解纹理坐标的作用及其与3D模型的关系，并通过代码展示了如何计算并设置正确的纹理坐标。
没有看上一篇文章的同学建议先看一下，本文是应
_苏双成
同学留言，来填一下上一篇文章的坑
帮你理清Unity是如何创建一个Cube的
在上一篇文章中，我们虽然成功创建出来了一个属于自己的Cube对象，但是，如果手动拖上一个自带纹理的材质球你会惊讶的发现，纹理并不会绘制在我们的立方体上，主要原因就是因为我们没有给这个立方体的纹理uv坐标赋值，所以默认坐标都是0，那么自然纹理就不会绘制在我们的立方体上了，要想让纹理正常绘制，我们就需要计算好纹理坐标，告诉GPU我们要渲染纹理的地方到底在哪。那么今天，我就来带大家理一遍什么是纹理，什么是纹理坐标。
纹理
一般情况下，纹理就是美术同学们提供的图片，这张图片主要是用来展示模型外观，比如人物的皮肤，足球的花纹，地板的纹理，也有人叫这种图片为纹理贴图，实际上纹理贴图就是计算机根据提供的纹理坐标，将这张图片贴在你的模型上。
纹理坐标
先放一张上一篇文章的截图 看过上一篇文章的同学应该还记得，我们绘制一个3D物体，需要的两个要素vertices、triangles，也就是顶点和三角形，顶点用来确定立方体的四个顶点，三角形用来组成3D物体的表面mesh，这次我们就需要第三个要素了，uv，也就是纹理坐标，在给uv坐标赋值之前，我们先了解一下纹理贴图坐标系。
纹理贴图坐标系
假设我们现在有一张图片如下 在纹理坐标系下如图(以下简称uv坐标系) 了解了什么是uv坐标，我们先来尝试填入一组对应上一篇8个顶点的uv坐标看看会发生什么。 敲入如下代码： 运行后看到立方体的外观如下： 我只截了一张图，如果我们拖动视角会发现，只有顶部和底部的面被贴上了贴图，这是因为在上一篇中，我们并没有考虑纹理坐标的因素，而只是为了创建一个3D物体，所以顶点我们只用了8个足够，但是如果要给3D物体上贴图，由于uv坐标的数组长度要跟顶点坐标数组的长度相同并且是一一对应的关系，那么8个顶点就不够了，8个顶点对应8个uv坐标点，那么能确定并绘制两个面的贴图，也就出现了我们上面出现的问题，那么要解决这个问题的方法也很简单，就是补齐所有面的uv坐标，正方体是六个面，每个面四个点，总共也就需要uv坐标24个，那么我们只需要再添加16个顶点坐标，并对应添加上这16个顶点坐标所对应的uv坐标即可。
补齐uv坐标
借用一下上一篇的图 代码中的8个点目前对应图中的数字分别是1 2 3 4 和 5 6 7 8，也就是底面和顶面。那么我们要补齐的是前后和左右四个面。
//修改上一篇文章的顶点创建方法
private
void
GenerateVerticesRightNow
(
)
{
//上次的八个顶点
var
dot1
=
new
Vector3
(
0
,
0
,
0
)
;
var
dot2
=
new
Vector3
(
1
,
0
,
0
)
;
var
dot3
=
new
Vector3
(
1
,
0
,
1
)
;
var
dot4
=
new
Vector3
(
0
,
0
,
1
)
;
var
dot5
=
new
Vector3
(
0
,
1
,
0
)
;
var
dot6
=
new
Vector3
(
1
,
1
,
0
)
;
var
dot7
=
new
Vector3
(
1
,
1
,
1
)
;
var
dot8
=
new
Vector3
(
0
,
1
,
1
)
;
vertices
=
new
[
]
{
//底面
dot1
,
dot4
,
dot3
,
dot2
,
//背面
dot4
,
dot8
,
dot7
,
dot3
,
//顶面
dot8
,
dot5
,
dot6
,
dot7
,
//正面
dot5
,
dot1
,
dot2
,
dot6
,
//左面
dot5
,
dot8
,
dot4
,
dot1
,
//右面
dot2
,
dot3
,
dot7
,
dot6
,
}
;
uvs
=
new
Vector2
[
24
]
;
//用循环给六个面贴上纹理贴图
for
(
int
i
=
0
;
i
<
24
;
i
+=
4
)
{
uvs
[
i
]
=
new
Vector2
(
0
,
0
)
;
uvs
[
i
+
1
]
=
new
Vector2
(
1
,
0
)
;
uvs
[
i
+
2
]
=
new
Vector2
(
1
,
1
)
;
uvs
[
i
+
3
]
=
new
Vector2
(
0
,
1
)
;
}
mesh
.
vertices
=
vertices
;
mesh
.
uv
=
uvs
;
}
记得顶点变化了，对应的三角形索引也要一起变化
mesh
.
triangles
=
new
[
]
{
0
,
2
,
1
,
//底面三角形1
0
,
3
,
2
,
//底面三角形2
4
,
6
,
5
,
//背面三角形1
4
,
7
,
6
,
//背面三角形2
8
,
10
,
9
,
//顶面三角形1
8
,
11
,
10
,
//顶面三角形2
12
,
14
,
13
,
//正面三角形1
12
,
15
,
14
,
//正面三角形2
16
,
18
,
17
,
//左面三角形1
16
,
19
,
18
,
//左面三角形2
20
,
22
,
21
,
//右面三角形1
20
,
23
,
22
//右面三角形2
}
;
最终效果： 最后提一下法线，法线就是用来进行光照计算的，根据表面的法线方向，可以计算出这个面的明暗程度，这块我们用自带的法线计算看看效果。 代码如图： 加了法线后的Cube效果： 对比上面那个没加法线的是不是效果明显好很多啦？ 如果不嫌麻烦，你可以手动给每个顶点加一个法线，也许你会有意想不到的收获哦！今天就写到这里了，跟朋友联机战魂铭人去了！
扫一扫
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
