Points along a path with position attribute and delay

Questions
1

Hello, I have a ten points that they are moving along a path. It’s done with buffer attribute position. It’s difficult to explain but here there is a jsfiddle.
I try to get this:
points
I have tried to make a delay each point but nothing works.
I don’t know if is the best way.

      var geometry = sphere.geometry;
      var attributes = geometry.attributes;
      const array = attributes.position.array;
      const timeZ = .001 * performance.now() ;
      const point = curve.getPoint( timeZ );
            for ( var i = 0, l = array.length; i < l; i += 3 ) { 
               array[ i ] = point.x;
               array[ i + 1 ] = point.y;
               array[ i + 2 ] = point.z;
         }
      attributes.position.needsUpdate = true;

I

2

Hi!
Is this what you’re looking for?

function render() {

  const pos = sphere.geometry.attributes.position;
  const timeZ = .0001 * performance.now();
  
  for (var i = 0, l = pos.count; i < l; i++) {
    const p = curve.getPoint((timeZ + 0.1 * i) % 1);
    pos.setXYZ(i, p.x, p.y, p.z);
  }
  pos.needsUpdate = true;

  renderer.render(scene, camera);
}

https://jsfiddle.net/prisoner849/gp0bmrn8/

3 Likes
3

Totally yes, I really appreciate your help. Thank you so much.

1 Like
4

@sanprieto You’re welcome :slight_smile: :beers:

1 Like
5

If you want to offload some work from CPU and dont mind having a fixed path, you could try GPU particle systems with delay. That way instead of updating all the position attributes, you would have to update only one time uniform, which is much less costly (although the difference is negligible with a small amount of points).
I can provide a basic example, or you could look into it more yourself with this awesome vertex shader tutorial series by Szenia Zadvornykh, the creator of three-bas.

2 Likes
6

Really i’m using a small amount of points but thanks for this recommendation.