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

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

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

THREE.CubicBezierCurve3 是 Three.js 中用于创建三维空间中的三次贝塞尔曲线的一个类。三次贝塞尔曲线是一种通过四个点（起点、两个控制点和终点）来定义的平滑曲线。这种曲线在图形设计、动画和几何建模中非常常见，因为它可以生成既平滑又复杂的路径。

构造函数

构造函数 new THREE.CubicBezierCurve3(v1, v2, v3, v4) 接受四个参数来定义曲线：

• v1: 起点位置，一个 THREE.Vector3 对象。
• v2: 第一个控制点位置，一个 THREE.Vector3 对象。
• v3: 第二个控制点位置，一个 THREE.Vector3 对象。
• v4: 终点位置，一个 THREE.Vector3 对象。

属性

THREE.CubicBezierCurve3 的实例拥有以下属性：

• v1: 起点位置。
• v2: 第一个控制点位置。
• v3: 第二个控制点位置。
• v4: 终点位置。

方法

THREE.CubicBezierCurve3 继承自 THREE.Curve，因此它也拥有一系列用于操作和查询曲线的方法：

• getPoint(t, optionalTarget)：根据给定的参数 t （范围通常在 [0, 1] 之间）返回三次贝塞尔曲线上的一个点。如果提供了 optionalTarget 参数，则返回的结果将会是该参数引用的对象。
• getTangent(t, optionalTarget)：根据给定的参数 t 返回三次贝塞尔曲线上的切线方向。如果提供了 optionalTarget 参数，则返回的结果将会是该参数引用的对象。
• getPoints(divisions)：根据给定的分割数量 divisions 返回一系列三次贝塞尔曲线上的点，这些点可用于绘制曲线。

示例

下面是一个使用 THREE.CubicBezierCurve3 创建三次贝塞尔曲线并在 Three.js 场景中绘制的例子：

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

// 获取曲线上的点
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.CubicBezierCurve3 在 Three.js 中

THREE.CubicBezierCurve3 在 Three.js 中主要用于创建三维空间中的平滑路径。通过定义起点、两个控制点和终点，可以创建出平滑且复杂的曲线路径。这种路径非常适合用于创建物体的运动轨迹、曲线几何体等。

示例：创建一个带有三次贝塞尔曲线路径的场景

假设你想在一个 Three.js 场景中创建一个由三次贝塞尔曲线组成的路径，并在该路径上绘制一个物体：

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

// 获取曲线上的点
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);

// 创建一个沿路径的管状几何体
const tubeGeometry = new THREE.TubeGeometry(curve, 100, 1, 1, false);
const tubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const tubeMesh = new THREE.Mesh(tubeGeometry, tubeMaterial);
scene.add(tubeMesh);

这段代码展示了如何使用 THREE.CubicBezierCurve3 创建一个三维的三次贝塞尔曲线，并在该路径上绘制一个物体。

总结

THREE.CubicBezierCurve3 是一个用于创建三维空间中的平滑路径的类，提供了定义路径的基本属性和方法。通过这些方法，你可以创建平滑且复杂的曲线路径，并利用这些路径来创建各种几何体。在 Three.js 的许多功能中，THREE.CubicBezierCurve3 对于实现平滑路径的绘制和几何体创建非常重要。理解并熟练使用 THREE.CubicBezierCurve3 对于开发高质量的 Three.js 应用程序是非常有帮助的。

需要注意的是，Three.js 的版本可能会有所不同，因此具体的方法和属性可能会有所变化。在实际使用时，请参考最新的 Three.js 文档。另外，THREE.CubicBezierCurve3 和 THREE.CubicBezierCurve 在 Three.js 中是相同的类，只是命名方式略有不同，因此它们的功能是一致的。