ThreeJS 如何不受相机旋转影响实现相对其朝向的左右上下平移

解决方案 #

方案1：使用ThreeJS内置平移API（推荐，无需手动计算矩阵/四元数） #

ThreeJS的相机实例已经封装了基于自身局部坐标系的平移方法，会自动适配当前相机的实时朝向，不需要关注当前getWorldDirection的返回值：

• 向右平移N单位：camera.translateX(N)
• 向左平移N单位：camera.translateX(-N)
• 向上平移N单位：camera.translateY(N)
• 向下平移N单位：camera.translateY(-N)
• 向正前方（当前朝向）平移N单位：camera.translateZ(-N)
  注意：ThreeJS相机默认局部Z轴正方向指向相机后方，因此向前平移需要传入负数值

方案2：手动基于世界朝向计算偏移（适合自定义偏移逻辑场景） #

如果需要自己控制平移计算逻辑，可通过向量叉乘计算相机的局部方向轴，再叠加到位置坐标上，代码示例如下：

// 复用向量对象避免频繁GC
const _forward = new THREE.Vector3();
const _right = new THREE.Vector3();
const _cameraUp = new THREE.Vector3();
const _worldUp = new THREE.Vector3(0, 1, 0); // 可替换为你的自定义世界上方向

// 1. 获取当前相机的世界前方向
camera.getWorldDirection(_forward);

// 2. 计算相机右方向：前方向叉乘世界上方向后归一化
_right.crossVectors(_forward, _worldUp).normalize();
// 右移1单位示例
camera.position.add(_right.multiplyScalar(1));

// 3. 计算相机自身上方向：右方向叉乘前方向后归一化
_cameraUp.crossVectors(_right, _forward).normalize();
// 上移1单位示例
camera.position.add(_cameraUp.multiplyScalar(1));

以上两种方案均不受lookAt修改朝向的影响，所有平移操作都会严格基于相机当前的朝向执行。

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