让three.js物体脚踏实地：打造轨迹动画

2022-11-08 03:45:52

three.js 轨迹动画：让物体沿着轨迹运动，留下可视化的足迹

踏入 three.js 的世界，探索一种强大的 JavaScript 库，它可以轻松实现令人惊叹的 3D 动画。在本教程中，我们将深入了解轨迹动画，让物体沿着预定的路径移动，并在其身后留下可视化的轨迹，为您的项目增添一抹生动的动感。

从轨迹的概念出发

轨迹，顾名思义，就是物体在三维空间中移动的路径。它可以是直线、曲线，甚至任何复杂形状。在 three.js 中，我们可以使用一系列曲线或形状来定义轨迹。

让物体沿着轨迹起舞

一旦定义了轨迹，就可以让物体沿着它移动了。three.js 提供了 AnimationMixer 和 KeyframeTrack 来控制物体的运动。AnimationMixer 负责管理动画，而 KeyframeTrack 则指定动画的关键帧，包括位置、旋转和缩放等属性。

可视化轨迹：让足迹显形

为了让物体的移动轨迹可见，我们需要一种材质来绘制轨迹。three.js 中有各种材质可供选择。您可以使用 LineBasicMaterial 创建一条简单的线，也可以使用 TubeGeometry 和 LineDashedMaterial 创建更复杂的轨迹效果。

实践：沿着曲线移动的立方体

现在是时候动手实践了。我们将创建一个沿曲线移动的立方体，并留下可视化的轨迹。

// 创建场景和相机
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建一个立方体
const cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0x00ff00 }));

// 创建一条曲线轨迹
const curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-5, 0, 0),
  new THREE.Vector3(-2, 5, 0),
  new THREE.Vector3(2, 5, 0),
  new THREE.Vector3(5, 0, 0)
]);

// 创建一个跟随曲线轨迹的动画
const animation = new THREE.AnimationClip(
  'moveAlongCurve', // 动画名称
  2, // 动画持续时间（秒）
  [
    // 轨迹关键帧
    new THREE.VectorKeyframeTrack('.position', [0, 1], [
      curve.getPointAt(0),
      curve.getPointAt(1)
    ])
  ]
);

// 创建一个 AnimationMixer 来管理动画
const mixer = new THREE.AnimationMixer(cube);

// 将动画添加到 AnimationMixer
mixer.clipAction(animation).play();

// 创建材质以绘制轨迹
const trajectoryMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff });

// 创建一个几何体来表示轨迹
const trajectoryGeometry = new THREE.BufferGeometry();
const positions = new Float32Array(curve.getPoints(100));
trajectoryGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

// 创建一条线来绘制轨迹
const trajectory = new THREE.Line(trajectoryGeometry, trajectoryMaterial);

// 将立方体、轨迹和相机添加到场景中
scene.add(cube, trajectory, camera);

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

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  mixer.update(0.01); // 更新动画
  renderer.render(scene, camera); // 渲染场景
}
animate();