Rotation to a point in a circle using three.js

Question

Currently, I am in possession of 2 instances of THREE.Vector3().

My task at hand is to create a circular shape around one vector with the second vector serving as a tangent.

I have determined the radius of the circle geometry based on the distance between the two vectors.

How can I transform the circle in order for it to intersect with the second vector?

Moreover, how do I determine the rotation (in radians) of the circle?

Can I leverage functions within the THREE framework or would a mathematical approach be more suitable for this scenario?

(Ideally, I am hoping that there exists a fundamental function within the 3D framework).

Answer 1

Answer №1

When working with 3D vector graphics, a common trick is using 4x4 homogenous transform matrices

To achieve this effect, you create the matrix and apply it to the entire geometry
This process is typically handled on the graphics hardware side
In certain scenarios, you can skip calculating angles and simply compute the basis vectors

Below is my implementation of glCircle3D in C++/OpenGL:

void glCircle3D(double *pos,double *nor,double r,bool _fill)
    {
    // implementation details here...
    }

nor represents the circle normal (in this case, the second vector)
pos indicates the circle center position (0,0,0 in your scenario)
r denotes the radius (size of the first vector in your case)
x,y vectors serve as the basis vectors, orthogonal to nor
By copying x,y,nor,pos into the appropriate fields of the matrix, you can construct the transform matrix
No need for complex trigonometric functions like atan2 or acos(dot(v1,v2)), simple cross product suffices
My code leverages a custom vector library, which includes functions like vector_ld, vector_mul, vector_add, etc.
The circle coordinates are determined by the formula: p=pos+x*cos(alpha)+y*sin(alpha);
The radius r is already accounted for within the x,y basis vectors

Answer 2

When working with 3D vector graphics, a common trick is using 4x4 homogenous transform matrices

To achieve this effect, you create the matrix and apply it to the entire geometry
This process is typically handled on the graphics hardware side
In certain scenarios, you can skip calculating angles and simply compute the basis vectors

Below is my implementation of glCircle3D in C++/OpenGL:

void glCircle3D(double *pos,double *nor,double r,bool _fill)
    {
    // implementation details here...
    }

nor represents the circle normal (in this case, the second vector)
pos indicates the circle center position (0,0,0 in your scenario)
r denotes the radius (size of the first vector in your case)
x,y vectors serve as the basis vectors, orthogonal to nor
By copying x,y,nor,pos into the appropriate fields of the matrix, you can construct the transform matrix
No need for complex trigonometric functions like atan2 or acos(dot(v1,v2)), simple cross product suffices
My code leverages a custom vector library, which includes functions like vector_ld, vector_mul, vector_add, etc.
The circle coordinates are determined by the formula: p=pos+x*cos(alpha)+y*sin(alpha);
The radius r is already accounted for within the x,y basis vectors