Animate fat dashed lines

Questions
1

Is it possible to add animation to these dashed fat lines? Moving the points in one of the two directions.

image
image707Ɨ654 45.5 KB

https://threejs.org/examples/?q=lines#webgl_lines_fat

2

Hi!
What animation do you mean?

3

Sorry. Moving the points in one of the two directions.

4

Points? Do you mean vertices of the geometry? Or these dashes have to move along the line?

5

The dashes have to move along the line

6

Do you have a woking live code example? jsfiddle, codepen, codesandbox etc.

7

If you want I can try to import this in codepen.
https://threejs.org/examples/?q=lines#webgl_lines_fat

8

Would be cool, if you make a working example with the extracted part for fat lines.

9
10

Do you think is possible to achieve it? If so, do you have any guidance for me? Iā€™d like to try it but Iā€™m a bit lost.

11

I would start with looking at the source code of fragment shader, use .onBeforeCompile, add a uniform for time, and change this line mod( vLineDistance, dashSize + gapSize ) to mod( vLineDistance + time, dashSize + gapSize ).

3 Likes