threejs轨迹动画

Three.js 是一个用于在浏览器中创建 3D 图形的 JavaScript 库。Three.js 中可以使用 AnimationMixer 类来创建动画。为了创建轨迹动画，我们需要以下步骤：

1. 定义轨迹：创建一个路径，例如一个贝塞尔曲线或一组点。

2. 定义动画：使用 Three.js 的 AnimationMixer 类创建一个动画对象。

3. 绑定轨迹和动画：将轨迹绑定到动画对象上。

4. 播放动画：使用 AnimationMixer 的 update() 方法更新动画，并将结果渲染到画布上。

以下是示例代码：

// 创建场景、渲染器、相机等
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 50;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 定义轨迹
var curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-10, 0, 0),
  new THREE.Vector3(-5, 5, 5),
  new THREE.Vector3(0, 0, 10),
  new THREE.Vector3(5, -5, 5),
  new THREE.Vector3(10, 0, 0)
]);

// 定义动画
var mixer = new THREE.AnimationMixer(scene);
var animation = new THREE.AnimationClip('animation', -1, [
  new THREE.VectorKeyframeTrack('.position', [0, 5], curve.getPoints(2).flat())
]);
var action = mixer.clipAction(animation);

// 播放动画
animate();
function animate() {
  requestAnimationFrame(animate);
  mixer.update(0.01);
  renderer.render(scene, camera);
}

在上面的代码中，我们使用 CatmullRomCurve3 创建了一个路径，然后将其传递给 AnimationClip 的 VectorKeyframeTrack 类来定义动画。在 animate() 函数中，我们使用 AnimationMixer 的 update() 方法更新动画，并使用渲染器将场景渲染到画布上。

你可以根据自己的需求修改轨迹和动画的定义，以创建不同的效果。