javascript - Three.js Blender 风格的轨道控制 - 沿球面经度不受限制的移动

Question

我正在尝试构建一个搅拌机风格的轨道控制器。这是代码。

// Initialization
const offset = new Vector3();
let quat = new Quaternion();
let quatInverse = new Quaternion();
const v = new Vector3(0,0,0);
const spherical = new Spherical();
const sphericalD = new Spherical();
const cameraLookAt = new Vector3(0,0,0);

// Render

const speed = 5;
let updateController = false;

if (keyPressed["ArrowLeft"]) {
  sphericalD.theta -= (2 * Math.PI * speed) / domElement.clientHeight;
  updateController = true;
}

if (keyPressed["ArrowRight"]) {
  sphericalD.theta += (2 * Math.PI * speed) / domElement.clientHeight;
  updateController = true;
}

if (keyPressed["ArrowUp"]) {
  sphericalD.phi -= (2 * Math.PI * speed * 0.5) / domElement.clientHeight;
  updateController = true;
}

if (keyPressed["ArrowDown"]) {
  sphericalD.phi += (2 * Math.PI * speed * 0.5) / domElement.clientHeight;
  updateController = true;
}

if (updateController) {
  offset.copy(camera.position).sub(cameraLookAt);
  quat.setFromUnitVectors(camera.up, v);
  offset.applyQuaternion(quat);
  quatInverse = quat.invert();
  spherical.setFromVector3(offset);
  spherical.theta += sphericalD.theta;
  spherical.phi += sphericalD.phi;

  spherical.phi = Math.max(-Math.PI, Math.min(Math.PI, spherical.phi));
  spherical.makeSafe();

  offset.setFromSpherical(spherical);
  offset.applyQuaternion(quatInverse);
  camera.position.copy(cameraLookAt).add(offset);

  updateController = false;
  sphericalD.theta = 0;
  sphericalD.phi = 0;
}

camera.lookAt(cameraLookAt);

我确实可以在球体的纬度上不受限制地移动相机，但纵向移动仅限于两极。

有人可以帮助我沿经度不受限制地移动。

沙盒