Three.js无人机模型姿态调整：将“加号”转为横向旋转45°的“十字”

我完全懂你要的效果——不是把模型本身绕Y轴转45度凑成十字，而是要让十字形的无人机绕水平的世界空间X轴随鼠标移动旋转，避免直接改mesh.rotation导致的斜向旋转问题对吧？这本质是要区分模型的局部坐标系和世界坐标系的旋转差异，给你两个实用的解决方案：

方案一：用父容器分离旋转轴与模型 #

这是最直观的思路，相当于给无人机加个“旋转底座”，底座绕世界X轴转，无人机先在底座里摆好十字角度：

1. 创建空的父容器作为旋转载体：

const droneBase = new THREE.Object3D();
scene.add(droneBase);

2. 把你的加号模型转成十字，再挂载到父容器：

// 假设yourPlusMesh是你做好的加号形状模型
const droneMesh = yourPlusMesh;
// 先把加号转45度变成十字形
droneMesh.rotation.y = THREE.Math.degToRad(45);
droneBase.add(droneMesh);

3. 监听鼠标X轴移动，让父容器绕世界X轴旋转：

document.addEventListener('mousemove', (e) => {
  // 将鼠标X坐标映射为旋转角度，范围可自行调整
  const rotateAngle = (e.clientX / window.innerWidth - 0.5) * Math.PI;
  // 关键：修改父容器的rotation.x，它是基于世界坐标系的
  droneBase.rotation.x = rotateAngle;
});

这样无人机本身保持十字形态，父容器带着它沿水平轴旋转，完全符合你要的效果。

方案二：直接用rotateOnWorldAxis绕世界轴旋转 #

如果不想加父容器，也可以直接让模型绕世界X轴做增量旋转：

1. 先把模型转成十字形：

const droneMesh = yourPlusMesh;
droneMesh.rotation.y = THREE.Math.degToRad(45);
scene.add(droneMesh);

2. 监听鼠标移动，基于世界X轴做旋转：

const worldX = new THREE.Vector3(1, 0, 0);
let lastMouseX = 0;

document.addEventListener('mousemove', (e) => {
  // 计算鼠标X方向的偏移量
  const deltaX = e.clientX - lastMouseX;
  // 转成旋转角度，系数控制旋转灵敏度
  const rotateDelta = THREE.Math.degToRad(deltaX * 0.1);
  // 绕世界X轴旋转模型
  droneMesh.rotateOnWorldAxis(worldX, rotateDelta);
  lastMouseX = e.clientX;
});

为什么直接改mesh.rotation.x不行？ #

因为mesh.rotation是基于模型局部坐标系的，当你把加号绕Y轴转45度后，模型的局部X轴已经变成斜向的了，这时候改rotation.x，模型就会绕着斜轴旋转，自然出现你讨厌的斜向转动。而上面两种方法要么借助父容器的世界轴，要么直接指定世界轴旋转，完美避开了局部坐标系的干扰。

你可以根据自己的代码结构选一种，两种都能实现鼠标X移动时，十字模型沿水平虚线轴旋转的需求～

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