【游戏开发进阶】玩转贝塞尔曲线，教你在Unity中画Bezier贝塞尔曲线（二阶、三阶），手把手教你推导公式

文章目录

- - 一、前言
  - 二、最终效果
  - - 1、Unity演示效果
    - 2、Unity Demo源码工程
  - 三、贝塞尔曲线原理
  - - 1、什么是阶（次）
    - 2、一阶贝塞尔曲线（一元一次函数，线性函数）
    - 3、二阶贝塞尔曲线（一元二次函数）
    - 4、三阶贝塞尔曲线
    - 5、测试50阶贝塞尔曲线
  - 四、贝塞尔曲线本地实验
  - - 1、工程地址
    - 2、运行
  - 五、贝塞尔曲线在线玩
  - - 1、贝塞尔曲线路径运动模拟
    - 2、贝塞尔曲线画线练习
    - 3、三次贝塞尔曲线缓动演示（css）
    - 4、HTML5贝塞尔曲线代码生成器（canvas）
  - 六、Unity实现贝塞尔曲线
  - - 1、贝塞尔曲线C#代码：BezierCurve.cs
    - 2、使用LineRenderer绘制曲线
    - 3、制作贝塞尔曲线预设
    - 4、更新LineRenderer点坐标：LineRendererCtrler.cs
    - 5、鼠标控制控制点：PointHandle.cs
    - 6、UI交互：UICtrler.cs
    - 7、运行测试
  - 七、结束语

一、前言

点关注不迷路，持续输出干货文章。
嗨，大家好，我是新发。
有同学私信我，问我能否出一个三阶贝塞尔曲线的教程。

2、Unity Demo源码工程

1、什么是阶（次）

我们说的三阶贝塞尔曲线，三阶是什么意思br> 两种理解：
1、贝塞尔曲线，它的背后是一个数学函数，阶可以理解为次方的意思，我们也可以把三阶贝塞尔曲线叫做三次贝塞尔曲线。
2、二阶贝塞尔曲线就是在一阶贝塞尔曲线的基础上再求一次一阶贝塞尔曲线；三阶贝塞尔曲线就是在二阶贝塞尔曲线的基础上再求一次一阶贝塞尔曲线；以此类推。

我觉得第二种理解更准确一点。

2、一阶贝塞尔曲线（一元一次函数，线性函数）

我们先来看看 一阶贝塞尔曲线 的公式：
给定点P₁ P₂，函数推导式如下：

一阶贝塞尔曲线公式：B(t) = P₁ + (P₂ ? P₁)t = P₁(1?t)+ P₂t, t∈[0,1]

动态效果如下：

注：应该会有同学想问下图这个动态效果是用什么软件做的，是使用js写的，感兴趣的同学可以跳到文章第四节：贝塞尔曲线本地实验

我们可以拆解一下这个过程，从P₁到P₂是一个一阶贝塞尔曲线过程，从P₂到P₃也是一个一阶贝塞尔曲线过程，这两个过程同时进行，得到一条新的线段MN。

写到这里了，我就顺便推导一下好了，先标一下点，如下：

四、贝塞尔曲线本地实验

1、工程地址

上文中我演示的贝塞尔曲线动态效果，是通过的一个开源项目进行演示的。
源地址：https://github.com/Aaaaaaaty/bezierMaker.js

我在它的基础上做了一些改进，上传到了，感兴趣的可以下载我的版本：
地址：https://codechina.csdn.net/linxinfa/beziermaker

2、贝塞尔曲线画线练习

地址：https://bezier.method.ac/

4、HTML5贝塞尔曲线代码生成器（canvas）

地址：http://wx.karlew.com/canvas/bezier/

// BezierCurve.csusing UnityEngine;/// 
/// 贝塞尔曲线/// 
[ExecuteInEditMode]public class BezierCurve : MonoBehaviour{    /// 
    /// 控制点（包括起始点和终止点）    /// 
    [SerializeField]    Transform[] points;    /// 
    /// 精确度    /// 
    [SerializeField]    int accuracy = 20;    void Update()    {// 绘制贝塞尔曲线Vector3 prev_pos = points[0].position;for (int i = 0; i  accuracy; ++i){    Vector3 to = formula(i / (float)accuracy);    Debug.DrawLine(prev_pos, to);    prev_pos = to;}    }    void OnDrawGizmos()    {Gizmos.color = Color.white;// 绘制控制点（包括起始点和终止点）for (int i = 0; i  points.Length; ++i){    if (i  points.Length - 1)    { if (4 == points.Length && i == 1) {continue; } Vector3 current = points[i].position; Vector3 next = points[i + 1].position;  Gizmos.DrawLine(current, next);    }}    }    /// 
    /// 贝塞尔时间公式（二阶、三阶）    /// 
    /// 时间参数，范围0~1    ///     public Vector3 formula(float t)    {switch(points.Length){    case 3: return quardaticBezier(t);    case 4: return cubicBezier(t);}return Vector3.zero;    }    /// 
    /// 一阶贝塞尔    /// 
    /// 时间参数，范围0~1    ///     public Vector3 lineBezier(float t)    {Vector3 a = points[0].position;Vector3 b = points[1].position;return a + (b - a) * t;    }    /// 
    /// 二阶贝塞尔    /// 

                                                        声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！