# How to create this shape in three.js

**URL:** <https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [February 10, 2023, 8:54am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859 "2023-02-10T08:54:35Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [February 10, 2023, 8:54am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/1 "2023-02-10T08:54:36Z")

</div>

Hi,

I have to make a serpentine shape but I am not able to get intended look.

Can anyone please help me?

---

<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:** [February 10, 2023, 8:57am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/2 "2023-02-10T08:57:47Z")

</div>

Use [`TubeGeometry`](https://threejs.org/docs/#api/en/geometries/TubeGeometry).

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [February 10, 2023, 9:02am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/3 "2023-02-10T09:02:49Z")

</div>

Thank you !!

I checked it but i am not able to make a path for this shape !!

---

<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:** [February 10, 2023, 9:06am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/4 "2023-02-10T09:06:14Z")

</div>

To make this path, provide a set of points describing the corners of the path. And also, please, share you attempt on CodePen, JSFiddle or a similar system.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [February 10, 2023, 9:07am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/5 "2023-02-10T09:07:17Z")

</div>

I would make it in blender.  
Here is a video I made many years ago showing how to quickly and easily create pipes in blender.

[![](https://i.ytimg.com/vi/HOYZ-Uq6Zb8/hqdefault.jpg "How to Quickly and Easily Create Pipes With Bends in Blender") ](https://www.youtube.com/watch?v=HOYZ-Uq6Zb8)

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [February 10, 2023, 9:15am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/6 "2023-02-10T09:15:43Z")

</div>

This is my output

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/a/1adfa19d7792738f54948813745f2b855b1074bb.png)

with this as my code:

```javascript

  var path = [
    new THREE.Vector3(1, 0, 0),
    new THREE.Vector3(25, 0, 0),
    new THREE.Vector3(1, 20, 0),
    new THREE.Vector3(25, 20, 0),
    new THREE.Vector3(1, 40, 0),
    new THREE.Vector3(25, 40, 0),
    new THREE.Vector3(1, 60, 0),
    new THREE.Vector3(25, 60, 0),
  ];
  var pathBase = new THREE.CatmullRomCurve3(path);
  var rod_geometry = new THREE.TubeGeometry(pathBase, 20, 2, 8, false);

  var rod_material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  var rod = new THREE.Mesh(rod_geometry, rod_material);
  scene.add(rod);

```

---

<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:** [February 10, 2023, 9:18am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/7 "2023-02-10T09:18:25Z")

</div>

I see. You only need to provide a better set of points. And more detailed tube (not 20, but 1000 for example).

---

<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:** [February 10, 2023, 9:23am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/8 "2023-02-10T09:23:38Z")

</div>

I thought you need a flat shape, not a 3D-tube 🤔

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [February 10, 2023, 9:24am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/9 "2023-02-10T09:24:31Z")

</div>

I needed flat shape but i could not make it and then i found tube so i went with something rather than nothing ☹

---

<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:** [February 10, 2023, 9:26am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/10 "2023-02-10T09:26:57Z")

</div>

Flattened tube:

```javascript
rod.scale.set( 1, 1, 0);

```

---

<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:** [February 10, 2023, 9:31am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/11 "2023-02-10T09:31:50Z")

</div>

> [@PavelBoytchev](#):
>
> `rod.scale.set( 1, 1, 0);`

Reminds me about this: [Scaling an object in three.js - Stack Overflow](https://stackoverflow.com/a/33918318/4045502)  
I think, better to scale the geometry instead 🤔

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [February 10, 2023, 9:34am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/12 "2023-02-10T09:34:37Z")

</div>

I am getting this shape

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/8/38c5cd59cfa96d14aac55639e21086ac8cda3ca3.png)

and not able to get rid of this wierd shape

```javascript
  var path = [
    new THREE.Vector3(1, 0, 0),
    new THREE.Vector3(25, 0, 0),
    new THREE.Vector3(26, 2, 0),
    new THREE.Vector3(25, 3, 0),
    new THREE.Vector3(1, 20, 0),
    new THREE.Vector3(25, 20, 0),
    new THREE.Vector3(26, 22, 0),
    new THREE.Vector3(25, 24, 0),
    new THREE.Vector3(1, 40, 0),
    new THREE.Vector3(25, 40, 0),
    new THREE.Vector3(26, 42, 0),
    new THREE.Vector3(25, 41, 0),
    new THREE.Vector3(1, 60, 0),
    new THREE.Vector3(25, 60, 0),
  ];
  var pathBase = new THREE.CatmullRomCurve3(path);
  var rod_geometry = new THREE.TubeGeometry(pathBase, 20, 2, 8, false);

  var rod_material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  var rod = new THREE.Mesh(rod_geometry, rod_material);
  rod.scale.set(1, 1, 0);
  scene.add(rod);

```

even after adding many points in corner !!!

---

<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:** [February 10, 2023, 9:38am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/13 "2023-02-10T09:38:53Z")

</div>

> [@Pravin\_Poudel](#):
>
> `var rod_geometry = new THREE.TubeGeometry(pathBase, 20, 2, 8, false);`

Here you’ve got 20 equidistant sections along the path. What do you expect to see?

---

<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:** [February 10, 2023, 9:39am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/14 "2023-02-10T09:39:06Z")

</div>

> [@Pravin\_Poudel](#):
>
> even after adding many points in corner

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/7/0711b9ed7efcca598042242493c46933dc004b91.png)

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [February 10, 2023, 9:42am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/15 "2023-02-10T09:42:36Z")

</div>

ohh !! when u said i need to change 20 to something bigger, you meant number of segments ?? I thought the distance between points !!!

Oh god !! Thank you so much !!!

I am so stupid

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [February 10, 2023, 10:08am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/16 "2023-02-10T10:08:13Z")

</div>

Awesome, i got this shape which is what i wanted to make !!

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/d/2d0dcf0dc740e709c2b1c787629e884de43bb517.png)

Thank you

---

<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:** [February 10, 2023, 11:11am UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/17 "2023-02-10T11:11:49Z")

</div>

@Pravin_Poudel: I’m sorry for the confusion. What is obvious to one person is not necessarily obvious to another one. I should have been more specific.

@prisoner849: Yes, zeros are dangerous. Scaling the geometry is safer. Maybe some small non-zero value would also be fine… or just using 2 radial segments (a kind of making a round worm into a tape worm).

@me: Have a rest.

---

<div class="post-metadata">

**Author:** ![anidivr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/anidivr/32/32924_2.png) [@anidivr](https://discourse.threejs.org/u/anidivr)\
**Post date:** [February 10, 2023, 12:59pm UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/18 "2023-02-10T12:59:15Z")

</div>

Try drawing it using SvgPathEditor ([yqnn.github.io](http://yqnn.github.io)). Import the SVG to get a flat shape.

---

<div class="post-metadata">

**Author:** ![anidivr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/anidivr/32/32924_2.png) [@anidivr](https://discourse.threejs.org/u/anidivr)\
**Post date:** [February 10, 2023, 1:09pm UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/19 "2023-02-10T13:09:43Z")

</div>

Here’s the SVG  
\<svg viewBox=“-5 -10 9 9” xmlns="http:// www .w3.org/2000/svg " \>  
\<path d=“M 3 -10 L 3 -8 Q 3 -7 2 -7 L -2 -7 C -4 -7 -4 -5 -2 -5 L 2 -5 C 4 -5 4 -1 2 -1 L -2 -1 L -2 -2 L 2 -2 C 3 -2 3 -4 2 -4 L -2 -4 C -5 -4 -5 -8 -2 -8 L 2 -8 L 2 -10” fill=“black” /\>  
\</svg\>

Here’s equivalent threejs code  
const shape = new Shape()  
.moveTo(0.3, 1)  
.lineTo(0.3, 0.8)  
.quadraticCurveTo(0.3, 0.7, 0.2, 0.7)  
.lineTo(-0.2, 0.7)  
.bezierCurveTo(-0.4, 0.7, -0.4, 0.5, -0.2, 0.5)  
.lineTo(0.2, 0.5)  
.bezierCurveTo(0.4, 0.5, 0.4, 0.1, 0.2, 0.1)  
.lineTo(-0.2, 0.1)  
.lineTo(-0.2, 0.2)  
.lineTo(0.2, 0.2)  
.bezierCurveTo(0.3, 0.2, 0.3, 0.4, 0.2, 0.4)  
.lineTo(-0.2, 0.4)  
.bezierCurveTo(-0.5, 0.4, -0.5, 0.8, -0.2, 0.8)  
.lineTo(0.2, 0.8)  
.lineTo(0.2, 1)

const geometry = new ShapeGeometry(shape);

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/9/1999d8a38647a319abc89d4ac9a88318ac7c5b45.png)

---

<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:** [February 10, 2023, 2:26pm UTC](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859/20 "2023-02-10T14:26:01Z")

</div>

> [@Pravin\_Poudel](#):
>
> i got this shape which is what i wanted to make

Not sure that this is the serpentine you’ve got on the example.  
I tried it with a plane and a path of arcs 🤔

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/5/3507b75ef973a7521351b6c201440bbdc711a479.png)

[Next page](https://discourse.threejs.org/t/how-to-create-this-shape-in-three-js/47859.md?page=2)