Ringsegment function leads to strange behaviour

Questions
8

Just an option:

var angle = 45;

var shape = new THREE.Shape();
shape.absarc(-5, 0, 10, 0, THREE.Math.degToRad(angle), false); // CCW - outer
shape.absarc(-5, 0, 5, THREE.Math.degToRad(angle), 0, true); // CW - inner

var shapeGeom = new THREE.ShapeGeometry(shape);
var shapeMat = new THREE.MeshBasicMaterial({color: 0x00ff00});
var shapeMesh = new THREE.Mesh(shapeGeom, shapeMat);
scene.add(shapeMesh);

But, if got your scheme correctly, you’re looking for something like this:

var angle = 45;
var Ro = 10;
var Ri = 5;
var center = new THREE.Vector2(0, 0);
var shift = 0.5; // "space" on your scheme, though, it would be better to call it "offset" here instead of "shift"

var Xo = getX(Ro, shift); // x-value for a point on the outer radius
var Po1 = new THREE.Vector2( Xo,  shift);  // find the first point on the outer radius
var Po2 = new THREE.Vector2( Xo, -shift).rotateAround(center, THREE.Math.degToRad(angle)); // find the second point on the outer radius
var Ao1 = Po1.angle(); // find the angle for the first point
var Ao2 = Po2.angle(); // find the angle for the second point

// the same actions for the point on the inner radius
var Xi = getX(Ri, shift);
var Pi1 = new THREE.Vector2( Xi,  shift);
var Pi2 = new THREE.Vector2( Xi, -shift).rotateAround(center, THREE.Math.degToRad(angle));
var Ai1 = Pi1.angle();
var Ai2 = Pi2.angle();

// gather all the things we did before to create a shape
var shape2 = new THREE.Shape();
shape2.absarc(center.x, center.y, Ro, Ao1, Ao2, false); // CCW - outer
shape2.absarc(center.x, center.y, Ri, Ai2, Ai1, true); // CW - inner

var shapeGeom2 = new THREE.ShapeGeometry(shape2);
var shapeMat2 = new THREE.MeshBasicMaterial({color: 0xffff00});
var shapeMesh2 = new THREE.Mesh(shapeGeom2, shapeMat2);
scene.add(shapeMesh2);

// helper function
function getX(radius, shift){
  return Math.sqrt(radius * radius - shift * shift);
}
2 Likes