Move camera with quaternions and tween.js

Question in stackoverflow url
I want to move the camera with a rotation from one point to another one (following the surface of a sphere). The camera is looking at the center of one object.

I use the following code that works, but I’m not sure if it is correct.

rotateCameraTo (cameraX, cameraY, cameraZ, time) {
    const camera =;
    const initialCamera = new Vector3().copy(camera.position);

    const cameraVectorStart = new Vector3(camera.position.x, camera.position.y, camera.position.z);
    const cameraVectorEnd = new Vector3(cameraX, cameraY, cameraZ);

    let qa = new Quaternion(0, 0, 0, 1);
    let qb = new Quaternion().setFromUnitVectors(cameraVectorStart, cameraVectorEnd);
    let qm = new Quaternion();

    let ti = { t: 0 };

    new TWEEN.Tween(ti)
      .to({ t: 1 }, time)
      .onUpdate(function () {
        camera.position.set(initialCamera.x, initialCamera.y, initialCamera.z);
        qm.slerpQuaternions(qa, qb, ti.t);
        //At the moment the object is centered in the origin
        camera.lookAt(0, 0, 0);
      .onComplete(function () {

Things that I don’t know if there are correct:

  • I set the camera to initial position every .onUpdate().
  • I use let qa = new Quaternion(0, 0, 0, 1) because it works but I’m not sure about this.
  • If there is a better solution than use quaternions

Another doubt is if it is possible to get another path instead the shorter from one point to the other one. This is because I prefer to rotate with Y as a pivot, but If I use points with different values of Y it does not work.

Any suggestions will be greatly appreciated!