Creating interactive wave path/mesh

Questions
1

I’m interested in creating and animating an interactive path/mesh like the following image:
wave
I’m not necessarily looking for solutions, though if you have any examples to share that would be useful. What I’m wondering is what I should use (spline, plane, line, other?) to model the ribbon and also how I could go about creating a “wavy” effect. I would like to simulate turbulence - imagine a ribbon blowing in the wind. Would it be best to manipulate vertex coordinates or create a shader or something else?

2

Take a look at these pretty polylines :pleading_face::point_right::point_left: (that’s not a three example though - but you can still reuse most of math from ogl code.)

And just like in the polyline example above - you can use quads, and adjust their vertices in the shader. If you’d like a bit of a simpler solution, and built-in in three, you can also try fat lines (source in the bottom-right.)

1 Like
3
1 Like
4

Thanks guys. I ended up just creating an SVG animation using D3 and some noise functions. Check it out here if you’re interested: SVG Wave using D3 and Simplex Noise - CodeSandbox
(NOT a ThreeJS implementation)

1 Like