Matarialize中文社区-Three.js 框架中的样条曲线（SplineCurve）的使用

Three.js 框架中的样条曲线（SplineCurve）的使用

少陵野老 2024-11-30 09:00:40

33 样条曲线,SplineCurve 专栏

在图形学和计算机动画中，样条曲线（SplineCurve）是一种非常重要的工具，用于描述平滑的曲线路径。在 Three.js 中，SplineCurve 类提供了一种通过控制点构建样条曲线的方法。它基于控制点的集合，利用平滑插值算法生成曲线，广泛应用于路径动画、物体移动、轨迹渲染等场景。

本文将深入讲解 SplineCurve 的使用，介绍其属性、方法，结合多个实际应用案例，展示如何在 Three.js 中使用样条曲线来创建复杂的视觉效果。

一、什么是样条曲线（SplineCurve）

1.1 样条曲线的定义

样条曲线是一类通过多个控制点插值得到的平滑曲线。在数学上，样条曲线通常是由一组低次多项式（如三次多项式）组成的，这些多项式之间是平滑连接的。在计算机图形学中，样条曲线用于描述物体的轨迹、路径等，能够在多个控制点之间生成一条平滑的过渡曲线。

1.2 `SplineCurve` 构造函数

在 Three.js 中，SplineCurve 是通过一组 Vector2 控制点生成的。创建一个 SplineCurve 实例的基本语法如下：

const curve = new THREE.SplineCurve(points);

参数说明

points: 控制点的数组，必须是 THREE.Vector2 类型的数组。这个数组定义了曲线的路径。

二、`SplineCurve` 的属性与方法

2.1 属性

type: 固定为 'SplineCurve'。
points: 控制点的数组，类型为 Array<THREE.Vector2>。

2.2 方法

2.2.1 `getPoint(t)`

返回曲线在参数 tt（范围 [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)`

返回曲线在参数 tt 处的切线方向。

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)`

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

三、`SplineCurve` 的基本使用

3.1 创建一个基本的样条曲线

通过以下代码，可以使用控制点创建一个样条曲线，并将其绘制到屏幕上：

// 创建二维点（控制点）
const p0 = new THREE.Vector2(0, 0);  // 起点
const p1 = new THREE.Vector2(5, 10); // 中间点
const p2 = new THREE.Vector2(10, 0); // 终点
const p3 = new THREE.Vector2(15, -10); // 新增点

// 创建样条曲线
const curve = new THREE.SplineCurve([p0, p1, p2, p3]);

// 获取曲线上的点（例如：分割成100个点）
const points = curve.getPoints(100);

// 创建几何体并将点设置为形状的顶点
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 动态更新曲线

我们可以通过更新控制点来动态改变曲线的形状，并更新渲染的几何体：

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

  // 更新控制点 p1
  curve.points[1].set(x, y);
  
  // 获取更新后的曲线点并更新几何体
  const updatedPoints = curve.getPoints(100);
  geometry.setFromPoints(updatedPoints);
});

四、样条曲线的进阶应用

4.1 结合 `TubeGeometry` 创建三维管道

通过将 SplineCurve 和 TubeGeometry 结合使用，可以创建沿着样条曲线生成的三维管道或曲线形状。

// 创建样条曲线路径
const curve = new THREE.SplineCurve([
  new THREE.Vector2(0, 0),
  new THREE.Vector2(5, 10),
  new THREE.Vector2(10, 0),
]);

// 使用曲线生成 TubeGeometry
const tubeGeometry = new THREE.TubeGeometry(curve, 50, 1, 8, false);

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

// 使用 TubeGeometry 创建管道形状
const tube = new THREE.Mesh(tubeGeometry, material);
scene.add(tube);

4.2 动画路径

通过样条曲线，可以让物体沿着曲线轨迹移动，下面是一个沿样条曲线移动的示例：

const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(0.5, 16, 16),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
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();

4.3 路径可视化

样条曲线可以用于路径可视化，例如在一个 3D 场景中画出车辆的行驶路径：

// 创建样条曲线
const curve = new THREE.SplineCurve([
  new THREE.Vector2(0, 0),
  new THREE.Vector2(5, 10),
  new THREE.Vector2(10, 0),
  new THREE.Vector2(15, -10)
]);

// 创建路径几何体
const points = curve.getPoints(50);
const geometry = new THREE.BufferGeometry().setFromPoints(points);

// 创建路径的线条
const material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
const line = new THREE.Line(geometry, material);
scene.add(line);

五、`SplineCurve` 的扩展与优化

5.1 曲线的平滑控制

在实际应用中，可能需要根据不同的要求对曲线进行平滑控制。通过控制点的适当调整，可以得到不同的曲线形状。如果需要更精细的平滑度，可以增加控制点或使用插值算法来优化曲线。

5.2 多路径动画

通过在多个样条曲线之间插值，可以实现物体在多个路径上的平滑过渡。例如，车辆沿着多个样条曲线段行驶时，可以使得路径连接更加自然。

// 定义多个曲线
const path1 = new THREE.SplineCurve([new THREE.Vector2(0, 0), new THREE.Vector2(5, 10)]);
const path2 = new THREE.SplineCurve([new THREE.Vector2(5, 10), new THREE.Vector2(10, 0)]);

// 动画让物体从 path1 过渡到 path2
let t = 0;
function animate() {
  t += 0.01;
  if (t > 1) t = 0;
  
  let point;
  if (t < 0.5) {
    point = path1.getPoint(t * 2);
  } else {
    point = path2.getPoint((t - 0.5) * 2);
  }
  
  sphere.position.set(point.x, point.y, 0);
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();