React Three Fiber相机X轴旋转异常问题求助

你遇到的异常是Three.js中欧拉角旋转顺序或者双相机旋转逻辑不规范导致的——默认的XYZ旋转顺序会让X轴旋转改变Y轴的局部坐标系方向，后续调整Y轴旋转就会出现偏移；如果双相机的旋转状态互相干扰，也会引发这类问题。下面是具体解决办法：

1. 调整欧拉角旋转顺序（核心修复） #

Three.js默认欧拉角顺序是XYZ，先绕X轴旋转会打乱Y轴的旋转基准。把相机的旋转顺序改成YXZ，先完成水平方向的Y轴旋转，再做垂直方向的X轴俯视，两个轴的操作就不会互相影响：

// 初始化相机时设置旋转顺序
const camera1 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera1.rotation.order = 'YXZ';

const camera2 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera2.rotation.order = 'YXZ';

之后单独修改X轴（俯视）或Y轴（水平转向），都能得到符合预期的局部旋转效果，不会出现互相干扰的情况。

2. 规范双相机的旋转控制逻辑 #

• 如果两个相机是独立切换使用：确保修改旋转时只操作当前激活的相机，避免误把A相机的旋转值赋值给B相机，或者两个相机共享同一组旋转状态对象。
• 如果是父子嵌套相机：明确旋转操作的层级——比如把Y轴旋转放在父相机（控制水平转向），X轴旋转放在子相机（控制俯视），避免旋转叠加导致的坐标系混乱。

代码示例（修正后） #

// 初始化双相机并设置旋转顺序
const cameraMain = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
cameraMain.rotation.order = 'YXZ';
cameraMain.position.set(0, 5, 10);

const cameraSecondary = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
cameraSecondary.rotation.order = 'YXZ';
cameraSecondary.position.set(10, 5, 0);

// 单独修改X轴实现俯视（不会影响Y轴）
cameraMain.rotation.x = THREE.MathUtils.degToRad(30); // 30度俯视
// 单独修改Y轴实现水平转向（不会影响X轴）
cameraMain.rotation.y = THREE.MathUtils.degToRad(45); // 45度水平转向

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