I have a challenge with my three.js project where I am rendering a cube in the center of two lines pointing to different directions. To interact with the scene, I am using OrbitControls along with some custom code (refer to the link below) to smoothly transition the camera around a central point to specific positions (North, East, South, West, and Top).
While this setup is generally working well, I'm encountering a few issues:
When transitioning from North to South by clicking on the respective buttons (same issue for East to West), the lerping between the two vectors fails, resulting in a sudden jump rather than a smooth transition.
Similarly, when moving from a custom rotation like NW to the top-down view by clicking the "Top" button, the camera correctly transitions along the y-axis but snaps to the final rotation once the movement is complete due to lack of control over its rotation during lerp.
I am seeking advice on a more effective method to smoothly transition the camera around a central point on a circular path from one vector to another, addressing the challenges mentioned above as well.
For reference, here's the CodePen link to my current three.js scene. Whenever a position button is clicked, I store the target vector and use the following line for lerping towards it:
camera.position.lerp(cameraTarget, cameraLerpAlpha);