Three.js第三人称相机跟随3D模型问题及代码修改咨询

核心问题分析 #

你遇到的相机静止问题，主要是因为OrbitControls默认会接管相机的位置与目标控制，同时你没有在动画循环中同步相机与模型的相对位置。要实现固定距离的第三人称跟随，需要同时调整OrbitControls配置和添加相机位置的动态计算逻辑。

具体修改步骤 #

1. 调整OrbitControls配置，解除手动控制冲突

先修改OrbitControls的参数，让它允许相机跟随模型，同时保留用户视角调整的能力：

// 初始化OrbitControls时添加以下配置
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.copy(model.position); // 将控制目标绑定到模型位置
controls.enableDamping = true; // 启用阻尼，让相机移动更平滑
controls.dampingFactor = 0.05; // 阻尼系数，数值越小越顺滑
controls.maxPolarAngle = Math.PI / 2; // 限制相机不能转到模型下方
controls.minDistance = 3; // 限制相机与模型的最小距离
controls.maxDistance = 10; // 限制相机与模型的最大距离
controls.autoRotate = false; // 关闭自动旋转（如果之前开启了）

2. 在动画循环中添加相机跟随逻辑

定义一个固定的相机偏移量（根据你的需求调整数值，比如模型上方2单位、后方5单位），然后在每一帧计算相机相对于模型的位置：

// 定义相机相对于模型的固定偏移（可根据需求调整）
const cameraOffset = new THREE.Vector3(0, 2, -5);

function animate() {
  requestAnimationFrame(animate);

  // 先执行你的模型移动/动画更新逻辑
  // updateModelMovement(); // 替换成你自己的模型移动函数

  // 计算相机的目标位置：应用模型的旋转到偏移量，保证相对位置固定
  const currentOffset = cameraOffset.clone();
  currentOffset.applyQuaternion(model.quaternion); // 跟随模型旋转调整偏移方向

  // 设置相机位置为模型位置 + 旋转后的偏移量
  camera.position.copy(model.position).add(currentOffset);

  // 让相机始终看向模型
  camera.lookAt(model.position);

  // 必须调用controls.update()，因为启用了阻尼
  controls.update();

  renderer.render(scene, camera);
}

3. 移除固定相机位置的代码

检查你之前的初始化代码，确保没有在动画循环外给camera.position设置固定值（比如camera.position.set(0,5,10)这类代码），让动画循环里的逻辑完全接管相机位置更新。

关键注意点 #

• 使用model.quaternion而不是model.rotation来转换偏移向量，避免欧拉角带来的万向锁问题
• controls.update()必须在动画循环中调用，否则阻尼效果和相机跟随会失效
• 调整cameraOffset的数值可以改变相机相对于模型的位置（比如改成(0,3,-6)让相机更高更远）

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