ThreeJS入门（092）：THREE.Curve 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 092篇入门文章

THREE.Curve 是 Three.js 中的一个抽象基类，用于定义曲线的基本接口。虽然本身并不直接绘制曲线，但它定义了一系列方法，这些方法可以被继承并实现具体的曲线类型，如 THREE.LineCurve, THREE.SplineCurve, THREE.QuadraticBezierCurve, THREE.CubicBezierCurve 等。THREE.Curve 为曲线的操作提供了一致的接口，使得开发者可以方便地创建和操作不同类型的曲线。

构造函数

构造函数 new THREE.Curve() 不接受任何参数，并且通常不直接实例化，而是通过继承具体实现类来创建曲线。

属性

THREE.Curve 的实例没有特定的属性，因为它是抽象基类。具体的子类可能会有自己的属性来定义曲线的形状。

方法

THREE.Curve 提供了以下常用的方法来操作和查询曲线：

• getPoint(t, optionalTarget)：根据给定的参数 t （范围通常在 [0, 1] 之间）返回曲线上的一个点。如果提供了 optionalTarget 参数，则返回的结果将会是该参数引用的对象。
• getTangent(t, optionalTarget)：根据给定的参数 t 返回曲线上的切线方向。如果提供了 optionalTarget 参数，则返回的结果将会是该参数引用的对象。
• getPoints(divisions)：根据给定的分割数量 divisions 返回一系列曲线上的点，这些点可用于绘制曲线。
• clone()：返回一个新的曲线对象，其属性与当前曲线相同。
• copy(source)：从另一个曲线对象复制属性到当前曲线对象，并返回当前曲线对象。
• toString()：返回一个字符串表示当前曲线对象。

示例

下面是一个使用 THREE.Curve 子类创建曲线并绘制的例子：

// 创建一个立方贝塞尔曲线
const curve = new THREE.CubicBezierCurve(
    new THREE.Vector2(0, 0), // 起点
    new THREE.Vector2(10, 10), // 第一个控制点
    new THREE.Vector2(20, 10), // 第二个控制点
    new THREE.Vector2(30, 30) // 终点
);

// 获取曲线上的点
const points = curve.getPoints(50); // 获取50个点

// 创建几何体
const geometry = new THREE.BufferGeometry().setFromPoints(points);

// 创建材质
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });

// 创建线条
const line = new THREE.Line(geometry, material);

// 将线条添加到场景中
scene.add(line);

使用 THREE.Curve 在 Three.js 中

THREE.Curve 在 Three.js 中主要用于定义曲线的形状，并提供了一种统一的方式来操作曲线。通过继承 THREE.Curve 并实现其方法，可以创建不同的曲线类型，如线性曲线、二次贝塞尔曲线、三次贝塞尔曲线等。

示例：创建一个动态曲线

假设你想在 Three.js 场景中动态创建一个曲线，并根据时间改变其形状：

// 创建一个三次贝塞尔曲线
const curve = new THREE.CubicBezierCurve(
    new THREE.Vector2(0, 0), // 起点
    new THREE.Vector2(10, 10), // 第一个控制点
    new THREE.Vector2(20, 10), // 第二个控制点
    new THREE.Vector2(30, 30) // 终点
);

// 获取曲线上的点
const points = curve.getPoints(50); // 获取50个点

// 创建几何体
const geometry = new THREE.BufferGeometry().setFromPoints(points);

// 创建材质
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });

// 创建线条
const line = new THREE.Line(geometry, material);

// 将线条添加到场景中
scene.add(line);

// 定义动画函数
function animate() {
    requestAnimationFrame(animate);

    // 更新曲线控制点
    curve.v2.x = Math.sin(Date.now() * 0.001) * 10 + 10; // 更新第一个控制点的 x 坐标
    curve.v3.x = Math.cos(Date.now() * 0.001) * 10 + 20; // 更新第二个控制点的 x 坐标

    // 重新计算曲线上的点
    const newPoints = curve.getPoints(50);
    geometry.setFromPoints(newPoints);

    // 渲染场景
    renderer.render(scene, camera);
}

animate();

这段代码展示了如何使用 THREE.CubicBezierCurve 创建一个动态变化的曲线，并根据时间改变其形状。

总结

THREE.Curve 是一个用于定义曲线的基本接口的类，提供了丰富的操作和查询曲线的方法。通过继承 THREE.Curve 并实现其方法，可以创建各种类型的曲线，并结合 Three.js 的其他功能实现复杂的图形效果。在 Three.js 的许多功能中，THREE.Curve 对于实现曲线绘制和动画效果非常重要。理解并熟练使用 THREE.Curve 对于开发高质量的 Three.js 应用程序是非常有帮助的。

需要注意的是，Three.js 的版本可能会有所不同，因此具体的方法和属性可能会有所变化。在实际使用时，请参考最新的 Three.js 文档。