如何通过点击实现立方体正确旋转？解决旋转轴行为不一致问题

看起来你遇到了3D旋转里非常常见的局部轴 vs 世界轴逻辑冲突问题！我来帮你拆解清楚：

问题根源 #

你说的“沿X轴旋转时Y、Z轴随之转动”，其实是因为此时你是绕立方体的局部X轴在旋转——旋转完成后，立方体自身的Y、Z轴已经跟着立方体一起改变了朝向。但如果绕Y/Z轴旋转时，你用的是世界坐标系的固定轴，就会出现行为不一致的情况：比如先绕局部X转了立方体，再绕世界Y转，这时候Y轴还是初始的世界方向，和立方体的局部Y轴完全不是一回事，自然转出来的效果和预期不一样。

针对性解决方案 #

这里给你两种常用的解决思路，根据你的需求选就行：

1. 始终基于世界固定轴旋转 #

如果你希望不管立方体转成什么角度，按按钮时都绕初始的世界轴（比如世界Y轴就是垂直向上的轴）旋转，那要确保每次旋转都基于世界空间计算。举个伪代码例子（思路适配大多数3D引擎）：

// 以Unity为例，核心是用四元数叠加世界旋转
public void RotateWorldY(float angle)
{
    // 四元数乘法顺序：新的世界旋转 叠加 原有旋转
    Quaternion worldRot = Quaternion.AngleAxis(angle, Vector3.up);
    cube.transform.rotation = worldRot * cube.transform.rotation;
}

这样不管立方体之前怎么转，每次点击Y轴按钮都会绕固定的世界Y轴旋转，轴的行为就统一了。

2. 统一使用局部轴旋转 #

如果希望旋转时轴始终跟着立方体走（比如转完X轴后，Y轴变成立方体当前朝向的“右/左”方向），那要把所有旋转操作都切换到局部空间。比如用Three.js的写法：

// 所有旋转都基于立方体自身的局部轴
function rotateLocalX() {
    cube.rotation.x += 0.1;
}
function rotateLocalY() {
    cube.rotation.y += 0.1;
}

这种情况下所有旋转的逻辑是统一的，不会出现某根轴转完后其他轴“不听话”的情况。

调试小技巧 #

• 给立方体的三个局部轴添加彩色辅助线（X红、Y绿、Z蓝），旋转时能直观看到轴的朝向变化，快速定位问题；
• 先把所有按钮的旋转逻辑统一成同一种空间（要么全世界，要么全局部），再测试是否还有不一致的情况。

另外你提到的按钮放置问题确实没难度，等旋转逻辑调通后，把按钮的父对象设为立方体，就能让按钮跟着立方体一起旋转，自然就贴在表面上了~

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