How to implement drawing line animation

Questions
,
1

Hello.Im trying to implement drawing line smooth animation.How do I implement in order to achieve this?

my codes -
https://codesandbox.io/s/react-three-line-6mio6b

2

Specifically with fat lines, I would write the data of the curve into DataTexture and process it in vertex shader, moving points in accordance to the data.
Of course, you can do it with javascript, no shader modifications involved, if you’ve got just one object of fat lines in the scene.

3

you can play with line gap and offset to create that effect you want, im guessing where it looks like the line is drawn from start to finish.

4

Hello.Thank you for your answer. I want to do like this.it will increase line width.
I changed ur codes slightly. codes. Where do I need to update to run that animation?

5

yes, it’s exactly that. drei/Line has dashed dashScale gapSize

you can also use meshline Confetti - CodeSandbox

the effect where it appears the line is drawn from scratch is just using dash props

6

Ah! If line caps don’t matter, then the using of dashed line is the way :slight_smile:

7

it’s animating but what I want to display is line tube curve like this. For now, mesh is shwoing flat line.demo.

8

The example looks like they stretch a capsule along a curve.

9

I can animate it by using tubeGeometry. demo. Is there any way to fill color inside the tube?

10

I’m still thinking that the stretching of a capsule along a curve is the option :thinking:

11

Can I get the source code for this?

12

Yeah, sure. Here you are: https://codepen.io/prisoner849/full/bGQNEwm