Put multiple spheres in the animation with the same distance

Question

I have some code that does an animation. the ball moves from the beginning of the line to the end of the line. When the start again completes the movement again. starts at the first vertex and ends at the last vertex of the line. I want to set about 20 spheres, making the same animation, but at the same time and at the same distance. How can i do this?

this is my code:

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();

This image is an example ..

this is the result of my code

Answer 1

I have something that, in my opinion, is very close to what you want:

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();

The result of the above code: