Draw an arc between two vector

Questions
1

Hi,

My user can pick three points on a plane.
I draw a line between the first and the second point, and a line between the second point and the third point.
I’d like to draw an arc between theses lines but I can’t figure out how to do it.
Using EllipseCurve seems difficult to me, has anyone know how to do it please?

Thanks,

2

I may not understand exactly how your final result should look.
But here is a basic 3 points curve. Then you can either draw a line, or a mesh using the curve like example below.

This is only a small fraction of what three.js can do. You can draw more complex curves if needed.
https://threejs.org/docs/#api/en/extras/core/Curve

const vectA = new THREE.Vector3(ax,ay,az); //origin
const vectB = new THREE.Vector3(bx,by,bz); //tangent
const vectC = new THREE.Vector3(cx,cy,cz); //destination

const curve = new THREE.QuadraticBezierCurve3(vectA,vectB,vectC);
const mesh = new THREE.Mesh( new THREE.TubeGeometry( curve, 20, 1, 2, false ) );

other types of curves are available too:

1 Like
3

Thanks,
But that’s not what I’d like.
In fact, I like to draw a circle, its center is the second point, its radius is half of the smallest distance (point1-point2) and (point2-point3) but I’d like to draw it “between” the two vectors (point1-point2) and (point3-point2). The purpose of this is to show which angle I’m computing and displaying in my web app.

4

“A picture is worth a thousand words”

image

5

Exactly thanks for the picture!

6

My suggestion is to calculate two angles (between a horizontal line and the two vectors) and then you can draw the arc with CircleGeometry. However, you have to decide for yourself which arc to draw, as between two vectors there are two angles and two arcs, mutually completing:

  • oriented arc, it depends on which vector is the first and which is the second
  • minimal arc - i.e. the one that people usually think of
7

Don’t you mean ArcCurve instead of CircleGeometry?
I had the same idea to compute theses two angles, I hopped that a more straitforward solution might exist…

8

I mean CircleGeometry, but ArcCurve would be fine too (although it needs additional step of converting curve to geometry).

If you want to avoid calculation of angles, you can do all the work with vectors, but this might be an overkill. Anyway, here is my attempt for a solution without angles (see lines 86-102):

https://codepen.io/boytchev/full/MWLavWo

image

1 Like
9

Once again, thanks you very much. The solution for computing the arc is very clever!