three.js - 使用四元数和 tween.js 移动相机

Question

我想将相机从一个点旋转到另一个点（沿着球体的表面）。相机正在查看一个物体的中心。

我使用以下有效的代码，但我不确定它是否正确。

  rotateCameraTo (cameraX, cameraY, cameraZ, time) {
    const camera = this._camera.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);
    cameraVectorStart.normalize();
    cameraVectorEnd.normalize();

    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)
      .easing(TWEEN.Easing.Quadratic.InOut)
      .onUpdate(function () {
        camera.position.set(initialCamera.x, initialCamera.y, initialCamera.z);
        qm.slerpQuaternions(qa, qb, ti.t);
        camera.position.applyQuaternion(qm);
        //At the moment the object is centered in the origin
        camera.lookAt(0, 0, 0);
      })
      .onComplete(function () {
        window.cancelAnimationFrame(animationID);
      })
      .start();
  }

我不知道是否正确的事情：

• 我将相机设置为每个 .onUpdate() 的初始位置。
• 我使用 let qa = new Quaternion(0, 0, 0, 1) 因为它有效，但我不确定这一点。
• 如果有比使用四元数更好的解决方案

另一个疑问是是否有可能获得另一条路径，而不是从一个点到另一个点更短。这是因为我更喜欢以 Y 作为枢轴旋转，但如果我使用具有不同 Y 值的点，它就不起作用。

任何建议将不胜感激！

标签： three.js