前言

现在生活中很多物体都是不规则的曲线，如果我们想要要渲染不规则的曲线就需要用到样条、贝塞尔曲线构造函数，本节就来学习一下。

样条曲线

样条曲线用来渲染出一条光滑的曲线，有二维与三维两种对象：

SplineCurve：根据特定的点渲染出一条光滑的二维曲线，构造函数如下：

   SplineCurve( points : Array )
   //points：表述点位置的数组，Vector2
 const geometry = new THREE.BufferGeometry();
const curve = new THREE.SplineCurve([
  new THREE.Vector2(-5, 0),
  new THREE.Vector2(-2, 2),
  new THREE.Vector2(1, 1)
]);
const points = curve.getPoints(50);
geometry.setFromPoints(points);
const material = new THREE.LineBasicMaterial({
  color: 0x8888
});
const line = new THREE.Line(geometry, material);
scene.add(line);

QQ图片20230421225011.png

这些点之所以能创造出光滑的曲线是通过Interpolations.js计算得到的，感兴趣的大家可以看一看。

CatmullRomCurve3：渲染出光滑的三维曲线，用法跟SplineCureve一样，点的坐标变成了Vector3。 CatmullRomCurve3( points, closed , curveType, tension)
-points 点坐标数组。
-closed 是否闭合默认false。
-curveType 曲线类型，属性值为centripetal、chordal、catmullrom，默认为centripetal。
-tension 当类型为catmullrom时定义曲线张力默认0.5。

  const curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-5, 0,0),
  new THREE.Vector3(-2, 2,1),
  new THREE.Vector3(1, 1,3)
]);

QQ图片20230421225219.png

贝赛尔曲线

贝赛尔曲线跟样条曲线用法差不多，简单来说贝塞尔曲线比样条曲线多了一个控制点。贝塞尔曲线同样分为二维与三维，因为有控制点它还有二次与三次的区分。

QuadraticBezierCurve：二维二次贝赛尔曲线，由起点、终点、控制点构成。控制点不在曲线上，曲线会向控制点凸起，就像在控制点用吸星大法把起点终点构成的直线吸起来。
QuadraticBezierCurve：三维三次贝塞尔曲线，跟二维相同，区别在于点坐标是Vector3的。
CubicBezierCurve：二维三次贝塞尔曲线，由起点、终点、两个控制点控制。二次与三次的区别在于控制点的个数。
CubicBezierCurve3：三维三次贝塞尔曲线，坐标为Vector3。各自构造函数如下： QuadraticBezierCurve(起点，控制点，终点)；
QuadraticBezierCurve3(起，控制，终)；
CubicBezierCurve(起，控制1，控制2，终)；
CubicBezierCurve3(起，控制1，控制2，终)

   const curve = new THREE.CubicBezierCurve3(
  new THREE.Vector3(-5, 0, 0),
  new THREE.Vector3(-2, 2, 1),
  new THREE.Vector3(2, 2, 1),
  new THREE.Vector3(5, 0, 0)
);

QQ图片20230421231226.png

总结

样条曲线与贝塞尔曲线本质依旧是根据点去渲染曲线，对应的构造函数总结如下：

QQ图片20230421231755.png

three学习（十六）—— 样条、贝塞尔曲线

前言

样条曲线

贝赛尔曲线

总结