Three.js OrbitControls：如何正确更新相机旋转角度？

这个坑我之前踩过！核心原因是OrbitControls会独立维护一套自己的内部状态参数（比如方位角azimuthAngle、极角polarAngle），用来管理相机的视角。当你直接修改camera.rotation.y或者controls.object.rotation.y时，只是临时改变了相机的当前状态，但Controls内部的参数并没有同步更新。所以一旦调用controls.update()，或者通过鼠标交互触发Controls的自动更新，它就会用自己保存的原始状态覆盖相机的旋转，导致相机“跳回”初始位置。

下面是几种靠谱的解决方式，按推荐程度排序：

1. 直接使用OrbitControls的API修改角度（最推荐） #

OrbitControls提供了专门的角度属性来控制相机旋转，用这些属性修改的话，Controls会自动同步内部状态和相机的实际视角，不会出现冲突：

如果你要设置绕Y轴的旋转（对应方位角），直接修改controls.azimuthAngle即可：

// 将相机绕Y轴旋转90度（Math.PI/2 弧度）
controls.azimuthAngle = Math.PI/2;
// 调用update让Controls把新角度应用到相机上
controls.update();

如果需要调整垂直方向的旋转（比如抬头/低头），可以修改controls.polarAngle，它对应相机绕X轴的旋转角度。

2. 手动同步相机状态到OrbitControls（适合必须直接改相机的场景） #

如果你的业务逻辑必须直接修改相机的rotation，那修改后一定要同步状态到Controls，让它认可这个新视角：

// 先按你的需求修改相机旋转
camera.rotation.y = Math.PI/2;
// 让OrbitControls根据当前相机状态重新计算内部参数
controls.update();
// 关键一步：调用saveState()，把当前相机状态保存为Controls的"基准状态"
controls.saveState();

这样之后无论是调用controls.update()还是用鼠标交互，Controls都会基于你新设置的状态来操作，不会再跳回原来的初始位置。

3. 通过修改目标点调整视角（符合OrbitControls设计逻辑） #

如果你是想让相机看向某个特定方向，更符合OrbitControls设计逻辑的方式是修改它的target属性——毕竟OrbitControls的核心就是“围绕目标点旋转”：

// 比如让相机看向(10, 0, 0)这个点，替代直接旋转相机
controls.target.set(10, 0, 0);
// 应用新的目标点
controls.update();

这种方式完全遵循Controls的控制逻辑，几乎不会出现状态冲突的问题。

额外注意事项 #

• 尽量避免同时混用“直接修改相机rotation/position”和“使用OrbitControls API”两种方式，很容易导致状态混乱。
• 如果之后需要重置视角，可以调用controls.reset()，它会回到你初始化Controls时的状态，或者你之前调用controls.saveState()保存的状态。

内容的提问来源于stack exchange，提问作者Denis S.