ThreeJS技术问题：计算角色朝向目标物体的旋转角度

现有代码的核心错误 #

• 物体位置获取错误：obj.getWorldPosition(v0) 传入了Avatar的位置变量v0，会覆盖Avatar位置数据，应该传入v1
• 方向向量计算反向：dir0.subVectors(v0, v1) 得到的是物体指向Avatar的向量，我们需要的是Avatar指向物体的向量，计算逻辑完全颠倒
• 未做2D平面约束：没有移除Y轴分量，会引入垂直方向的位置差干扰角度计算
• Mixamo角色朝向适配缺失：Mixamo绑定的角色默认朝向**-Z轴**，getWorldDirection返回的是物体正前向（通常为Z轴），两者方向不匹配

修正后的代码 #

// 获取Avatar世界位置，限定在XZ平面
const v0 = new THREE.Vector3();
avatar.getWorldPosition(v0);
v0.y = 0;

// 获取目标物体世界位置，限定在XZ平面
const v1 = new THREE.Vector3();
obj.getWorldPosition(v1);
v1.y = 0;

// 计算Avatar指向目标的方向向量（XZ平面）
const targetDir = new THREE.Vector3();
targetDir.subVectors(v1, v0).normalize();

// 获取Avatar当前前向向量，适配Mixamo默认朝向
const avatarForward = new THREE.Vector3();
avatar.getWorldDirection(avatarForward);
// Mixamo角色默认面朝-Z轴，反转向量匹配视觉前向
avatarForward.multiplyScalar(-1);
avatarForward.y = 0;
avatarForward.normalize();

// 计算夹角（弧度），范围0~π（0°~180°）
const angleRadians = targetDir.angleTo(avatarForward);
// 转换为角度（可选，便于业务判断）
const angleDeg = THREE.MathUtils.radToDeg(angleRadians);

动画触发逻辑示例 #

// 根据角度阈值触发对应动画
if (angleDeg > 170) {
  // 触发180°转身动画
  playTurnAroundAnim();
} else if (angleDeg > 80) {
  // 触发90°转向动画
  playTurnAnim();
} else {
  // 保持默认动作（如 idle）
  playIdleAnim();
}

关键说明 #

• 2D平面约束：强制将Y轴置0，确保仅计算水平方向的转向角度，符合场景需求
• Mixamo朝向适配：由于角色默认前向与Three.js标准前向（Z轴）相反，必须反转向量才能得到正确的视觉朝向
• angleTo特性：返回两个向量间的最小夹角（0~180°），完全匹配转向动画的判断逻辑

内容的提问来源于stack exchange，提问作者Jean-Philippe Encausse