tweenjs+threejs 多个动画依次执行

1.使用场景：当小车自动驾驶时，会由多条路线依次驶过，而tweenjs动画是链式函数执行

let myTwen = new TWEEN.Tween(position);  //position格式 ：{x:x,y:y}
   myTwen.to(
      {
        x: geometryGroup[1][0],
        y: geometryGroup[1][1],
      },
      7000
    )
    .onUpdate((pos) => {
      console.log("移动点坐标", pos);
      plane2.position.set(pos.x, pos.y);
    })
    .onComplete(() => console.log("finish"))
    .start();

上面这种写法就只能实现只有一段路的情况，不适用于多条线路的依次执行动画；
改写后：

  const animationCar = (geometryGroup) => {
    if (geometryGroup.length > 1) {
      new TWEEN.Tween(mesh.position)
        .to(
          {
            x: Number(geometryGroup[1][0]),
            y: Number(geometryGroup[1][1]),
          },
          5500
        )
        .easing(TWEEN.Easing.Linear.None)
        .onUpdate(function () {})
        .onComplete(function () {
          mesh.position.set(Number(geometryGroup[1][0]), Number(geometryGroup[1][1]));
          geometryGroup.shift();
          animationCar(geometryGroup);
        })
        .start();
    }
  };

PS：也可以使用定时器实现，一定时间改变起点终点位置，
为了更好的视觉效果，时间可以改成动态的，由距离去计算时间;