Three.js中实现物体朝向目标时如何避免Pole Switching问题？

你的核心问题在于使用setFromUnitVectors将固定世界Y轴对齐到目标方向，这种方式会强制物体保持"朝上"，导致穿越极点时出现突然的自旋（类似万向节死锁的表现）。要实现连续、无自旋的朝向跟踪，需要基于物体当前的旋转状态计算目标旋转，而非直接生成全新的四元数。

解决方案：基于当前旋转的连续朝向计算 #

关键思路是：

• 不依赖固定的世界上方向，而是使用物体当前的局部上方向作为参考
• 确保四元数插值走最短路径，避免符号突变
• 可选：用球面线性插值（SLERP）实现平滑旋转

代码实现 #

// 初始化时保存物体初始局部上方向（如果初始朝向是默认Y轴朝上的话）
const localUp = new THREE.Vector3(0, 1, 0);
// 记录上一帧的目标方向，避免首次计算的突变
let prevTargetDir = null;

function updateSourceLookAt(source, target) {
    // 获取世界空间下的位置
    const sourcePos = source.getWorldPosition(new THREE.Vector3());
    const targetPos = target.getWorldPosition(new THREE.Vector3());
    // 计算指向目标的方向向量
    const targetDir = targetPos.sub(sourcePos).normalize();

    if (!prevTargetDir) {
        prevTargetDir = targetDir.clone();
    }

    // 基于物体当前的上方向生成目标旋转四元数
    const currentUp = source.localToWorld(localUp.clone()).normalize();
    const targetQuat = new THREE.Quaternion();
    targetQuat.setFromRotationMatrix(
        new THREE.Matrix4().lookAt(
            new THREE.Vector3(), // 仅关注方向，原点不影响
            targetDir,
            currentUp
        )
    );

    // 处理四元数符号，确保走最短旋转路径
    if (source.quaternion.dot(targetQuat) < 0) {
        targetQuat.multiplyScalar(-1);
    }

    // 平滑过渡到目标旋转：alpha值控制旋转速度，0.1表示每帧完成10%的旋转
    source.quaternion.slerp(targetQuat, 0.1);

    prevTargetDir.copy(targetDir);
}

关键细节说明 #

1. 使用当前局部上方向：不再固定用世界Y轴(0,1,0)，而是基于物体当前的旋转计算其世界空间上方向，确保旋转的连贯性。
2. 四元数符号校正：当当前四元数与目标四元数的点积为负时，反转目标四元数符号，避免SLERP选择长路径旋转（180度以上的翻转）。
3. SLERP平滑旋转：如果不需要平滑，可直接将source.quaternion.copy(targetQuat)，但仍需保留符号校正步骤，避免极点处的自旋突变。

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