Holes don't remove the border of a shape

Questions
,
1

Hello, I am trying to achieve a shape similar to that of a donut segment. My first thought was to create one big quarter circle and then a smaller one which will hide the inner part

let shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.absarc(0, 0, radius, 0, Math.PI/2, false);
shape.lineTo(0, 0);
//cut out the center
let holePath = new THREE.Path();
holePath.moveTo(0,0);
holePath.absarc(0,0, radius*0.8, 0, Math.PI/2, false);
holePath.lineTo(0,0);
shape.holes.push(holePath);

The code above works great except the fact that the border of the shape element remains visible even though holePath technically covers these coordinates. Maybe there is something I have misunderstood about holes?

Screenshot (658)
Screenshot (658)750×558 21.1 KB

2

Holes are not completely subtractive. The contour of the outer shape will always persist. The Shape API can not be used as a CSG replacement.

3 Likes
3

Ah, I see. Thank you for the answer! I will try to achieve it with just the Shape API then

4

For a such shape, I would have used just two absarc: https://codepen.io/prisoner849/pen/XWZRPJN

const radius = 5;
let shape = new THREE.Shape()
  .absarc(0, 0, radius, 0, Math.PI * 0.5, false)
  .absarc(0, 0, radius * 0.8, Math.PI * 0.5, 0, true);
5 Likes