I can think in two ways to do it but none of them are trivial for me. How would you create this effect? [supremacy]

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 …

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.

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 :slight_smile:

@Enzo Hi! Is it possible to show the result with a working live code example?

Do you have a boilerplate of a Three.js scene in codepen or codesandbox or similar?

Shall I use textures or planes to create this effect?

Questions

prisoner849 March 26, 2019, 12:02pm 12

Yes.
Do you need a link on it?

Here you are: https://codepen.io/pen?template=gdybvQ

1 Like

Topic		Replies	Views
How to repeat image texture on the mesh material based on the texture's actual size Questions textures , materials , geometry , mesh , texture-loader , texture-mapping , rotation , blurry-texture	32	1522	November 12, 2024
How to Repeat an Animated Texture in a Flat Plane Questions textures , materials , geometry , animation	0	397	June 3, 2023
Repeat CanvasTexture Questions textures	1	533	February 25, 2021
Stretched out texture after scaling Questions textures	15	2382	September 22, 2022
How to repeat texture properly? Questions textures , materials , geometry , react-three-fiber	4	3791	October 4, 2023

Shall I use textures or planes to create this effect?

Related topics