如何让OrbitControls以非画布中心的物体为旋转目标？

先纠正误区：OrbitControls完全能实现需求 #

你遇到的target设置后失效的问题，大概率是操作时机不对或者没更新控件状态，不是控件本身的问题。按以下步骤来：

• 先获取目标物体的世界空间中心坐标：

  const targetCenter = new THREE.Vector3();
  yourTargetObject.getWorldPosition(targetCenter);
  

• 给OrbitControls设置target并强制更新：

  controls.target.copy(targetCenter);
  controls.update(); // 这步必须加，否则控件不会同步新的target
  

• 初始化相机时，让相机先看向目标中心：

  camera.lookAt(targetCenter);
  

这样设置后，拖动鼠标时相机就会围绕目标物体的中心旋转，和画布位置无关。

不想用控件？手动实现旋转逻辑 #

如果觉得控件有多余限制，自己写鼠标监听来控制更灵活：

1. 创建一个空的Object3D作为相机的父容器，把这个容器放在目标物体的中心位置：

   const cameraPivot = new THREE.Object3D();
   cameraPivot.position.copy(targetCenter);
   cameraPivot.add(camera);
   scene.add(cameraPivot);
   

2. 监听鼠标拖动事件，根据鼠标偏移量修改父容器的旋转角度：

   let isDragging = false;
   let lastMouseX = 0;
   let lastMouseY = 0;
   
   window.addEventListener('mousedown', (e) => {
     isDragging = true;
     lastMouseX = e.clientX;
     lastMouseY = e.clientY;
   });
   
   window.addEventListener('mousemove', (e) => {
     if (!isDragging) return;
     const deltaX = e.clientX - lastMouseX;
     const deltaY = e.clientY - lastMouseY;
     // 绕Y轴旋转（左右拖动）
     cameraPivot.rotation.y += deltaX * 0.005;
     // 绕X轴旋转（上下拖动），限制角度避免翻转
     cameraPivot.rotation.x = THREE.MathUtils.clamp(
       cameraPivot.rotation.x - deltaY * 0.005,
       -Math.PI/2 + 0.1,
       Math.PI/2 - 0.1
     );
     lastMouseX = e.clientX;
     lastMouseY = e.clientY;
   });
   
   window.addEventListener('mouseup', () => {
     isDragging = false;
   });
   

CameraControls的正确用法 #

如果坚持用CameraControls，同样要确保正确设置看向的目标：

cameraControls.setLookAt(
  camera.position.x, camera.position.y, camera.position.z,
  targetCenter.x, targetCenter.y, targetCenter.z,
  true // 传入true让设置立即生效
);

内容的提问来源于stack exchange，提问作者Savinyu Pant