Help with implementing an animated line component

Hello guys, I will appreciate any ideas on how to implement the blue line component you can see on the image below.

The problem is with the arrows which are animated, and are moving from one point to the other to show the direction of the path. For now I have implemented only a blue line that uses Line from react-three/drei, but its missing arrows and animation. I think it can be done with a custom shader, but my knowledge is shaders is basically zero. Thank you for your time!

So similar ? AnimatedConveyorBelt

(from the Collection of examples from discourse.threejs.org )

1 Like

Yes, great example, thanks

you could do this with a texture and now you animate the map.offset.x, like so Cards with border radius - CodeSandbox

i don’t think three line2 (which is what drei/line uses) can have textures though, it would probably have to be meshline. here’s an example using meshline + texture https://codesandbox.io/p/sandbox/lanyard-rope-physics-2vsq8k

if it doesn’t have to be an array you could use dash to at least indicate directions https://codesandbox.io/p/sandbox/bezier-curves-nodes-3k4g6?

3 Likes

Amazing. Thank you very much!