深入理解与应用 Three.js 的三维二次贝塞尔曲线（QuadraticBezierCurve3）
person 少陵野老
watch_later 2024-11-17 14:28:38
visibility 19
class 三维二次贝塞尔曲线,QuadraticBezierCurve3
bookmark 专栏
在 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();
四、其他实用方法
-
getTangent(t)- 获取曲线某点的切线方向，用于控制物体的旋转。
const tangent = curve.getTangent(0.5); // 获取 t=0.5 处的切线 -
getLength()- 获取曲线的总长度。
const length = curve.getLength(); console.log('曲线长度:', length); -
getPointAt(u)- 获取曲线上相对于曲线长度的点，
u为归一化值 (0 至 1)。
const pointAt = curve.getPointAt(0.25); // 曲线长度的 25% 处的点 - 获取曲线上相对于曲线长度的点，
五、应用场景
-
路径动画
- 定义复杂的物体运动轨迹，如车辆行驶、摄像机动画等。
-
三维形状生成
- 结合曲线生成器和旋转体几何（
LatheGeometry），可以创建三维模型。
- 结合曲线生成器和旋转体几何（
-
交互式可视化
- 绘制动态的曲线图，用于数据可视化或教育工具。
六、总结
QuadraticBezierCurve3 提供了创建和操控三维空间中二次贝塞尔曲线的能力，是构建复杂三维动画和可视化工具的基础。在掌握了它的用法后，您可以进一步结合其他几何体和动画技术，实现更复杂和动态的三维场景。
如果有任何问题或想法，欢迎留言讨论！
评论区
评论列表
