Three.js使用OrbitControl实现物体逐步转向相机朝向的第三人称控制方法

核心逻辑为提取相机的水平前向朝向作为物体的目标朝向，分两步完成旋转+移动的需求：

1. 计算正确的目标朝向 #

首先要剔除相机俯仰角的影响，只取水平方向的朝向作为物体的转向目标，避免物体跟着相机抬头低头的角度往非水平方向旋转：

• 从相机实例中获取世界坐标系下的前向向量
• 将向量的Y轴分量置为0后做归一化处理，得到纯水平方向的目标朝向向量
  以Three.js为例，代码如下：

// 从相机获取世界前向向量
const cameraForward = new THREE.Vector3();
camera.getWorldDirection(cameraForward);
// 剔除俯仰角影响，保留水平朝向
cameraForward.y = 0;
cameraForward.normalize();

2. 实现平滑旋转+移动逻辑 #

用球面插值实现平滑转向，判断旋转完成后再执行移动，也可以根据需求调整为边转边走：

• 每帧计算物体当前前向向量和目标朝向向量的夹角
• 夹角大于预设阈值时，用球面插值更新物体的四元数实现平滑旋转
• 夹角小于阈值时，判定转向完成，沿目标朝向向量移动物体
  示例代码：

const rotateSpeed = 6; // 旋转速度，可自行调整
const moveSpeed = 3; // 移动速度，可自行调整
const rotateThreshold = 0.017; // 旋转完成判定阈值，对应1弧度≈1度

// 获取物体当前水平前向向量
const objForward = new THREE.Vector3(0, 0, 1);
objForward.applyQuaternion(controlledObj.quaternion);
objForward.y = 0;
objForward.normalize();

// 计算当前朝向和目标朝向的夹角
const angle = objForward.angleTo(cameraForward);

if (angle > rotateThreshold) {
  // 未完成转向，执行平滑旋转
  const targetQuat = new THREE.Quaternion().setFromUnitVectors(objForward, cameraForward);
  controlledObj.quaternion.slerp(targetQuat, rotateSpeed * deltaTime);
} else {
  // 转向完成，执行移动
  controlledObj.position.addScaledVector(cameraForward, moveSpeed * deltaTime);
  // 移动时同步更新OrbitControl的target，保证相机跟随物体
  orbitControl.target.copy(controlledObj.position);
}

兼容调整说明 #

• 该逻辑为通用方案，不限制引擎，Unity/Unreal等引擎只需要替换对应获取朝向、插值旋转的API即可
• 如果不需要"先转再走"的效果，去掉夹角判断的分支，旋转和移动逻辑同时执行即可实现边转边走的效果
• 要保证OrbitControl的target始终绑定受控物体的位置，避免旋转相机时偏移目标

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