# Formula for rounded triangle using THREE.Shape

**URL:** <https://discourse.threejs.org/t/formula-for-rounded-triangle-using-three-shape/67957>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [July 9, 2024, 11:36pm UTC](https://discourse.threejs.org/t/formula-for-rounded-triangle-using-three-shape/67957 "2024-07-09T23:36:38Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kikedao](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kikedao/32/26038_2.png) [@kikedao](https://discourse.threejs.org/u/kikedao)\
**Post date:** [July 9, 2024, 11:36pm UTC](https://discourse.threejs.org/t/formula-for-rounded-triangle-using-three-shape/67957/1 "2024-07-09T23:36:39Z")

</div>

Hi all!

I have this quite simple code that works wonders to create a rounded corner square using THREE.Shape, I later use the resulting shape with THREE.ExtrudeGeometry:

```javascript
const shape = new THREE.Shape();
const angleStep = Math.PI * 0.5;
const size = SYMBOL_SIZE;
const radius = SYMBOL_ROUNDED_RECT_RADIUS;

shape.absarc(size / 2 - radius, size / 2 - radius, radius, angleStep * 0, angleStep * 1);
shape.absarc(-size / 2 + radius, size / 2 - radius, radius, angleStep * 1, angleStep * 2);
shape.absarc(-size / 2 + radius, -size / 2 + radius, radius, angleStep * 2, angleStep * 3);
shape.absarc(size / 2 - radius, -size / 2 + radius, radius, angleStep * 3, angleStep * 4);

```

I’m trying to achieve the same but for a rounded corner **equilateral triangle** instead of a rounded corner square, but no matter what I try I can’t figure out how to do it.

Could any of the math/geometry wizards in the forum help me a bit with it please?

Thx!

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [July 10, 2024, 3:11am UTC](https://discourse.threejs.org/t/formula-for-rounded-triangle-using-three-shape/67957/2 "2024-07-10T03:11:24Z")

</div>

> [@kikedao](#):
>
> `Math.PI * 0.5`

angleStep is maybe gonna need to be like… Math.PI\*2/3

---

<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:** [July 10, 2024, 5:09am UTC](https://discourse.threejs.org/t/formula-for-rounded-triangle-using-three-shape/67957/3 "2024-07-10T05:09:47Z")

</div>

Early morning brain workout gave me this:

 ![Screenshot_20240710_080523_Chrome](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/a/8a22b2ad90fd8d33774002fa94cb7da21927a758.jpeg)

Demo: [https://codepen.io/prisoner849/full/KKjwgzw](https://codepen.io/prisoner849/full/KKjwgzw)

---

<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:** [July 10, 2024, 7:17am UTC](https://discourse.threejs.org/t/formula-for-rounded-triangle-using-three-shape/67957/4 "2024-07-10T07:17:09Z")

</div>

If you do it for an arbitrary polygon, you will not care whether it is triangle, square or [socktagon](https://www.goodreads.com/quotes/5856151-i-guess-a-sock-is-also-a-geometric-shape-technically-but-i).

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

---

<div class="post-metadata">

**Author:** ![kikedao](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kikedao/32/26038_2.png) [@kikedao](https://discourse.threejs.org/u/kikedao)\
**Post date:** [July 10, 2024, 11:07am UTC](https://discourse.threejs.org/t/formula-for-rounded-triangle-using-three-shape/67957/5 "2024-07-10T11:07:19Z")

</div>

@manthrax Yeah that was my first thought, using `Math.PI*2/3` and removing the 4th instruction when building the Shape, but because of how `absarc` works the result was not good.

@prisoner849 and @PavelBoytchev both of your replies are awesome, a million thx to both of you.  
For my use case the solution from @prisoner849 is the easiest one for me to use as I only have to provide the size and roundness similarly to what I was doing for the squares so I have to mark it as the solution, also intuitively seems more performant which is a very important factor for my app.  
Nevertheless @PavelBoytchev I’m saving your reply as a treasure for when I need to do something similar in a more generic way 🙂 .

Here is how these rounded triangular shapes/geometries look like now in my app:

 ![triangles](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/b/db97e69d4a252d74f46fb531ff45484000052539.png)

Thx a lot!

---

<div class="post-metadata">

**Author:** ![okbutsowhat](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/okbutsowhat/32/49712_2.png) [@okbutsowhat](https://discourse.threejs.org/u/okbutsowhat)\
**Post date:** [July 10, 2024, 12:55pm UTC](https://discourse.threejs.org/t/formula-for-rounded-triangle-using-three-shape/67957/6 "2024-07-10T12:55:50Z")

</div>

![Snipaste_2024-07-10_15-19-24](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/f/3fa2c760f4e8bf8aae300b1eab7ee392676091d9.png)

My solution works, but @PavelBoytchev solution is better!!

DEMO: [https://codepen.io/freecharming/pen/wvLBogz](https://codepen.io/freecharming/pen/wvLBogz)