Three.js：如何使3D对象始终绕自身当前轴旋转？

我有一个简单的3D对象，当前可通过鼠标左键绕轴中心旋转，运行正常。但使用鼠标右键平移时，轴会随之偏移，导致对象不再绕自身当前轴旋转。请问如何实现无论拖拽对象到何处，都让它绕自身当前轴旋转？以下是script.js的完整代码：

var scene = new THREE.Scene(); 
var axisHelper = new THREE.AxisHelper(100); 
scene.add(axisHelper); 
var camera = new THREE.Perspecti...

我刚看完你的问题，这个场景太常见了——本质上是旋转的坐标参考系和平移的逻辑没对齐，要么是你旋转时盯着世界原点转，要么是平移时没把旋转轴心跟着对象一起走。下面给你两种最实用的解决思路，适配不同的实现方式：

思路1：用Group容器分离平移和旋转（手动实现交互时首选） #

这是Three.js里处理这类问题的经典技巧：把你的3D对象放到一个空的Group里，让父Group负责整体平移，子对象只管自身旋转。这样不管把Group拖到哪里，子对象的旋转始终基于自己的局部坐标系中心。

具体实现步骤 #

1. 重构对象结构，用Group包裹你的3D模型：

// 替换你原来创建对象的代码
var objectContainer = new THREE.Group(); // 父容器负责平移
var your3DObject = new THREE.Mesh(yourGeometry, yourMaterial); // 你的3D对象
objectContainer.add(your3DObject);
scene.add(objectContainer);

2. 修改鼠标交互逻辑：

• 左键旋转时，只修改子对象的rotation（基于局部轴）：

function handleLeftMouseDrag(deltaX, deltaY) {
  // 绕自身Y轴（左右拖动）和X轴（上下拖动）旋转
  your3DObject.rotation.y += deltaX * 0.01;
  your3DObject.rotation.x += deltaY * 0.01;
}

• 右键平移时，修改父Group的position（整体移动）：

function handleRightMouseDrag(deltaX, deltaY) {
  // 这里要结合相机视角计算平移方向，避免视角错乱
  const moveSpeed = 0.1;
  // 获取相机的前向和右向向量
  const forward = new THREE.Vector3();
  camera.getWorldDirection(forward);
  forward.y = 0; // 保持水平平移，可根据需求调整
  forward.normalize();

  const right = new THREE.Vector3();
  right.crossVectors(camera.up, forward).normalize();

  // 应用平移
  objectContainer.position.add(right.multiplyScalar(-deltaX * moveSpeed));
  objectContainer.position.add(forward.multiplyScalar(deltaY * moveSpeed));
}

为什么这能解决问题？ #

父容器的平移只会改变整个组合体的世界位置，而子对象的旋转完全基于自身的局部坐标系——不管组合体移到哪里，子对象的旋转轴心都是自己的几何中心，不会跟着世界原点跑。

思路2：如果用OrbitControls，同步更新控制目标 #

如果你是用Three.js官方的OrbitControls实现旋转和平移，问题大概率是Controls的target没有跟着对象平移。默认情况下OrbitControls是围绕target点旋转，如果你平移了对象但没更新target，旋转就会绕着旧的点转，而不是对象当前的中心。

具体实现步骤 #

1. 初始化Controls时开启平移，并监听变化事件：

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enablePan = true; // 开启右键平移
controls.enableRotate = true; // 开启左键旋转

// 监听Controls的变化，同步target到对象中心
controls.addEventListener('change', () => {
  // 假设your3DObject是你的目标对象
  controls.target.copy(your3DObject.position);
  controls.update(); // 必须调用update让设置生效
});

2. 如果是你手动修改对象位置（而非Controls自动平移），也要同步更新target：

// 比如你自己写的平移函数里
function manualPan(deltaX, deltaY) {
  your3DObject.position.x += deltaX * 0.1;
  your3DObject.position.z += deltaY * 0.1;
  
  // 同步更新Controls的目标点
  controls.target.copy(your3DObject.position);
  controls.update();
}

额外避坑提示 #

• 如果你的3D模型几何中心不在自身原点（比如导入的模型偏移了），先重置几何中心：

your3DObject.geometry.center();

这样对象的局部坐标系才和几何中心重合，旋转时才会绕着模型的“真实中心”转。

• 手动旋转时，绝对不要通过修改position来模拟旋转（比如绕世界原点画圆），一定要用rotation或quaternion修改局部旋转属性。

希望这些方法能帮你搞定问题！如果你的代码还有其他特殊逻辑（比如自定义旋转算法），可以补充细节，我再帮你调整。

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