ThreeJS问题：如何让Obj2围绕(0,0,0)处的Obj1正确轨道运动？

我已创建如图所示的ThreeJS场景，并编写了两个方法，用于让Obj2以指定distance围绕Obj1旋转。

function configureObj2PositionHorizontally(angleInDegree) {
  radianAngle = angleInDegree * oneDegreeInRadians;

  obj2Mesh.position.x = distance * Math.cos(radianAngle);
  obj2Mesh.position.z = distance * Math.sin(radianAngle);

  console.log(radianAngle, distance);
}

function configureObj2PositionVertically(angleInDegree) {
  radianAngle = angleInDegree * oneDegreeInRadians;

  obj2Mesh.position.y = distance * Math.sin(radianAngle);
  obj2Mesh.position.z = distance * Math.cos(radianAngle);

  console.log(radianAngle, distance);
}

当前问题是：当Obj2移动到类似pointA的位置时，尝试垂直旋转时会围绕Z轴旋转，而非中心点(0,0,0)。需让Obj2仅围绕位于(0,0,0)的Obj1轨道运动，该如何修正此行为？

修正方案 #

问题根源在于当前的两个方法独立修改单平面坐标，没有结合已有的空间角度，导致垂直旋转时脱离原点轨道。通过维护水平、垂直两个角度，基于球面坐标计算三维位置即可解决：

1. 定义全局变量存储当前角度：

let horizontalAngle = 0; // 绕Y轴的水平方位角（单位：度）
let verticalAngle = 0;   // 绕X轴的垂直俯仰角（单位：度）
const oneDegreeInRadians = Math.PI / 180;

2. 编写统一的位置更新函数，基于双角度计算笛卡尔坐标：

function updateObj2Position() {
  const horRad = horizontalAngle * oneDegreeInRadians;
  const verRad = verticalAngle * oneDegreeInRadians;

  // 先计算垂直角度约束后的X-Z平面半径
  const xzPlaneRadius = distance * Math.cos(verRad);
  // 计算X、Z轴坐标（水平旋转）
  obj2Mesh.position.x = xzPlaneRadius * Math.cos(horRad);
  obj2Mesh.position.z = xzPlaneRadius * Math.sin(horRad);
  // 计算Y轴坐标（垂直旋转）
  obj2Mesh.position.y = distance * Math.sin(verRad);
}

3. 改写原有的两个控制方法，改为更新角度后调用统一更新函数：

function configureObj2PositionHorizontally(angleInDegree) {
  horizontalAngle = angleInDegree;
  updateObj2Position();
}

function configureObj2PositionVertically(angleInDegree) {
  verticalAngle = angleInDegree;
  updateObj2Position();
}

这种方式通过球面坐标转换，确保Obj2始终以指定距离围绕原点做三维轨道运动，无论水平或垂直旋转都不会偏离轨道。

内容的提问来源于stack exchange，提问作者Janith Ganewatta