# Bend a geometry

**URL:** <https://discourse.threejs.org/t/bend-a-geometry/53089>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [June 21, 2023, 9:28am UTC](https://discourse.threejs.org/t/bend-a-geometry/53089 "2023-06-21T09:28:16Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![weijian-zhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/weijian-zhu/32/25688_2.png) [@weijian-zhu](https://discourse.threejs.org/u/weijian-zhu)\
**Post date:** [June 21, 2023, 9:28am UTC](https://discourse.threejs.org/t/bend-a-geometry/53089/1 "2023-06-21T09:28:16Z")

</div>

Hello community, I have a plane, how do I bend a plane like this

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/e/ce15b96ad0b33517ed65442e3d4361f40a76b67a.png)  
Turn into  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/d/9d86a17c03fae276627e20bed80a834cff5bf551.png)

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [June 21, 2023, 1:58pm UTC](https://discourse.threejs.org/t/bend-a-geometry/53089/2 "2023-06-21T13:58:01Z")

</div>

You can edit the geometry position vertices, or create three plane geometries, transform them (translate and rotate), then merge them with [mergeGeometries](https://threejs.org/docs/?q=Buffer#examples/en/utils/BufferGeometryUtils.mergeGeometries). That’s one option among others, here is working [example](https://jsfiddle.net/pvjo3smx/).

If you need a curved plane check this thread:

> [@Simple curved plane](https://discourse.threejs.org/t/simple-curved-plane/26647):
>
> Hi. Discovering threejs since one month with an Oculus. Wow. WOW. Seem’s i found a really great toy for the rest of my addict dev life. I already made some basic stuff successfully. I’m learning three, i dev vanillia js since a long time. I found a lot of answers in discourse, google, doc … I’m using the dev branch of threejs (because i’d like to understand how gui.dat in vr mode is working without a raytracer slight_smile ) My question is : how to draw a simple plane (or rectangle) curv…

Or this one using a path:

> [@How to create a curved plane based on path?](https://discourse.threejs.org/t/how-to-create-a-curved-plane-based-on-path/49643):
>
> I now encounter a requirement to draw a curved plane on the ground according to the specified path. And then draw a plane based on this path.

---

<div class="post-metadata">

**Author:** ![weijian-zhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/weijian-zhu/32/25688_2.png) [@weijian-zhu](https://discourse.threejs.org/u/weijian-zhu)\
**Post date:** [June 21, 2023, 2:13pm UTC](https://discourse.threejs.org/t/bend-a-geometry/53089/3 "2023-06-21T14:13:13Z")

</div>

Thank you. The information you provided is very helpful and I will read it carefully

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [June 21, 2023, 3:35pm UTC](https://discourse.threejs.org/t/bend-a-geometry/53089/4 "2023-06-21T15:35:38Z")

</div>

You can find more bends in the [collection](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315).

[CorrugatedFabric](https://hofk.de/main/discourse.threejs/2022/CorrugatedFabric/CorrugatedFabric.html)

[AnimatingBookPages](https://hofk.de/main/discourse.threejs/2021/AnimatingBookPages/AnimatingBookPages.html)

[RemoveTriangles](https://hofk.de/main/discourse.threejs/2021/RemoveTriangles/RemoveTriangles.html)

[AnimatingVertices](https://hofk.de/main/discourse.threejs/2021/AnimatingVertices/AnimatingVertices.html)

[PlaneToFish](https://hofk.de/main/discourse.threejs/2021/PlaneToFish/PlaneToFish.html)

[BilinearInterpolationShader](https://hofk.de/main/discourse.threejs/2019/BilinearInterpolationShader/BilinearInterpolationShader.html)

[ColorStripeChanging](https://hofk.de/main/discourse.threejs/2019/ColorStripeChanging/ColorStripeChanging.html)

---

<div class="post-metadata">

**Author:** ![weijian-zhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/weijian-zhu/32/25688_2.png) [@weijian-zhu](https://discourse.threejs.org/u/weijian-zhu)\
**Post date:** [June 21, 2023, 5:05pm UTC](https://discourse.threejs.org/t/bend-a-geometry/53089/5 "2023-06-21T17:05:53Z")

</div>

[custom geometry (codepen.io)](https://codepen.io/zhuweijian/pen/RwqGgrZ)

Because I want the geometry to look relatively simple, so I tried to create this geometry by custom coordinates, but now I am stuck in the uv setting step, I don’t understand what is wrong with my uv setting, resulting in the map not covering the whole surface correctly 😂

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/9/5983f50d19149dd84e08a2b2081c73591964f691.jpeg)

---

<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:** [June 21, 2023, 5:30pm UTC](https://discourse.threejs.org/t/bend-a-geometry/53089/6 "2023-06-21T17:30:42Z")

</div>

Instead of:

```javascript
const uvs = new UInt16Array([1/3, 1, 2/3, 1, ...]);

```

try:

```javascript
const uvs = new Float32Array([1/3, 1, 2/3, 1, ...]);

```

because texture coordinates are floating-point values.

---

<div class="post-metadata">

**Author:** ![weijian-zhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/weijian-zhu/32/25688_2.png) [@weijian-zhu](https://discourse.threejs.org/u/weijian-zhu)\
**Post date:** [June 21, 2023, 5:36pm UTC](https://discourse.threejs.org/t/bend-a-geometry/53089/7 "2023-06-21T17:36:29Z")

</div>

Oh, I see. Thank you very much. I’ve been working on this problem for a long time