"bend" plane across curved surface

Questions
,
1

I’ve been trying to recreate the effect below.

Untitled video - Made with Clipchamp (1)

specifically where you can see the planes vertices appear to curve around something like a cylinder as one scrolls.
Not sure how i could go about doing this

1 Like
2

Here is some general help:

  • use a PlaneGeometry for each panel with several vertices along the horizontal axis
  • pick a function that has a similar curvature → the bell-shape Gaussian function is a good choice , but my preference is the simple cosine function.
  • at every frame update the vertices of the plane depending on the plane position (the function is a kind of invisible terrain and the plane swipes over it)

That’s all.

Here is how it looks like with the cosine function:

5 Likes
3

I went the way with the smoothstep function, with absolute value on X-axis.

Made it with ShaderMaterial, but it’s pretty much doable with plain JS, as the framework has this.

5 Likes
4

any tips on how youre changing the plane vertices via the smooth function? is this in the vertex shader?

5

What you’re comfortable with, actually. For me it was easier and funnier to do it in shaders, but you can do it with javascript.
Multiply/scale the result of function and add it to the value of the desired axis.

1 Like
6


I want to crate this effect anyone can help me?