I’ve been trying to draw an ellipse arc between two arbitrary points but my implementation is not working in some situations.
Because a part of this is involves mathematics, I started by asking this question. Basically, given two points and the center, you can always get an ellipse if you allow rotation, except for cases where the points are collinear.
The solution proposed to that question is to:
- Translate the center to the origin, translating both points by the same vector.
- Rotate both points by the angle
-alphawhich is the simetric of the angle of the largest vector with the positive x-semiaxis.
- Solve the ellipse equation to find its radiuses (system of two equations with two unknowns).
- Define the ellipse
- Rotate back the ellipse with the angle
alphaand translate back to its center.
However, I’m having trouble implementing this in Three.js. The documentation for the EllipseCurve lists the expected parameters. I assume the starting angle to always be zero and then set the end angle to either the angle between the two vectors or its simetric. I also want the arc to always be the smallest (i.e., if the angle is bigger than 180º, I’d use the complementary arc). I assume the center of the ellipse to be the middle point between the centers of the shape’s bounding boxes.
This is my example code:
Code regarding the ellipse arc is under the class
EllipseArc and you can mess with the transformation applied to the object in line 190.