大家應該知道3D世界中任何的面都是由三角形繪製完成的，因為任何無規則的集合圖形都可以由三角形來組成。比如四邊形，無論是正四邊形還是無規則四邊形都可以由兩個三角形拼接而成。結合本文的標題大家仔細想想，如果需要繪製一個動態無規則面其實只需要得到動態的兩個軌跡點即可，那麼結合下面的圖片大家仔細在想想。

（點選圖片，檢視大圖）

        暫時我們先忽略Z軸（這樣在平面中看得更清楚），假設Z軸座標都為0。假設遊戲中有兩個軌跡點在動態的增加與改變，最後將這兩個點改變的軌跡拼接起來就是它們生成的面。如上圖所示，第一個點的軌跡是“ 3，4，5，6，7” 第二個點的軌跡是“2，1，10，9，8” 。這兩個點的長度是可變的，前提是他們兩個的數量必需完全一樣。接著，如下圖所示，我們將這些點兩兩相連起來，目前一共形成了8個三角形面（可根據兩個動態點的數量而確定整個網格面三角形面的數量）。最後我們將這8個三角形填充上同樣的顏色，就可以實現一個完整的立體網格面。

（點選圖片，檢視大圖）

         原理很簡單，就是這樣的我相信大家看到這裡大家都能明白，接著我們就學習如何使用程式碼來實現它。首先建立Unity工程，接著建立一個空的遊戲物件，然後給該遊戲物件繫結Mesh Filter元件 與 Mesh Renderer元件。

Mesh Filter元件：表示網格面，這個網格面是由我們使用程式碼將所有三角形拼接起來生成的面。

Mesh Renderer元件：表示表示網格的渲染，可設定一個渲染的材質，它包括貼圖與顏色。

       如下圖所示，我說說裡面比較重要的屬性。Mesh Renderer中，Materials下拉列表中可設定網格模型的材質，此時我們設定了一個紅色的材質。 Mesh Filter:目前為None，也不用再編輯器中為它賦值，因為這個網格模型我們會在程式碼中生成並且賦值。在下面就是方剛我們設定紅色的材質資源，Shader中設定了貼圖的屬性，目前是GUI/ TextShader。它表示這個材質的渲染級別在GUI上，就是優先順序是最一層的。舉個例子無論在這個網格模型的前面繪製多少模型，它永遠都會在最前面顯示。就這個例子而言它的存在並不是必需的，其實Shader的選項還有很多，可透明、不可透明、鏡面、反射等等，後期我會向大家詳細道來。

 OK，現在資原始檔都已經準備完畢，下面我們學習如何來繪製一個三角形，從簡單的開始。。把下面的程式碼繫結在攝像機物件當中。

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陣列索引頂點的座標。

 下面我們修改一下程式碼，讓螢幕中一共繪製4個三角形。

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座標點即可。

          根據上面的邏輯，我們修改一下演算法。假設三角形的頂點座標為任意數量，我們需要更根據頂點座標數量來計算對應頂點ID的陣列內容。在for迴圈中start =0 與end =3的含義是繪製從頂點座標陣列中索引為0的頂點開始繪製到陣列索引為3的頂點，也就說是這裡從0到3繪製了3個三角形。

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]……就表示另一個軌跡點的值，最終將它們通過上面的演算法將三角形面連線起來那麼就是動態的兩個點軌跡繪製面了。