Three.js：相机独立于父对象旋转及路径物体朝向调整

嘿，我来帮你搞定这两个Three.js的问题～

默认情况下，相机作为子对象会继承父对象的所有变换（包括旋转），要让它只跟着父对象移动但旋转不受影响，有几个实用的方案：

方案1：分离位置继承与旋转控制 #

最简单的思路是：让相机的位置和父对象保持同步，但旋转完全自己单独处理，不依赖父对象的旋转。每一帧更新时做这样的操作：

// 假设parentObj是相机的父对象，camera是你的相机实例
function updateCamera() {
  // 让相机位置和父对象完全一致
  camera.position.copy(parentObj.position);
  
  // 这里写你自己的相机旋转逻辑，比如鼠标控制、键盘控制或者自动旋转
  // 示例：让相机绕Y轴缓慢旋转，不受父对象旋转影响
  camera.rotation.y += 0.01;
}

这个方法的好处是逻辑直白，完全掌控相机的旋转行为，适合大多数场景。

方案2：提取父对象的位置，忽略旋转 #

如果相机必须保留父子关系（比如有其他父对象的变换需要继承，但唯独旋转不需要），可以通过分解父对象的世界矩阵来只获取位置信息：

const parentWorldMatrix = new THREE.Matrix4();
const tempPos = new THREE.Vector3();
const tempQuat = new THREE.Quaternion();
const tempScale = new THREE.Vector3();

function updateCamera() {
  // 更新父对象的世界矩阵
  parentObj.updateMatrixWorld();
  parentWorldMatrix.copy(parentObj.matrixWorld);
  
  // 分解矩阵，只提取位置，忽略旋转和缩放
  parentWorldMatrix.decompose(tempPos, tempQuat, tempScale);
  
  // 相机位置同步父对象，旋转自己定义
  camera.position.copy(tempPos);
  // 示例：设置相机固定旋转角度
  camera.quaternion.setFromEuler(new THREE.Euler(0, Math.PI/4, 0));
}

方案3：抵消父对象的旋转影响 #

如果相机已经是父对象的子节点，不想改变层级结构，可以通过应用父对象旋转的逆变换来抵消其影响：

const inverseParentQuat = new THREE.Quaternion();

function updateCamera() {
  // 获取父对象的世界旋转，并取逆
  parentObj.getWorldQuaternion(inverseParentQuat).invert();
  
  // 先继承父对象的所有变换，再用逆旋转抵消父对象的旋转
  camera.quaternion.multiply(inverseParentQuat);
  
  // 最后添加你自己的相机旋转逻辑
  camera.quaternion.multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0.01, 0)));
}

你提到已经解决了物体朝向与路径呈90度的问题，核心用了lookAt和向量运算，我来把这个逻辑补全并解释清楚，方便你或者其他开发者参考：

核心思路是：先获取路径的切线方向，再计算出与切线垂直的方向，最后让物体看向当前位置加上这个垂直方向，就能实现朝向与路径90度的效果。完整代码示例如下：

// 假设curve是你的CatmullRomCurve3实例，obj是要移动的物体
// t是当前路径进度（0到1之间，控制物体在路径上的位置）
let t = 0.5; // 示例进度值，你可以用键盘控制这个值增减
const lookAhead = 0.01; // 取稍微靠前的点来计算切线，避免方向突变

// 键盘控制逻辑（对应你的左/右箭头需求）
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
    t = Math.max(t - 0.01, 0);
  } else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
    t = Math.min(t + 0.01, 1);
  }
});

function updateObject() {
  // 获取当前点和前方一点的位置
  const currentPos = curve.getPoint(t);
  const nextPos = curve.getPoint(Math.min(t + lookAhead, 1));

  // 计算路径的切线方向
  const tangent = nextPos.sub(currentPos).normalize();

  // 计算与切线垂直的方向（这里假设你的场景是Y轴向上，根据实际坐标系调整）
  // 用叉乘计算垂直方向：切线方向和up向量叉乘
  const up = new THREE.Vector3(0, 1, 0);
  const perpendicularDir = tangent.cross(up).normalize();

  // 更新物体位置和朝向
  obj.position.copy(currentPos);
  // 让物体看向当前位置+垂直方向，这样朝向就和路径切线呈90度
  obj.lookAt(currentPos.add(perpendicularDir));
}

这里的关键是cross(up)：叉乘会得到一个同时垂直于切线和up向量的方向，正好满足你要的90度朝向需求。如果你的场景坐标系不同（比如Z轴向上），只需要把up向量改成new THREE.Vector3(0, 0, 1)即可。

内容的提问来源于stack exchange，提问作者JJ Gerrish