Arc 2D shape from circle attributes

Hello everyone, I am trying to make this 2D shape to be extruded using ExtrudeGeometry. However, I can’t a way to make the shape. I have circle center, circle radius, start and end angle of the arc.

I tried the following:

        var r =;
        var rInner = - 100;
        var cx =;
        var cy =;
        var antiClockwise  = true;

        shape.moveTo( cx + (rInner * Math.cos(this.sAngle)), cy +(rInner * Math.sin(this.sAngle)) );
        shape.lineTo(cx + (r * Math.cos(this.sAngle)),cy + (r * Math.sin(this.sAngle)));
        shape.arc( cx, cy, r, this.sAngle, this.eAngle, antiClockwise );
        shape.lineTo(cx + (rInner * Math.cos(this.eAngle)),cy + (rInner * Math.sin(this.eAngle)));
        shape.arc( cx, cy, rInner, this.eAngle, this.sAngle, !antiClockwise );
        var geo = new ShapeGeometry(shape);

Which is producting this:

Any ideas how to fix it would be really appreciated.

Seems, it’s enough to do it this way:

var R =  5;
var r =  R - 1;
var cx = 1;
var cy = 2;
var sAngle = THREE.MathUtils.degToRad(30);
var eAngle = THREE.MathUtils.degToRad(150);

let shape = new THREE.Shape();

shape.absarc(cx, cy, R, sAngle, eAngle);
shape.absarc(cx, cy, r, eAngle, sAngle, true);


Thank you! exactly what I needed.

You’re welcome :beers:

1 Like

Prisoner849 to the rescue!
Very useful!