天天看點

貝塞爾曲線繪制原理& unity 3d實作繪制貝塞爾曲線

貝塞爾曲線是一種繪制曲線的方法,它的原理很簡單:

以二階貝塞爾曲線為例

貝塞爾曲線繪制原理& unity 3d實作繪制貝塞爾曲線

如圖,在p0,p1之間移動着一個點,我們先稱之為a0,同樣在p1,p2之間移動着一個點,我們稱之為a1。他們需要滿足的條件是這樣的,在移動中,保證線段p0a0:p0p1=p1a1:p1p2=X

,這個比值X是從0到1逐漸變化的。

然後我們連接配接a0,a1,線上段a0a1上有一點b0,我們同樣保證a0b0:a0a1=X;最後X從0到1變化的過程就是如圖所顯示的樣子。這就是貝塞爾曲線。簡單吧!

相對于更高階的,原理一樣,如果你有時間有耐心,函數很容易寫出來的,這裡隻用二階作為例子。

二階函數點的位置可以這樣計算

a0=p0+(p1-p0)*X;

a1=p1+(p2-p1)*X;

b0=a0+(a1-a0)*X;

這樣我們根據p0,p1,p2的坐标就求出b0的坐标,b0的運動軌迹就是貝塞爾曲線。

三個公式最後得出:

b0=X*X*(p0+p2-2*p1)+2*X*(p1-p0)+p0

知道原理,接下來我們用unity3d實作起來就容易了。

代碼如下:将腳本賦予一個空gameobject,并将建立的三個cube分别拖入對應空缺物體,運作遊戲拖動物體就能看到貝塞爾曲線的變化。注意:這裡隻能在場景中拖動,不能在遊戲視圖中拖動,因為

Debug.DrawLine方法是隻能在場景中顯示的。

using UnityEngine;
using System.Collections;

public class draw : MonoBehaviour {
   public GameObject v0, v1, a0;
    LineRenderer lineRenderer;
    //Vector3 v0, v1;//頂點
    //Vector3 a0;
    float jianxi = 0.05f;//繪制的0-1的間隙 越小曲線越接近曲線,

    // Use this for initialization
    void Start ()
    {
      
    }
	
	// Update is called once per frame
	void Update () {
        for(float i=0;i<1;i+=jianxi)
        {
            Debug.DrawLine(po(i, v0, v1, a0), po(i + jianxi, v0, v1, a0), Color.red);
            Debug.DrawLine(v0.transform.position,a0.transform.position, Color.green);
            Debug.DrawLine(a0.transform.position, v1.transform.position, Color.green);
        }
    }
       
    private Vector3 po(float t,GameObject v0, GameObject v1, GameObject a0)//根據目前時間t 傳回路徑  其中v0為起點 v1為終點 a為中間點 
    {
        Vector3 a;
        a.x = t * t * (v1.transform.position.x - 2 * a0.transform.position.x + v0.transform.position.x) + v0.transform.position.x + 2 * t * (a0.transform.position.x - v0.transform.position.x);//公式為B(t)=(1-t)^2*v0+2*t*(1-t)*a0+t*t*v1 其中v0為起點 v1為終點 a為中間點 
        a.y = t * t * (v1.transform.position.y - 2 * a0.transform.position.y + v0.transform.position.y) + v0.transform.position.y + 2 * t * (a0.transform.position.y - v0.transform.position.y);
        a.z = t * t * (v1.transform.position.z - 2 * a0.transform.position.z + v0.transform.position.z) + v0.transform.position.z + 2 * t * (a0.transform.position.z - v0.transform.position.z);
        return a;
    }
}
           
貝塞爾曲線繪制原理&amp; unity 3d實作繪制貝塞爾曲線

unity3d項目資源可以點選 這裡 下載下傳