Three.js 如何实现相机从后方跟随物体并与物体同步旋转？

问题根源 #

你当前使用camera.lookAt()的实现仅能让相机对准飞船的空间位置，无法同步继承飞船的旋转状态，因此飞船做翻转、倒置动作时，相机视角不会同步变化，无法保持固定相对观察角度。

方案1：手动计算同步（支持平滑跟随过渡） #

该方案可以保留你原来的镜头缓冲效果，不会出现过于生硬的位置/旋转跳转：

1. 首先在初始化阶段定义固定偏移和临时变量（不要放在updateCamera中重复创建，避免性能损耗）：

// 飞船本地空间的相机偏移：后20单位、上6单位，可根据你实际需要的视角调整数值
const cameraLocalOffset = new THREE.Vector3(-20, 6, 0);
// 用于平滑旋转的临时四元数
const targetQuaternion = new THREE.Quaternion();

2. 修改updateCamera逻辑：

function updateCamera(){
    // 将飞船本地偏移转换为世界空间坐标，得到相机目标位置
    const targetPosition = spaceship.localToWorld(cameraLocalOffset.clone());
    // 平滑过渡相机位置
    camera.position.lerp(targetPosition, 0.2);
    // 同步飞船的旋转状态，平滑过渡相机旋转
    targetQuaternion.copy(spaceship.quaternion);
    camera.quaternion.slerp(targetQuaternion, 0.2);
}

如果运行后发现偏移方向不对，调整cameraLocalOffset的三个数值即可，三个值分别对应飞船本地的前后、上下、左右方向。

方案2：挂载为子对象（无延迟完全同步） #

如果不需要平滑过渡效果，最简单的方案是直接把相机设为飞船的子对象，相机会自动跟随飞船的所有位置、旋转变化：

// 初始化阶段执行一次即可
spaceship.add(camera);
// 设置相机在飞船本地坐标系下的相对位置
camera.position.set(-20, 6, 0);
// 不需要再写updateCamera逻辑，也不需要调用lookAt

该方案的优势是逻辑极简、完全无延迟，缺点是镜头和飞船完全绑定，没有运动滞后的缓冲感。

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