如何实现类似OrbitControls的3D物体自身旋转交互效果？

嘿，我完全懂你的需求——原来用OrbitControls是让相机绕场景中心的物体转，现在想改成直接拖拽旋转物体本身，而且要保留类似OrbitControls的顺滑交互对吧？这事儿不难，给你几个实用的方案，你可以根据自己的项目情况选：

如果你已经习惯了OrbitControls的交互逻辑（比如阻尼、缩放、旋转手感），直接改造它是最省事的。核心思路就是：保留控制器的输入监听，但把它对相机的控制逻辑替换成控制物体旋转。

具体步骤和代码示例：

// 先正常初始化OrbitControls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 保留顺滑的阻尼效果
controls.enablePan = false; // 如果不需要平移可以关掉，按需调整
controls.enableZoom = true; // 缩放功能可以保留，也可以关掉

// 关键：禁用控制器对相机的自动更新，我们自己处理旋转逻辑
controls.addEventListener('change', () => {
  // 把控制器计算出的旋转值直接应用到目标物体上
  yourTargetObject.rotation.copy(controls.object.rotation);
});

// 注意：如果你的物体不在场景原点（x/y/z=0），最好给它加一个父级pivot对象
// 比如：
// const pivot = new THREE.Group();
// scene.add(pivot);
// pivot.add(yourTargetObject);
// 然后把旋转应用到pivot上：pivot.rotation.copy(controls.object.rotation);
// 这样旋转就会围绕物体自身中心，不会出现偏移的怪异效果

如果不想依赖OrbitControls，自己写监听逻辑也很简单，适合轻量化需求。这种方式你能完全掌控旋转的手感和细节：

let isDragging = false;
let lastMousePos = { x: 0, y: 0 };

// 监听鼠标按下事件，记录初始状态
renderer.domElement.addEventListener('pointerdown', (e) => {
  isDragging = true;
  lastMousePos = { x: e.clientX, y: e.clientY };
});

// 鼠标移动时计算旋转角度
renderer.domElement.addEventListener('pointermove', (e) => {
  if (!isDragging) return;

  // 计算鼠标移动的差值
  const deltaX = e.clientX - lastMousePos.x;
  const deltaY = e.clientY - lastMousePos.y;

  // 调整旋转速度，数值越大转得越快
  const rotateSpeed = 0.005;
  yourTargetObject.rotation.y += deltaX * rotateSpeed; // 左右拖拽绕Y轴转
  yourTargetObject.rotation.x += deltaY * rotateSpeed; // 上下拖拽绕X轴转

  lastMousePos = { x: e.clientX, y: e.clientY };
});

// 鼠标松开时停止拖拽
renderer.domElement.addEventListener('pointerup', () => {
  isDragging = false;
});

如果需要阻尼效果，可以自己加个缓动逻辑，比如用requestAnimationFrame慢慢衰减旋转速度。

如果你用的是Three.js较新版本（r159及以上），官方推出的PointerControls是更模块化的选择，能直接绑定物体实现旋转交互：

// 初始化PointerControls
const pointerControls = new THREE.PointerControls(camera, renderer.domElement);
// 给目标物体添加OrbitAction，实现类似OrbitControls的旋转/缩放
const orbitAction = pointerControls.add(new THREE.OrbitAction(yourTargetObject));
orbitAction.enableRotation = true; // 启用旋转
orbitAction.enableZoom = true; // 可选，启用缩放
orbitAction.enablePan = false; // 按需禁用平移

这个方案最省心，官方封装好了所有交互细节，直接指定目标物体就能实现绕自身旋转的效果，完全不需要自己处理复杂的事件逻辑。

最后再提个小细节：不管用哪种方案，都要确保物体的旋转是基于局部坐标系。如果物体有父级或者不在原点，用pivot父对象来承载旋转是最稳妥的方式，这样旋转时不会出现偏移、重心不对的问题。

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