Formula for rounded triangle using THREE.Shape

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:

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

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?


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

1 Like

Early morning brain workout gave me this:



If you do it for an arbitrary polygon, you will not care whether it is triangle, square or socktagon.


@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 :slight_smile: .

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

Thx a lot!


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