# How can I add a curve to a geometry using threejs?

**URL:** <https://discourse.threejs.org/t/how-can-i-add-a-curve-to-a-geometry-using-threejs/50700>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [April 21, 2023, 3:11pm UTC](https://discourse.threejs.org/t/how-can-i-add-a-curve-to-a-geometry-using-threejs/50700 "2023-04-21T15:11:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Emre\_Basala](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/emre_basala/32/14686_2.png) [@Emre\_Basala](https://discourse.threejs.org/u/Emre_Basala)\
**Post date:** [April 21, 2023, 3:11pm UTC](https://discourse.threejs.org/t/how-can-i-add-a-curve-to-a-geometry-using-threejs/50700/1 "2023-04-21T15:11:28Z")

</div>

I am creating a 3D plane using the pseudo code below.

```javascript
  var point_records = [
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(100,0, 0),
    new THREE.Vector3(100,50, 0),
    new THREE.Vector3(0,50, 0),
  ]

  let shape = new three.Shape(point_records); 

  let geometry = new three.ExtrudeBufferGeometry(shape, {
      depth: 1,
      bevelEnabled: false,
      steps: 1,
      bevelThickness: 0,
      bevelSize: 10,
      bevelSegments: 0,
      material: 0,
      extrudeMaterial: 1
    } );
    
  var mesh = new three.Mesh(geometry, materials);

```

I am limited to use a list of coordinates as a starting point for the shape. (there can be 5 or move points)  
This creates a 3d flat plane. I want to add a curve to this plane.

My initial idea is that I need to subdivide the plane into a lot of smaller triangles so I can manipulate their coordinates. But I am not sure how to proceed.  
I am trying to add a curve to the geometry like this.

 ![Screenshot 2023-04-21 at 16.53.01](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/c/4c2c9af573e74a155ac97d17cab06955bcef4ee6.jpeg)

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [April 21, 2023, 3:45pm UTC](https://discourse.threejs.org/t/how-can-i-add-a-curve-to-a-geometry-using-threejs/50700/2 "2023-04-21T15:45:44Z")

</div>

you can start by making a picture of what the end result should look like (for example me - I have no idea)

---

<div class="post-metadata">

**Author:** ![Emre\_Basala](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/emre_basala/32/14686_2.png) [@Emre\_Basala](https://discourse.threejs.org/u/Emre_Basala)\
**Post date:** [April 21, 2023, 3:54pm UTC](https://discourse.threejs.org/t/how-can-i-add-a-curve-to-a-geometry-using-threejs/50700/3 "2023-04-21T15:54:24Z")

</div>

Thanks, I added a photo I found from the internet, I hope this makes it make sense a bit more.

---

<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:** [April 21, 2023, 6:57pm UTC](https://discourse.threejs.org/t/how-can-i-add-a-curve-to-a-geometry-using-threejs/50700/4 "2023-04-21T18:57:26Z")

</div>

Why not bend `PlaneGeometry`?  
Or use `CylinderGeometry`?

---

<div class="post-metadata">

**Author:** ![Emre\_Basala](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/emre_basala/32/14686_2.png) [@Emre\_Basala](https://discourse.threejs.org/u/Emre_Basala)\
**Post date:** [April 21, 2023, 7:06pm UTC](https://discourse.threejs.org/t/how-can-i-add-a-curve-to-a-geometry-using-threejs/50700/5 "2023-04-21T19:06:37Z")

</div>

The coordinates are dynamic and it can be 3 points, or 5 points,

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [April 21, 2023, 9:50pm UTC](https://discourse.threejs.org/t/how-can-i-add-a-curve-to-a-geometry-using-threejs/50700/6 "2023-04-21T21:50:27Z")

</div>

the simplest way to do this would be [like this](https://jsfiddle.net/q5czjdfw/)

> My initial idea is that I need to subdivide the plane into a lot of smaller triangles

yes, do that