Three.js 物体按路径运动模拟

在三维可视化与交互开发中，让物体沿着特定路径运动是常见需求。three.js 作为强大的 JavaScript 3D 库，为我们提供了实现这一效果的丰富工具。本文将详细介绍如何在 three.js 中实现物体按路径运动模拟。

一、准备工作

1. 引入 three.js 库

在 HTML 文件中，通过网下载后本地引入，也可以使用 CDN 链接：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>

2. 初始化场景、相机和渲染器

在 JavaScript 代码中，创建基础的 three.js 场景、相机和渲染器：

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

二、创建运动物体

我们以创建一个简单的立方体作为运动物体为例：

// 创建几何体
const geometry = new THREE.BoxGeometry();
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建网格对象（物体）
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

三、定义运动路径

1. 使用THREE.CatmullRomCurve3创建曲线

THREE.CatmullRomCurve3是 three.js 中用于创建平滑曲线的类。它通过给定一系列三维点来生成曲线。

// 定义路径上的点
const points = [
    new THREE.Vector3(-2, 0, 0),
    new THREE.Vector3(0, 2, 0),
    new THREE.Vector3(2, 0, 0),
    new THREE.Vector3(0, -2, 0)
];
// 创建曲线
const curve = new THREE.CatmullRomCurve3(points);

2. 可视化路径（可选）

为了便于观察路径，我们可以将路径可视化。通过创建一个THREE.Line对象来实现：

// 创建路径的几何体
const pathGeometry = new THREE.BufferGeometry().setFromPoints(curve.getSpacedPoints(50));
// 创建路径的材质
const pathMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
// 创建路径对象
const path = new THREE.Line(pathGeometry, pathMaterial);
scene.add(path);

四、让物体沿路径运动

1. 计算物体在路径上的位置

我们通过curve.getPoint()方法，根据一个 0 到 1 之间的参数值，获取路径上对应的点，以此来确定物体的位置。

// 定义一个变量表示物体在路径上的进度，范围从0到1
let progress = 0;
function animate() {
    requestAnimationFrame(animate);
    // 根据进度获取路径上的点
    const point = curve.getPoint(progress);
    cube.position.copy(point);
    // 更新进度，让物体运动
    progress += 0.01;
    if (progress > 1) {
        progress = 0;
    }
    renderer.render(scene, camera);
}
animate();

2. 控制运动速度和方向

如果想要控制物体的运动速度，可以通过调整progress每次增加的值来实现。如果希望物体反向运动，可以在progress增加到 1 后，改为递减。

// 定义运动方向，1表示正向，-1表示反向
let direction = 1;
// 定义运动速度
let speed = 0.01;
function animate() {
    requestAnimationFrame(animate);
    const point = curve.getPoint(progress);
    cube.position.copy(point);
    progress += speed * direction;
    if (progress > 1) {
        progress = 1;
        direction = -1;
    } else if (progress < 0) {
        progress = 0;
        direction = 1;
    }
    renderer.render(scene, camera);
}
animate();

五、进阶技巧

1. 使用更复杂的路径

除了THREE.CatmullRomCurve3，还可以使用THREE.SplineCurve3等其他曲线类，或者通过组合多条曲线来创建复杂的运动路径。

2. 结合动画控制器

可以使用THREE.AnimationClip和THREE.AnimationMixer来更精确地控制物体的运动，例如添加缓动效果、暂停和恢复运动等。

通过以上步骤，我们就完成了在 three.js 中物体按路径运动的模拟。你可以根据实际需求，进一步调整物体的外观、路径的形状以及运动的细节，创造出更加丰富和精彩的三维动画效果。

上述内容涵盖了基础到进阶的实现方法。若你想对特定部分深入了解，或尝试其他功能，欢迎和我说说你的想法。