"bend" plane across curved surface

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

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:


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.


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

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