# "bend" plane across curved surface

**URL:** <https://discourse.threejs.org/t/bend-plane-across-curved-surface/51504>\
**Category:** Questions\
**Tags:** shaders, geometry\
**Created:** [May 12, 2023, 4:12pm UTC](https://discourse.threejs.org/t/bend-plane-across-curved-surface/51504 "2023-05-12T16:12:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Samuel\_talabi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/samuel_talabi/32/36031_2.png) [@Samuel\_talabi](https://discourse.threejs.org/u/Samuel_talabi)\
**Post date:** [May 12, 2023, 4:12pm UTC](https://discourse.threejs.org/t/bend-plane-across-curved-surface/51504/1 "2023-05-12T16:12:17Z")

</div>

I’ve been trying to recreate the effect below.

![Untitled video - Made with Clipchamp (1)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/7/2711c774d7e056ea7b33999a888fafd0ce1dd081.gif)

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

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [May 12, 2023, 5:10pm UTC](https://discourse.threejs.org/t/bend-plane-across-curved-surface/51504/2 "2023-05-12T17:10:55Z")

</div>

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](https://en.wikipedia.org/wiki/Gaussian_function) is a good choice , but my preference is the simple [cosine function](https://en.wikipedia.org/wiki/Sine_and_cosine).
- 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:

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/d/5d08e5d2a9e87bf0e6c686878b8976116014a8c4.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/d/5d08e5d2a9e87bf0e6c686878b8976116014a8c4.mp4)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 12, 2023, 7:44pm UTC](https://discourse.threejs.org/t/bend-plane-across-curved-surface/51504/3 "2023-05-12T19:44:14Z")

</div>

I went the way with the [smoothstep](https://en.wikipedia.org/wiki/Smoothstep) function, with absolute value on X-axis.

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/6/56fec41e47b2f09772b12629501fd4e0fdeb0b8c.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/6/56fec41e47b2f09772b12629501fd4e0fdeb0b8c.mp4)

Made it with `ShaderMaterial`, but it’s pretty much doable with plain JS, as the framework has [this](https://threejs.org/docs/index.html#api/en/math/MathUtils.smoothstep).

---

<div class="post-metadata">

**Author:** ![Samuel\_talabi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/samuel_talabi/32/36031_2.png) [@Samuel\_talabi](https://discourse.threejs.org/u/Samuel_talabi)\
**Post date:** [May 15, 2023, 10:28am UTC](https://discourse.threejs.org/t/bend-plane-across-curved-surface/51504/4 "2023-05-15T10:28:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 16, 2023, 11:49am UTC](https://discourse.threejs.org/t/bend-plane-across-curved-surface/51504/5 "2023-05-16T11:49:12Z")

</div>

> [@Samuel\_talabi](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![Parth\_Bavaliya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/parth_bavaliya/32/44532_2.png) [@Parth\_Bavaliya](https://discourse.threejs.org/u/Parth_Bavaliya)\
**Post date:** [February 8, 2024, 5:14am UTC](https://discourse.threejs.org/t/bend-plane-across-curved-surface/51504/6 "2024-02-08T05:14:38Z")

</div>

I want to crate this effect anyone can help me?

---

<div class="post-metadata">

**Author:** ![help\_teste](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/help_teste/32/55642_2.png) [@help\_teste](https://discourse.threejs.org/u/help_teste)\
**Post date:** [January 15, 2025, 12:32am UTC](https://discourse.threejs.org/t/bend-plane-across-curved-surface/51504/7 "2025-01-15T00:32:02Z")

</div>

Hello, do you have the implementation of this example?

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [January 15, 2025, 6:32am UTC](https://discourse.threejs.org/t/bend-plane-across-curved-surface/51504/8 "2025-01-15T06:32:21Z")

</div>

[https://codepen.io/boytchev/pen/QWZxQdB](https://codepen.io/boytchev/pen/QWZxQdB)