Arc 2D shape from circle attributes

Questions
, ,
1

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.
arc

I tried the following:

        var r =  this.circle.r;
        var rInner =  this.circle.r - 100;
        var cx = this.circle.x;
        var cy = this.circle.y;
        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:

arc3D
arc3D1383×600 57.2 KB

Any ideas how to fix it would be really appreciated.

2

Seems, it’s enough to do it this way: https://jsfiddle.net/prisoner849/ovrf9mqL/

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

изображение
изображение676×501 16.1 KB

2 Likes
3

Thank you! exactly what I needed.

4

You’re welcome :beers:

1 Like
5

Prisoner849 to the rescue!
Very useful!

2 Likes