THREE.js中camera.lookAt()方法是否仍存在？求替代方案

为什么找不到相机专属的lookAt方法？ #

你在旧帖子里看到的相机lookAt函数，是早期Three.js版本的实现。在较新的版本中，官方已经将相机类的lookAt方法统一整合到了父类Object3D中——因为相机（包括PerspectiveCamera、OrthographicCamera等）本身就是Object3D的子类，所以现在直接调用相机实例的lookAt方法，本质就是调用Object3D的同名方法。

替代方案（针对Object3D.lookAt无法满足需求的场景） #

如果默认的Object3D.lookAt不符合你的需求，比如需要自定义Up轴、限制旋转角度、更精细的朝向控制，可以参考以下方案：

• 手动计算四元数控制朝向
  适合需要精准控制相机朝向的场景，通过向量运算生成四元数来设置相机旋转：

  // camera: 你的相机实例
  // targetPos: 目标位置（THREE.Vector3）
  const direction = new THREE.Vector3()
    .subVectors(targetPos, camera.position)
    .normalize();
  // 相机默认前方向是-z轴
  const defaultForward = new THREE.Vector3(0, 0, -1);
  const quaternion = new THREE.Quaternion().setFromUnitVectors(defaultForward, direction);
  camera.quaternion.copy(quaternion);
  

• 使用控制器封装交互逻辑
  如果需要交互式的相机朝向控制（比如拖拽旋转、自动看向目标），用内置的OrbitControls更高效，它已经封装了lookAt相关的交互逻辑：

  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.target.set(10, 5, 0); // 设置相机固定看向的目标点
  controls.enableDamping = true; // 开启阻尼效果
  controls.update();
  

• 自定义lookAt函数
  如果需要修改默认的Up轴（默认是(0,1,0)），可以自己实现支持自定义Up轴的lookAt逻辑：

  function customLookAt(object, target, customUp = new THREE.Vector3(0, 1, 0)) {
    const targetDir = new THREE.Vector3()
      .subVectors(target, object.position)
      .normalize();
    const right = new THREE.Vector3()
      .crossVectors(customUp, targetDir)
      .normalize();
    const adjustedUp = new THREE.Vector3()
      .crossVectors(targetDir, right)
      .normalize();
    
    object.matrix.makeBasis(right, adjustedUp, targetDir.negate());
    object.matrix.decompose(object.position, object.quaternion, object.scale);
  }
  
  // 使用示例：让相机看向目标，同时自定义Up轴为z轴方向
  customLookAt(camera, new THREE.Vector3(0, 0, 10), new THREE.Vector3(0, 0, 1));
  

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