首页 > Unity3D频道 > 【Unity3D研究院之游戏开发】 > Unity3D研究院之与根据动态的两个轨迹点绘制面详解（二十）
2012
05-06

Unity3D研究院之与根据动态的两个轨迹点绘制面详解（二十）

        大家应该知道3D世界中任何的面都是由三角形绘制完成的，因为任何无规则的集合图形都可以由三角形来组成。比如四边形，无论是正四边形还是无规则四边形都可以由两个三角形拼接而成。结合本文的标题大家仔细想想，如果需要绘制一个动态无规则面其实只需要得到动态的两个轨迹点即可，那么结合下面的图片大家仔细在想想。

Unity3D研究院之与根据动态的两个轨迹点绘制面详解（二十） - 雨松MOMO程序研究院 - 1

（点击图片，查看大图）

        暂时我们先忽略Z轴（这样在平面中看得更清楚），假设Z轴坐标都为0。假设游戏中有两个轨迹点在动态的增加与改变，最后将这两个点改变的轨迹拼接起来就是它们生成的面。如上图所示，第一个点的轨迹是“ 3，4，5，6，7” 第二个点的轨迹是“2，1，10，9，8” 。这两个点的长度是可变的，前提是他们两个的数量必需完全一样。接着，如下图所示，我们将这些点两两相连起来，目前一共形成了8个三角形面（可根据两个动态点的数量而确定整个网格面三角形面的数量）。最后我们将这8个三角形填充上同样的颜色，就可以实现一个完整的立体网格面。

 

Unity3D研究院之与根据动态的两个轨迹点绘制面详解（二十） - 雨松MOMO程序研究院 - 2

（点击图片，查看大图）

         原理很简单，就是这样的我相信大家看到这里大家都能明白，接着我们就学习如何使用代码来实现它。首先创建Unity工程，接着创建一个空的游戏对象，然后给该游戏对象绑定Mesh Filter组件 与 Mesh Renderer组件。

Mesh Filter组件：表示网格面，这个网格面是由我们使用代码将所有三角形拼接起来生成的面。

Mesh Renderer组件：表示表示网格的渲染，可设置一个渲染的材质，它包括贴图与颜色。

       如下图所示，我说说里面比较重要的属性。Mesh Renderer中，Materials下拉列表中可设置网格模型的材质，此时我们设置了一个红色的材质。 Mesh Filter:目前为None，也不用再编辑器中为它赋值，因为这个网格模型我们会在代码中生成并且赋值。在下面就是方刚我们设置红色的材质资源，Shader中设置了贴图的属性，目前是GUI/ TextShader。它表示这个材质的渲染级别在GUI上，就是优先级是最一层的。举个例子无论在这个网格模型的前面绘制多少模型，它永远都会在最前面显示。就这个例子而言它的存在并不是必需的，其实Shader的选项还有很多，可透明、不可透明、镜面、反射等等，后期我会向大家详细道来。

Unity3D研究院之与根据动态的两个轨迹点绘制面详解（二十） - 雨松MOMO程序研究院 - 3

 

OK，现在资源文件都已经准备完毕，下面我们学习如何来绘制一个三角形，从简单的开始。。把下面的代码绑定在摄像机对象当中。

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
using UnityEngine;
using System.Collections.Generic;
using System;
 
public class Test : MonoBehaviour {
 
void Start ()
{
//得到MeshFilter对象，目前是空的。
MeshFilter meshFilter = (MeshFilter)GameObject.Find("face").GetComponent(typeof(MeshFilter));
//得到对应的网格对象
Mesh mesh = meshFilter.mesh;
 
//三角形顶点的坐标数组
Vector3[] vertices = new Vector3[3];
//三角形顶点ID数组
int[] triangles   = new int[3];
 
//三角形三个定点坐标，为了显示清楚忽略Z轴
vertices[0] = new Vector3(0,0,0);
vertices[1] = new Vector3(0,1,0);
vertices[2] = new Vector3(1,0,0);
 
//三角形绘制顶点的数组
triangles[0] =0;
triangles[1] =1;
triangles[2] =2;
 
//注释1
mesh.vertices = vertices;
 
mesh.triangles = triangles;
 
}
 
}
 

          代码中有两个非常重要的概念，就是三角形顶点数组与坐标数组。先说说坐标数组，假设需要绘制一个四边形，此时三角形坐标数组的长度应当是4，它保存着四边形四个顶点的坐标。然后是顶点数组，四边形是由两个三角形组成，然而一个三角形是由3个顶点组成，两个三角形就应当是6个顶点组成，无论多少个三角形它们的结构都应当是以此类推。

注解1：这里是将模型的顶点数组与坐标数组赋值给网格模型，还记得刚刚在创建Mesh Filter时，当时没有在编辑器中给网格模型赋值，实际上代码走到这里就会重新为网格模型MeshFilter赋值，接着我们在代码中绘制的三角形就会显示在屏幕当中。

如图所示，三角形已经绘制在屏幕当中。 图中数组 0 1 2 表示该三角形的三个顶点的ID。这个ID对应代码中对应vertices数组索引顶点的坐标。

 

Unity3D研究院之与根据动态的两个轨迹点绘制面详解（二十） - 雨松MOMO程序研究院 - 4

 

下面我们修改一下代码，让屏幕中一共绘制4个三角形。

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
using UnityEngine;
using System.Collections.Generic;
using System;
 
public class Test : MonoBehaviour {
 
    //网格模型顶点数量
private int VERTICES_COUNT = 6;
 
void Start ()
{
//得到MeshFilter对象，目前是空的。
MeshFilter meshFilter = (MeshFilter)GameObject.Find("face").GetComponent(typeof(MeshFilter));
//得到对应的网格对象
Mesh mesh = meshFilter.mesh;
 
//三角形顶点的坐标数组
Vector3[] vertices = new Vector3[VERTICES_COUNT];
 
//得到三角形的数量
int triangles_count = VERTICES_COUNT - 2;
 
//三角形顶点ID数组
int[] triangles   = new int[triangles_count *3];
 
//三角形三个定点坐标，为了显示清楚忽略Z轴
vertices[0] = new Vector3(0,0,0);
vertices[1] = new Vector3(0,1,0);
vertices[2] = new Vector3(1,0,0);
vertices[3] = new Vector3(1,1,0);
vertices[4] = new Vector3(2,0,0);
vertices[5] = new Vector3(2,1,0);
 
//三角形绘制顶点的数组
triangles[0] =0;
triangles[1] =1;
triangles[2] =2;
triangles[3] =3;
triangles[4] =2;
triangles[5] =1;
 
triangles[6] =2;
triangles[7] =3;
triangles[8] =4;
 
triangles[9] =5;
triangles[10] =4;
triangles[11] =3;
 
     //绘制三角形
mesh.vertices = vertices;
 
mesh.triangles = triangles;
 
}
 
}
 

 

         已知模型的顶点数量，顶点数量减去2就是三角形的数量，三角形的数量在乘以3就是三角形顶点的数量。根据这个公式计算得知，上述代码中共绘制4个三角形，顶点坐标数组应当是6，顶点ID数组应当是12。多个三角形在顶点ID数组中排列方式比较特殊，大家需要仔细记录一下不然无法绘制出正确的三角形。如下图所示，由于我这边没有合适的3D坐标点，就用正三角形拼接出一个正四边形，这个四边形是由6个顶点4个小三角形组成 ，看到这里思路清晰的朋友应当明了无规则四边形的绘制原理和它完全一样。只需要传入适当的3D坐标点即可。

 

Unity3D研究院之与根据动态的两个轨迹点绘制面详解（二十） - 雨松MOMO程序研究院 - 5

 

          根据上面的逻辑，我们修改一下算法。假设三角形的顶点坐标为任意数量，我们需要更根据顶点坐标数量来计算对应顶点ID的数组内容。在for循环中start =0 与end =3的含义是绘制从顶点坐标数组中索引为0的顶点开始绘制到数组索引为3的顶点，也就说是这里从0到3绘制了3个三角形。

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
using UnityEngine;
using System.Collections.Generic;
using System;
 
public class Test : MonoBehaviour {
 
    //网格模型顶点数量
private int VERTICES_COUNT = 6;
 
void Start ()
{
//得到MeshFilter对象，目前是空的。
MeshFilter meshFilter = (MeshFilter)GameObject.Find("face").GetComponent(typeof(MeshFilter));
//得到对应的网格对象
Mesh mesh = meshFilter.mesh;
 
//三角形顶点的坐标数组
Vector3[] vertices = new Vector3[VERTICES_COUNT];
 
//得到三角形的数量
int triangles_count = VERTICES_COUNT - 2;
 
//三角形顶点ID数组
int[] triangles   = new int[triangles_count *3];
 
//三角形三个定点坐标，为了显示清楚忽略Z轴
vertices[0] = new Vector3(0,0,0);
vertices[1] = new Vector3(0,1,0);
vertices[2] = new Vector3(1,0,0);
vertices[3] = new Vector3(1,1,0);
vertices[4] = new Vector3(2,0,0);
vertices[5] = new Vector3(2,1,0);
 
     //绘制三角形
mesh.vertices = vertices;
 
//起始三角形顶点
int start = 0;
 
//结束三角形的顶点
int end = 3;
 
for(int i = start; i <end; i++)
{
for(int j = 0; j < 3; j++)
{
if( i%2 ==0)
{
triangles[3*i + j] = i +j;
}else
{
triangles[3*i + j] = i + 2-j;
}
 
}
}
 
mesh.triangles = triangles;
}
}
 

 

      如下图所示，根据上面的逻辑算法，共绘制了3个三角形，并且顶点坐标ID是由 0 到3 。 说到这里请大家仔细想想本文的标题内容，其实两个动态轨迹的点就是在维护triangles顶点坐标数组。triangles[0]、triangles[2]、triangles[4]……表示一个轨迹点的值，triangles[1]、triangles[3]、triangles[5]……就表示另一个轨迹点的值，最终将它们通过上面的算法将三角形面连接起来那么就是动态的两个点轨迹绘制面了。

Unity3D研究院之与根据动态的两个轨迹点绘制面详解（二十） - 雨松MOMO程序研究院 - 6

 

         Unity3D其实非常好玩，上手虽然很简单，但是想深入其实并没有那么容易，今天这篇文章的思路已经写完，如果还是没能明白的朋友请仔细揣摩三角形与四边形之间的却别，哇咔咔，已经不早了我也得睡觉了，明天还得上班 GOGOGOGOGO加油～希望我们大家可以共同学习，共同进步。

最后编辑：
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

您可能还会对这些文章感兴趣！

《Unity3D研究院之与根据动态的两个轨迹点绘制面详解（二十）》有 27 条评论

  1. 啦猛 说：
    2018 年 1 月 27 日下午 2:12

    循环赋值 那里 好晕
    求解…！

    回复
  2. 于浦 说：
    2016 年 1 月 15 日上午 10:32

    雨松大大，我想问下怎么绘制管道状的立体曲线呢？

    回复
  3. 姜明杰 说：
    2015 年 10 月 27 日下午 2:50

    雨松大大，您好！如果绘制凹多边形，顶点该怎样去找？[可怜]

    回复
  4. Long5 说：
    2015 年 5 月 4 日上午 9:34

    写的太好了，看了很有帮助

    回复
  5. 偏不说啊 说：
    2014 年 9 月 18 日下午 11:27

    MO爷我看懂了 但是最后那个动态算出索引的循环还是好难理解。。

    回复
  6. JuniorMeng 说：
    2013 年 11 月 25 日上午 6:44

    松哥，，如何用矩阵优化拖尾呀？

    回复
  7. Jason 说：
    2013 年 8 月 2 日上午 7:41

    感謝您的分享~~~有些問題想請教下~上述不規則的面的繪製有幾個問題:1.兩兩連線這部分不是很清楚什麼意思是1與34配對還是~2.要由兩個動態軌跡點~那我想要用滑鼠拖曳過程的軌跡點形成面~這個該怎麼做呢@@

    回复
  8. 落花无意 说：
    2013 年 5 月 11 日上午 6:08

    雨松老师，我按照你上面的做法出现提示：Shader wants texture coordinates, but the mesh face doesn’t have them

    回复
  9. 好的留下 说：
    2013 年 4 月 23 日上午 10:01

    雨松老师！我想问下其他材质可以改优先渲染级别吗？ 我想要一个和GUI/ TextShader优先级一样的Particle Additive 材质！

    回复
  10. sevenloo 说：
    2013 年 4 月 10 日上午 1:18

    MOMO 我是按照你上面写的做的，就是不能显示图形出来，总是报这个错 ：NullReferenceException test.Start () (at Assets/Scripts/test.cs:34)

    回复
  11. xcm 说：
    2013 年 3 月 16 日下午 4:15

    //得到MeshFilter对象，目前是空的。这句话最后的 句号 不能复制,否则可能引起错误..呵呵

    回复
  12. 欧宇龙 说：
    2013 年 2 月 27 日上午 1:05

    .GetComponent(typeof(MeshFilter));这个代码改为用泛型的那个嘛 舒服多了

    回复
  13. savagehao 说：
    2012 年 6 月 18 日上午 3:04

    楼主你好，请教一下，给定一个点的温度，显示一个温度渐变的图，http://game.ceeger.com/forum/read.php?tid=2225#info这里的图，该怎么实现啊？

    回复
  14. savagehao 说：
    2012 年 6 月 18 日上午 3:04

    楼主你好，请教一下，给定一个点的温度，显示一个温度渐变的图，http://game.ceeger.com/forum/read.php?tid=2225#info这里的图，该怎么实现啊？

    回复
  15. 失落的宇宙216 说：
    2012 年 5 月 9 日上午 4:53

    支持鱼松、、 加油！！！！！

    回复
  16. 酷_莫名简单 说：
    2012 年 5 月 7 日上午 8:24

    小马来支持咯，一起努力！

    回复
  18. bug 说：
    2012 年 5 月 7 日上午 3:20

    加油~吼吼

    回复

留下一个回复

你的email不会被公开。