I’ve been trying to recreate the effect below.

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

I’ve been trying to recreate the effect below.

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:

5 Likes

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.

4 Likes

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