前言

前面我们讲解了圆弧、样条等曲线，本节我们来看下组合曲线——CurvePath构造函数。顾名思义CurvePaht可以将圆弧线、直线等多个曲线类型合并到一起。

用法

CurvePath因为可以任意组合所以它可以用于渲染水波等复杂的3D效果。其构造函数如下：

   //不需要传入参数
   CurvePath()

CurvePath继承于Curve基类，除了继承Curve基类的公共方法还有以下属性方法：

.curves:Curves数组，组合线条的数组，一个元素代表着一种曲线。
.autoClose:是否自动闭合，默认为false。
.add(curve):添加方法，可以将新的曲线到Curves数组中，除了这个添加方法如果也可以直接往curves数组中push我们想要添加的元素。
.closePath():添加一条二维曲线LineCurve用来闭合路径，这个跟autoClose效果其实差不多，只不过这条线我们可以自定义以下材质等。
.getPoints():曲线分段数，默认为12，核心方法。
.getSpacedPoints():获取点的坐标，提升精确度，让物体更加光滑。利用以上属性方法我们可以将圆弧与贝塞尔曲线组合到一起。

 const geometry = new THREE.BufferGeometry();
//创建二维二次贝塞尔曲线
const curve = new THREE.CubicBezierCurve(
  new THREE.Vector3(-5, 0),
  new THREE.Vector3(-2, 2),
  new THREE.Vector3(2, 2),
  new THREE.Vector3(5, 0)
);
//创建圆弧
const arc = new THREE.ArcCurve(0, 0, 3, Math.PI, true);
// 创建组合曲线对象
const CurvePath = new THREE.CurvePath();
//添加到curves数组中
CurvePath.curves.push(curve, arc);
const points = CurvePath.getPoints(100);
geometry.setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0x8888 });
const line = new THREE.Line(geometry, material);
scene.add(line);

QQ图片20230423230623.png

整体步骤跟前两节差不多，核心还是getPoints与setFromPoints两个方法，这里的添加方法我们直接运用了curves数组push的方法，还可以运用.add方法去添加。

总结

以上就是CurvePath的含义与用法，CurvePath能够创建任意形状的曲线路径，各种搭配我们自己可以自行探索，创建出各种各样的曲线。

three（十七）——组合曲线

前言

用法

总结