Three.js中如何调整相机与固定3D对象之间的距离？

Vector3.distanceTo() 仅用于计算两个三维点的直线间距，属于派生计算值，Three.js 没有提供直接修改两个对象间距的API——本质上只要沿着相机和固定对象的连线方向调整相机坐标，就能精确控制两者距离，具体实现步骤如下：

核心实现逻辑 #

• 第一步：获取两个对象的世界坐标
  注意不要直接用对象的.position属性取坐标，如果对象嵌套在父节点下，局部坐标会出现偏移，必须用getWorldPosition()取全局世界坐标。
• 第二步：计算两点连线的单位方向向量
  把目标点指向相机的向量做单位化处理（向量长度转为1），后续乘以目标距离就能得到准确的偏移量。
• 第三步：按目标距离计算相机新位置
  以固定对象的世界坐标为起点，沿单位方向移动目标距离的长度，得到的坐标就是相机应该放置的位置，最后按需调用lookAt()让相机对准目标即可。

基础实现代码 #

// 替换成你场景里的固定3D对象（网格、组、其他Object3D实例都可以）
const fixedObj = scene.getObjectByName('yourTargetMesh');
// 存储目标点世界坐标
const targetPos = new THREE.Vector3();
fixedObj.getWorldPosition(targetPos);

// 存储相机当前世界坐标
const cameraPos = new THREE.Vector3();
camera.getWorldPosition(cameraPos);

// 计算 目标点 -> 相机 的单位方向向量
const dir = new THREE.Vector3()
  .subVectors(cameraPos, targetPos)
  .normalize();

// 自定义你需要的最终间距，比如设置为8个单位长度
const setDistance = 8;
// 计算相机新坐标
const newCamPos = new THREE.Vector3().addVectors(
  targetPos,
  dir.multiplyScalar(setDistance)
);
// 更新相机位置
camera.position.copy(newCamPos);
// 让相机始终对准固定对象，不需要对准可以删掉这行
camera.lookAt(targetPos);

常见场景适配 #

• 平滑过渡调整距离
  如果不需要瞬间跳转到目标距离，想做推拉镜头、滚轮缩放的平滑效果，可以在渲染循环里用lerp做线性插值：

  function animate() {
    requestAnimationFrame(animate);
    // 0.05是平滑系数，数值越小过渡速度越慢
    camera.position.lerp(newCamPos, 0.05);
    camera.lookAt(targetPos);
    renderer.render(scene, camera);
  }
  animate();
  

• 搭配OrbitControls轨道控制器使用
  如果场景用了轨道控制器，不需要手动计算向量，直接把控制器的target绑定到固定对象坐标，再调整相机位置即可，控制器会自动处理朝向和旋转限制：

  controls.target.copy(targetPos);
  // 需要拉近就调用dollyIn，拉远调用dollyOut，参数是推拉步长
  controls.dollyIn(1.5);
  controls.update();
  

注意事项 #

• 不要手动修改相机position的x/y/z单轴数值凑距离，很容易出现视角偏移、坐标错位的问题，沿连线单位向量移动是兼容性最高、计算最准确的方案。
• 正交相机（OrthographicCamera）的位置调整逻辑和透视相机完全一致，不需要额外修改计算规则。

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