CubicBezierCurve 是 Three.js 提供的一种二维曲线，基于三次贝塞尔曲线的数学定义。三次贝塞尔曲线广泛用于图形设计、路径动画以及平滑形状绘制。它通过四个控制点定义曲线形状，具有灵活性和可控性，是二维曲线设计的常用工具。

本文将详细介绍 CubicBezierCurve 的基本用法、属性方法以及结合实际案例的高级应用。

一、CubicBezierCurve 简介

1.1 定义与作用

三次贝塞尔曲线通过以下公式定义：

其中：

• \( P_0 \): 起点
• \( P_1 \): 第一个控制点
• \( P_2 \): 第二个控制点
• \( P_3 \): 终点

1.2 构造函数

const curve = new THREE.CubicBezierCurve(v0, v1, v2, v3);

参数说明：

• v0: Vector2，起点。
• v1: Vector2，第一个控制点。
• v2: Vector2，第二个控制点。
• v3: Vector2，终点。

1.3 示例：创建基本三次贝塞尔曲线

const v0 = new THREE.Vector2(0, 0);
const v1 = new THREE.Vector2(2, 4);
const v2 = new THREE.Vector2(6, 4);
const v3 = new THREE.Vector2(8, 0);

const curve = new THREE.CubicBezierCurve(v0, v1, v2, v3);

二、CubicBezierCurve 的属性和方法

2.1 属性

• type: 曲线类型，默认为 'CubicBezierCurve'。
• v0, v1, v2, v3: 曲线的四个关键点（起点、两个控制点、终点）。

2.2 方法

2.2.1 getPoint(t)

返回曲线在参数 \( t \) （范围 [0, 1]）处的点。

const point = curve.getPoint(0.5); // 获取曲线中点
console.log(point); // Vector2 { x: ..., y: ... }

2.2.2 getPoints(divisions)

返回曲线上均匀分布的点数组。

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

2.2.3 getTangent(t)

返回曲线在参数 \( t \) 处的切线方向。

const tangent = curve.getTangent(0.5); // 获取曲线中点的切线方向
console.log(tangent); // Vector2 { x: ..., y: ... }

2.2.4 clone()

克隆当前曲线。

const clonedCurve = curve.clone();
console.log(clonedCurve);

2.2.5 toJSON()

将曲线序列化为 JSON 对象。

const json = curve.toJSON();
console.log(json);

2.2.6 fromJSON(json)

从 JSON 对象还原曲线。

const restoredCurve = new THREE.CubicBezierCurve().fromJSON(json);
console.log(restoredCurve);

三、应用实例

3.1 基本曲线绘制

通过贝塞尔曲线生成一条路径，并在场景中绘制。

// 定义控制点
const v0 = new THREE.Vector2(0, 0);
const v1 = new THREE.Vector2(2, 4);
const v2 = new THREE.Vector2(6, 4);
const v3 = new THREE.Vector2(8, 0);

// 创建曲线
const curve = new THREE.CubicBezierCurve(v0, v1, v2, v3);

// 获取曲线上的点
const points = curve.getPoints(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);

3.2 动画路径应用

以下示例展示如何让一个物体沿三次贝塞尔曲线运动。

const object = new THREE.Mesh(
  new THREE.SphereGeometry(0.2, 16, 16),
  new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
scene.add(object);

let t = 0;
function animate() {
  t += 0.01;
  if (t > 1) t = 0;

  const point = curve.getPoint(t);
  object.position.set(point.x, point.y, 0);

  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();

3.3 结合 Path 创建复杂路径

CubicBezierCurve 可以与 Path 结合生成复杂路径。

const path = new THREE.Path();
path.moveTo(0, 0);
path.bezierCurveTo(2, 4, 6, 4, 8, 0);

// 获取路径的几何体
const geometry = path.toGeometry();
const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
const line = new THREE.Line(geometry, material);
scene.add(line);

3.4 使用贝塞尔曲线生成自定义形状

const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.bezierCurveTo(2, 4, 6, 4, 8, 0);
shape.lineTo(8, -4);
shape.lineTo(0, -4);
shape.closePath();

// 创建几何体
const geometry = new THREE.ShapeGeometry(shape);
const material = new THREE.MeshBasicMaterial({ color: 0x00ffff });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

四、进阶应用

4.1 结合 TubeGeometry 生成三维管道

虽然 CubicBezierCurve 是二维曲线，但可以通过二维点扩展到三维管道。

const curve3D = new THREE.CurvePath();
curve3D.add(new THREE.CubicBezierCurve3(
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(2, 4, 2),
  new THREE.Vector3(6, 4, -2),
  new THREE.Vector3(8, 0, 0)
));

const geometry = new THREE.TubeGeometry(curve3D, 100, 0.2, 8, false);
const material = new THREE.MeshBasicMaterial({ color: 0xff00ff });
const tube = new THREE.Mesh(geometry, material);
scene.add(tube);

4.2 动态曲线生成

动态调整控制点生成实时曲线效果。

let controlPoint = new THREE.Vector2(4, 4);
function updateCurve() {
  const curve = new THREE.CubicBezierCurve(v0, v1, controlPoint, v3);
  const points = curve.getPoints(50);
  geometry.setFromPoints(points);
}

document.addEventListener('mousemove', (event) => {
  controlPoint.set(event.clientX / window.innerWidth * 8, event.clientY / window.innerHeight * 8);
  updateCurve();
});

总结

CubicBezierCurve 是 Three.js 中强大且灵活的二维曲线工具。它可以通过四个简单的点定义平滑且复杂的路径，用于动画轨迹、形状生成和复杂几何体的构造。通过本文的详细解析和丰富示例，相信你能灵活运用 CubicBezierCurve 创建令人惊叹的效果。