如何在Three.js中实现跟随立方体并随其旋转的第三人称相机

你当前的代码存在两个关键问题：

1. camera.position.set(box.position) 用法错误，set() 需要传入x、y、z三个数值，不能直接传Vector3对象，正确的位置复制应该用 camera.position.copy(box.position)
2. 只同步了位置，没有处理旋转同步，而且直接和立方体位置重合也不符合第三人称相机的需求

下面给你两种简单可行的解决方案：

方案一：将相机设为立方体的子对象（最简单） #

直接把相机添加为立方体的子元素，这样立方体的移动、旋转会自动传递给相机，你只需要设置相机相对于立方体的偏移位置即可：

// 初始化阶段执行（不用放在动画循环里）
// 设置相机相对于立方体的位置：比如在立方体上方5单位、后方10单位
camera.position.set(0, 5, 10);
// 将相机添加为立方体的子对象
box.add(camera);

这样立方体移动或旋转时，相机会自动跟着同步，完全不需要在动画循环里手动更新位置和旋转。

方案二：手动同步位置与旋转（适合需要自定义控制的场景） #

如果不想让相机成为立方体的子对象，可以在动画循环里手动同步旋转，并添加带方向的位置偏移：

function animate() {
  requestAnimationFrame(animate);

  // 同步立方体的旋转：复制四元数（比欧拉角更稳定）
  camera.quaternion.copy(box.quaternion);

  // 设置相机相对于立方体的偏移量，让偏移跟着立方体的旋转方向走
  const cameraOffset = new THREE.Vector3(0, 5, 10);
  cameraOffset.applyQuaternion(box.quaternion);
  
  // 同步位置并加上偏移
  camera.position.copy(box.position).add(cameraOffset);

  // 让相机始终看向立方体中心
  camera.lookAt(box.position);

  renderer.render(scene, camera);
}

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