将多个球体放在一个距离相同的动画中

Question

我有一个执行动画的代码。球体从直线的起点移动到直线的终点。再次开始时再次结束运动。从第一个顶点开始，到直线的最后一个顶点结束。我想放置 20 个左右的球体，做相同的动画，但同时在相同的距离内。我该怎么做？

这是我的代码：

var vertices = mesh.geometry.vertices;
var duration = 10;

function startToEnd() {
    var i = 0;
    async.eachSeries(vertices, function(vertice, callback) {
        if (i !== 0) {
            sphere.position.copy(vertices[i - 1]);
            new TWEEN.Tween(sphere.position).to(vertices[i],  duration).delay(duration).onComplete(function() {
                callback(null);
            }).start();
        } else {
            callback(null);
        }
        i++;
    }, startToEnd);
}
startToEnd();

这张图片就是一个例子..

这是我的代码的结果

Answer 1

我得到了一些我认为非常接近你想要的东西：

var vertices = mesh.geometry.vertices;
var duration = 20;
var spheres = [];
var amountOfSpheres = 20;

for (var i = 0; i < amountOfSpheres; i++) {
  spheres.push(new THREE.Sprite(rttMaterial));
  scene.add(spheres[i]);
}

function endlessArrayIndex(index, arrayLength) {
    if (index >= arrayLength) {
    return index % arrayLength;
  }
  return index;
}

function startToEnd() {
  i = 0;
  async.each(spheres, function(sphere, cb1) {
    var j = 0;
    var verticeIndex = endlessArrayIndex(i * Math.round(vertices.length / amountOfSpheres), vertices.length);
    async.eachSeries(vertices, function(vertice, cb2) {
      if (verticeIndex !== 0) {
        var verticeToCopy = vertices[verticeIndex - 1];
        sphere.position.copy(verticeToCopy);
        new TWEEN.Tween(sphere.position).to(vertices[verticeIndex], duration).delay(duration).onComplete(function() {
          cb2(null);
        }).start();
      } else {
        cb2(null);
      }
      verticeIndex = endlessArrayIndex(verticeIndex + 1, vertices.length);
    }, cb1);
    i++;
  }, startToEnd);
}
startToEnd();

以上代码的结果：

将多个球体放在一个距离相同的动画中

Put a number of spheres in an animation with the same distance

javascript

animation

async.js

tween.js