深入理解与应用 Three.js 的三维二次贝塞尔曲线（QuadraticBezierCurve3）

class 三维二次贝塞尔曲线,QuadraticBezierCurve3

在 Three.js 中，三维二次贝塞尔曲线（QuadraticBezierCurve3）是一个强大的工具，用于定义和渲染从一个点到另一个点的平滑曲线。与二维二次贝塞尔曲线类似，它增加了一个中间控制点来定义曲线的形状，但它工作在三维空间中，适用于需要表现复杂三维曲线的场景，如路径动画、形状生成等。

一、什么是三维二次贝塞尔曲线？

三维二次贝塞尔曲线通过起点、终点以及一个控制点来定义曲线。其数学公式为：

\[B(t) = (1-t)^2 \cdot P_0 + 2t(1-t) \cdot P_1 + t^2 \cdot P_2\]

  • \(P_0\)：起点。
  • \(P_1\)：控制点。
  • \(P_2\)：终点。
  • \(t\)：参数，范围为 [0, 1]。

二、如何使用 QuadraticBezierCurve3

1. 创建曲线

QuadraticBezierCurve3 是一个类，需要传递 3 个向量：起点、控制点和终点。

import * as THREE from 'three';

// 创建三维二次贝塞尔曲线
const curve = new THREE.QuadraticBezierCurve3(
    new THREE.Vector3(0, 0, 0),  // 起点
    new THREE.Vector3(5, 10, 0), // 控制点
    new THREE.Vector3(10, 0, 0)  // 终点
);

2. 获取曲线上的点

可以通过 getPoints 方法生成曲线上的一系列点。

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

3. 使用样条点创建对象路径

曲线不仅可以用来绘制，还可以用于定义物体沿路径运动的轨迹。

// 动态物体
const sphereGeometry = new THREE.SphereGeometry(0.2, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

// 在动画中沿曲线移动
let t = 0;
function animate() {
    requestAnimationFrame(animate);

    // 计算位置
    const position = curve.getPoint(t);
    sphere.position.copy(position);

    // 更新参数
    t += 0.01;
    if (t > 1) t = 0;

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

三、完整示例：可视化和路径动画

以下是一个完整的示例，展示如何创建三维二次贝塞尔曲线，并使用它来渲染曲线、控制对象沿曲线运动。

HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js QuadraticBezierCurve3</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r150/three.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

JavaScript 文件

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(15, 15, 15);
camera.lookAt(0, 5, 0);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加坐标轴辅助线
const axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);

// 定义三维二次贝塞尔曲线
const curve = new THREE.QuadraticBezierCurve3(
    new THREE.Vector3(0, 0, 0),  // 起点
    new THREE.Vector3(5, 10, 5), // 控制点
    new THREE.Vector3(10, 0, 0)  // 终点
);

// 可视化曲线
const points = curve.getPoints(100);
const curveGeometry = new THREE.BufferGeometry().setFromPoints(points);
const curveMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
const curveLine = new THREE.Line(curveGeometry, curveMaterial);
scene.add(curveLine);

// 添加球体，作为沿曲线运动的物体
const sphereGeometry = new THREE.SphereGeometry(0.3, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

// 动画变量
let t = 0;

// 渲染循环
function animate() {
    requestAnimationFrame(animate);

    // 获取曲线上的点并更新球体位置
    const position = curve.getPoint(t);
    sphere.position.copy(position);

    // 更新参数 t
    t += 0.01;
    if (t > 1) t = 0;

    renderer.render(scene, camera);
}

animate();

四、其他实用方法

  1. getTangent(t)

    • 获取曲线某点的切线方向，用于控制物体的旋转。
    const tangent = curve.getTangent(0.5); // 获取 t=0.5 处的切线

  2. getLength()

    • 获取曲线的总长度。
    const length = curve.getLength();
console.log('曲线长度:', length);

  3. getPointAt(u)

    • 获取曲线上相对于曲线长度的点，u 为归一化值 (0 至 1)。
    const pointAt = curve.getPointAt(0.25); // 曲线长度的 25% 处的点

五、应用场景

  1. 路径动画

    • 定义复杂的物体运动轨迹，如车辆行驶、摄像机动画等。

  2. 三维形状生成

    • 结合曲线生成器和旋转体几何（LatheGeometry），可以创建三维模型。

  3. 交互式可视化

    • 绘制动态的曲线图，用于数据可视化或教育工具。

六、总结

QuadraticBezierCurve3 提供了创建和操控三维空间中二次贝塞尔曲线的能力，是构建复杂三维动画和可视化工具的基础。在掌握了它的用法后，您可以进一步结合其他几何体和动画技术，实现更复杂和动态的三维场景。

如果有任何问题或想法，欢迎留言讨论！

评论区
评论列表
menu