title: ThreeJS: Rotate 3D Coordinate Axes in Line With Another Vector
body: <p>I have a solo project that aims to simulate the behavior of bending a line in 3D space (like bending a straw or reinforcement bars) using ThreeJS and React. I have already prepared pseudocode for it and working on its implementation; however, I'm struggling with a particular aspect for weeks now:</p>
  <p>The way I tackled this problem is to represent the line by the difference of two THREE.Vector3 points, P1 and P2 in 3D space. Between these two points is an intermediate coordinate P3 which will be the location of the bend. At this point, a unit sphere is placed with P3 as its center point. In addition, a 3D coordinate system is placed with P3 as the origin. The orientation of the axes is similar to that of the default THREE JS world axes.</p>
  <p>The axes are represented as THREE.Vector3: (1,0,0), (-1,0,0), (0,1,0), (0,-1,0), (0,0,1), (0,0,-1), each specifying the +x, -x, +y, -y, +z, -z directions respectively.</p>
  <p>These axes will be rotated so that the +x axis would be in line with P1 and P2 while maintaining the orthogonality of the 3D coordinate axes. Think of it as dragging (1,0,0) on the surface of the unit sphere to a point collinear to P1-P2 with the respective coordinates adjusting accordingly.</p>
  <p>What I'm struggling with is the implementation of rotating the whole 3D coordinate axes. How do you rotate the unit vectors so that it matches the condition? It would be easy if the bend point is at the world origin; however, that is not the case; hence, methods like Euler and Axis-Angle are not that simple to apply.</p>
  <p>The purpose of these axes is to orient another sphere responsible for the bend in 3D space. This new sphere must be tangent to the bend point and must revolve around it (like a ball revolving around a stick on a point); hence, the rotated unit vectors will be needed for performing the next operations. The orientation of this revolving sphere in the rotated y-z plane will be user-defined.</p>
  <p>I really appreciate any good feedback or guidance on how to approach this. This project is honestly giving me a coder's block. It's somewhat discouraging being unable to solve this for weeks now. Again, I'm grateful for any help. Thanks.</p>