Formula for rounded triangle using THREE.Shape

[kikedao]

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;
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!

[manthrax]

@kikedao

Math.PI * 0.5

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

[prisoner849]

Early morning brain workout gave me this:

Demo: https://codepen.io/prisoner849/full/KKjwgzw

[PavelBoytchev]

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

https://codepen.io/boytchev/pen/qBwoawE
https://codepen.io/boytchev/pen/NWmYbJm

[kikedao]

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

Thx a lot!

[okbutsowhat]

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

DEMO: https://codepen.io/freecharming/pen/wvLBogz