I can think in two ways to do it but none of them are trivial for me. How would you create this effect?
you can do this with a 2 pixel texture, I would consider that quite cheap, and it’s less effort in my opinion. Just turn texture repetition on and use some high value for UV ( e.g. 10 or 20) to make it repeat multiple times. I prefer textured approach most of the time, since asset pipeline is a lot simpler that way, in my view; i.e. you just need any image editor.
2 Likes
Usnul answer is right, and to make the animation, you can change the offset of the texture over time.
Edit: I don’t know if you need also to do texture.needsUpdate = true;
Trying to make it by myself but I need at least an example of how to repeat that 2px texture Infinitetly. Any example or tutorial to learn how to manipulate textures that way?
Here: https://threejs.org/docs/#api/en/textures/Texture.repeat
The example shows how to repeat the texture 4 times in u and v.
So, you can’t repeat infinitely, you must know the size of the line and decide a number of repetitions based on that.
1 Like
I kind of have the effect almost ready. My problem now is that I don’t know the size of the line, change with the movement of the mouse. Scaling is not useful because it scale also the texture. Would you remove the geometry and then created again with the new size of the line?
If you know the two endpoints you can know the distance with startPoint.distanceTo( endPoint ) Does this work for you?
My problem was about how to scale. I knew the distance but I needed to scale proportionally. This is how I solved the problem:
const scaleFactorX = distance / line.geometry.parameters.width
line.scale.set(scaleFactorX, 1, 1)
I finally have the effect. Thank you 
You are welcome 
Do you have a boilerplate of a Three.js scene in codepen or codesandbox or similar?
Sorry I forgot I already had one. Here you go:
3 Likes