在 Three.js 中，QuadraticBezierCurve 是一个用来定义二维二次贝塞尔曲线的类，它能够通过三个控制点构建平滑的曲线。在图形学中，二次贝塞尔曲线是一种广泛应用于动画、路径规划、图形绘制的曲线工具。

本文将详细讲解 QuadraticBezierCurve 的使用方法，包括其属性、方法、应用案例，并结合其他 Three.js 组件演示其强大的功能。内容将涵盖理论与实践，配有详尽的代码示例。

一、QuadraticBezierCurve 简介

1.1 什么是二次贝塞尔曲线？

二次贝塞尔曲线是由以下公式定义的一种曲线：

• \(P_0\): 起点
• \(P_1\): 控制点
• \(P_2\): 终点
• \(t\): 参数，用于控制曲线上的点

1.2 QuadraticBezierCurve 构造函数

在 Three.js 中，QuadraticBezierCurve 可以通过以下方式创建：

const curve = new THREE.QuadraticBezierCurve(p0, p1, p2);

参数说明

• p0: 起点，THREE.Vector2。
• p1: 控制点，THREE.Vector2。
• p2: 终点，THREE.Vector2。

二、QuadraticBezierCurve 的属性与方法

2.1 属性

• type: 固定为 'QuadraticBezierCurve'。
• v0: 起点，类型为 Vector2。
• v1: 控制点，类型为 Vector2。
• v2: 终点，类型为 Vector2。

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);
console.log(points); // [Vector2, Vector2, ...]

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();

2.2.5 toJSON() 和 fromJSON(json)

序列化和反序列化曲线，用于保存和恢复。

三、QuadraticBezierCurve 的基本使用

3.1 绘制基本的二次贝塞尔曲线

以下代码展示如何创建并绘制一个简单的二次贝塞尔曲线：

// 创建二维点
const p0 = new THREE.Vector2(0, 0);  // 起点
const p1 = new THREE.Vector2(5, 10); // 控制点
const p2 = new THREE.Vector2(10, 0); // 终点

// 创建二次贝塞尔曲线
const curve = new THREE.QuadraticBezierCurve(p0, p1, p2);

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

运行上述代码后，你将看到一个从 (0, 0) 到 (10, 0)，以 (5, 10) 为控制点的平滑曲线。

3.2 动态调整控制点

通过动态调整控制点，可以改变曲线形状：

document.addEventListener('mousemove', (event) => {
  const x = (event.clientX / window.innerWidth) * 20 - 10;
  const y = (event.clientY / window.innerHeight) * 20 - 10;

  curve.v1.set(x, y); // 动态更新控制点
  const updatedPoints = curve.getPoints(50);
  geometry.setFromPoints(updatedPoints); // 更新几何体
});

四、QuadraticBezierCurve 的进阶应用

4.1 结合 Shape 创建二维填充区域

通过 Shape 和 QuadraticBezierCurve 可以构建复杂的二维填充形状。

const shape = new THREE.Shape();

// 添加起点
shape.moveTo(0, 0);

// 添加贝塞尔曲线
shape.quadraticCurveTo(5, 10, 10, 0);

// 创建形状几何体
const geometry = new THREE.ShapeGeometry(shape);

// 添加材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

4.2 结合 TubeGeometry 创建三维效果

将二维曲线沿特定轴拉伸或作为路径，可以生成三维效果。

// 使用 QuadraticBezierCurve 创建路径
const path = new THREE.QuadraticBezierCurve(
  new THREE.Vector2(0, 0),
  new THREE.Vector2(5, 10),
  new THREE.Vector2(10, 0)
);

// 转换为 TubeGeometry
const tubeGeometry = new THREE.TubeGeometry(path, 50, 0.5, 8, false);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const tube = new THREE.Mesh(tubeGeometry, material);
scene.add(tube);

五、结合其他组件的使用

5.1 粒子特效

通过在曲线上放置粒子，可以实现粒子轨迹特效：

const points = curve.getPoints(100);
const geometry = new THREE.BufferGeometry().setFromPoints(points);

// 创建粒子材质
const material = new THREE.PointsMaterial({ size: 0.2, color: 0xff9900 });
const particles = new THREE.Points(geometry, material);
scene.add(particles);

5.2 动画路径

让物体沿贝塞尔曲线移动：

const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(0.5, 16, 16),
  new THREE.MeshBasicMaterial({ color: 0x0000ff })
);
scene.add(sphere);

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

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

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

六、扩展与优化

6.1 性能优化

• 减少分割点: 在绘制高性能场景时，可以减少 getPoints 的分割数量。
• 缓存曲线数据: 当曲线不会改变时，可以将点缓存为静态数据。

6.2 交互性增强

通过鼠标和键盘事件动态调整控制点，构建实时交互式的编辑工具。

document.addEventListener('mousedown', (event) => {
  const x = (event.clientX / window.innerWidth) * 20 - 10;
  const y = (event.clientY / window.innerHeight) * 20 - 10;

  curve.v1.set(x, y);
  geometry.setFromPoints(curve.getPoints(50));
});

七、总结

QuadraticBezierCurve 是一个非常强大且灵活的工具，适用于构建平滑路径、动画轨迹、几何填充等。在结合其他 Three.js 组件（如 Shape、TubeGeometry）时，可以实现更加复杂和实用的效果。通过本文的详细讲解和示例，相信你已经掌握了如何使用 QuadraticBezierCurve 创建各种令人惊叹的效果。