转载：贝塞尔曲线计算公式

原文地址： https://zhuanlan.zhihu.com/p/33193050

用到贝塞尔曲线公式来计算出顶点，从而生成贝塞尔曲线。

/**
 * 生成四阶贝塞尔曲线定点数据
 * @param p0   起始点  { x : number, y : number, z : number }
 * @param p1   控制点1 { x : number, y : number, z : number }
 * @param p2   控制点2 { x : number, y : number, z : number }
 * @param p3   终止点  { x : number, y : number, z : number }
 * @param num  线条精度
 * @param tick 绘制系数
 * @returns {{points: Array, num: number}}
 */
function create3DBezier(p0, p1, p2, p3, num, tick) {
  let pointMum = num || 100;
  let _tick = tick || 1.0;
  let t = _tick / (pointMum - 1);
  let points = [];
  for (let i = 0; i < pointMum; i++) {
    let point = getBezierNowPoint(p0, p1, p2, p3, i, t);
    points.push(point.x);
    points.push(point.y);
    points.push(point.z);
  }

  return points;
}

/**
 * 四阶贝塞尔曲线公式
 * @param p0
 * @param p1
 * @param p2
 * @param p3
 * @param t
 * @returns {*}
 * @constructor
 */
function Bezier(p0, p1, p2, p3, t) {
  let P0, P1, P2, P3;
  P0 = p0 * (Math.pow((1 - t), 3));
  P1 = 3 * p1 * t * (Math.pow((1 - t), 2));
  P2 = 3 * p2 * Math.pow(t, 2) * (1 - t);
  P3 = p3 * Math.pow(t, 3);

  return P0 + P1 + P2 + P3;
}

/**
 * 获取四阶贝塞尔曲线中指定位置的点坐标
 * @param p0
 * @param p1
 * @param p2
 * @param p3
 * @param num
 * @param tick
 * @returns {{x, y, z}}
 */
function getBezierNowPoint(p0, p1, p2, p3, num, tick) {
  return {
    x : Bezier(p0.x, p1.x, p2.x, p3.x, num * tick),
    y : Bezier(p0.y, p1.y, p2.y, p3.y, num * tick),
    z : Bezier(p0.z, p1.z, p2.z, p3.z, num * tick),
  }
}
如果我们只需要获取整条贝塞尔曲线上所有的顶点数据集，那么我们就需要调用create3DBezier()函数并填入指定参数即可。关于四阶贝塞尔曲线公式等数学知识请自行百度，本人也仅是照着公式将函数敲出来了→_→。

// 传入顶点数据
  let bezierPoint = create3DBezier(
    { x : -0.7,  y : 0,   z : 0 },    // p0
    { x : -0.25, y : 0.5, z : 0 },    // p1
    { x : 0.25,  y : 0.5, z : 0 },    // p2
    { x : 0.7,   y : 0,   z : 0 },    // p3
    20,
    1.0
  );