Matarialize中文社区-深入解析 Three.js 中的 CatmullRomCurve3 使用

深入解析 Three.js 中的 CatmullRomCurve3 使用

少陵野老 2024-11-17 09:57:41

26 CatmullRomCurve3 专栏

CatmullRomCurve3 是 Three.js 中一种非常实用的曲线类型，广泛应用于创建平滑路径、轨迹动画以及复杂几何体生成。它基于 Catmull-Rom 插值算法，通过一组离散的三维点计算出一条平滑曲线。这种曲线特别适合动画轨迹设计或构建具有自然过渡效果的几何体。

本文将详细介绍 CatmullRomCurve3 的用法，包括其属性和方法，并通过多个实际案例展示其强大的功能。

一、`CatmullRomCurve3` 简介

CatmullRomCurve3 是 Curve 类的子类，用于生成平滑的三维样条曲线。其核心功能是：

基于一组三维点生成平滑曲线。
支持环形曲线。
提供插值精度控制。

1.1 构造函数

const curve = new THREE.CatmullRomCurve3(points, closed, curveType, tension);

参数说明：

points: Vector3[]，曲线的控制点数组。
closed: Boolean，是否生成闭合曲线，默认值为 false。
curveType: String，曲线类型，可选值为 'centripetal'（默认）和 'chordal'，决定曲线插值算法。
tension: Number，张力系数，仅在 'centripetal' 类型曲线中生效，默认值为 0.5。

1.2 示例：创建一条简单的曲线

const points = [
  new THREE.Vector3(-10, 0, 0),
  new THREE.Vector3(-5, 5, 0),
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(5, -5, 0),
  new THREE.Vector3(10, 0, 0),
];
const curve = new THREE.CatmullRomCurve3(points);

二、`CatmullRomCurve3` 的核心方法

2.1 `getPoint(t)`

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

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

2.2 `getPoints(divisions)`

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

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

2.3 `getSpacedPoints(divisions)`

返回按等距间隔采样的点数组。

const spacedPoints = curve.getSpacedPoints(50); // 按等间距获取50个点

2.4 `getTangent(t)`

获取曲线在参数 t 处的切线方向。

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

2.5 `updateArcLengths()`

更新曲线的弧长缓存。通常在更改曲线控制点后调用。

curve.updateArcLengths();

三、使用示例

3.1 基本曲线渲染

下面的示例展示了如何通过一组控制点生成并渲染 CatmullRomCurve3。

const points = [
  new THREE.Vector3(-10, 0, 0),
  new THREE.Vector3(-5, 5, 0),
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(5, -5, 0),
  new THREE.Vector3(10, 0, 0),
];
const curve = new THREE.CatmullRomCurve3(points);

// 创建几何体
const geometry = new THREE.BufferGeometry().setFromPoints(curve.getPoints(100));
const material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
const line = new THREE.Line(geometry, material);

scene.add(line);

3.2 动画路径应用

以下示例展示了如何在曲线上沿路径移动一个物体。

const points = [
  new THREE.Vector3(-10, 0, 0),
  new THREE.Vector3(-5, 5, 0),
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(5, -5, 0),
  new THREE.Vector3(10, 0, 0),
];
const curve = new THREE.CatmullRomCurve3(points);

const geometry = new THREE.SphereGeometry(0.5, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

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

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

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

3.3 创建闭合曲线

闭合曲线适合用于生成环形路径。

const points = [
  new THREE.Vector3(0, 5, 0),
  new THREE.Vector3(5, 0, 0),
  new THREE.Vector3(0, -5, 0),
  new THREE.Vector3(-5, 0, 0),
];
const closedCurve = new THREE.CatmullRomCurve3(points, true);

// 绘制闭合曲线
const geometry = new THREE.BufferGeometry().setFromPoints(closedCurve.getPoints(100));
const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
const line = new THREE.Line(geometry, material);
scene.add(line);

3.4 生成轨道环

使用 CatmullRomCurve3 创建复杂的轨道。

const points = [];
for (let i = 0; i < 10; i++) {
  points.push(new THREE.Vector3(Math.cos(i) * 5, Math.sin(i) * 5, i));
}
const curve = new THREE.CatmullRomCurve3(points);

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

四、与其他组件结合

4.1 结合 `TubeGeometry` 创建立体曲线

TubeGeometry 是 Three.js 中常用的几何体，用于沿路径生成管状物体。

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

4.2 应用于相机路径动画

通过 CatmullRomCurve3，可以创建相机运动路径，实现平滑的动画效果。

const cameraPath = new THREE.CatmullRomCurve3(points);
let cameraT = 0;

function animateCamera() {
  cameraT += 0.002;
  if (cameraT > 1) cameraT = 0;

  const camPoint = cameraPath.getPoint(cameraT);
  camera.position.set(camPoint.x, camPoint.y, camPoint.z);
  camera.lookAt(0, 0, 0);

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