three.js r92中四元数转欧拉角设置网格旋转异常问题排查

我懂你遇到的麻烦——把存储为四元数的模型旋转数据导入three.js r92场景时，先转成欧拉角再设置给Mesh的rotation属性，结果视觉上旋转完全不对，甚至试过所有欧拉角顺序组合都没搞定。

其实问题出在没必要绕欧拉角这一步，three.js的Mesh对象本身就支持直接使用四元数来设置旋转，而且这种方式比转欧拉角可靠得多：

你原来的（有问题的）代码： #

mesh = new THREE.Mesh( geometry, material ); 
var q0 = -0.26621186733245849609375; 
var q1 = 0.1366209685802459716796875; 
var q2 = -0.849540293216705322265625; 
var q3 = 0.817855589389801025390625; 
var quat = new THREE.Quaternion(q0, q1, q2, q3); 
var rotation = new THREE.Euler().setFromQuaternion(quat, "XYZ"); 
mesh.rotation.x = rotation.x; 
mesh.rotation.y = rotation.y; 
mesh.rotation.z = rotation.z;

正确的做法（直接用四元数）： #

mesh = new THREE.Mesh( geometry, material ); 
var q0 = -0.26621186733245849609375; 
var q1 = 0.1366209685802459716796875; 
var q2 = -0.849540293216705322265625; 
var q3 = 0.817855589389801025390625; 
var quat = new THREE.Quaternion(q0, q1, q2, q3); 
// 直接将四元数赋值给mesh的quaternion属性
mesh.quaternion.copy(quat);

为什么这样能解决问题？ #

欧拉角本身存在万向锁的问题，而且不同工具/库之间的坐标系方向、旋转顺序定义可能存在差异，转欧拉角很容易引入误差。而直接设置mesh.quaternion，three.js内部会直接基于四元数计算模型的旋转矩阵，完全匹配原始的旋转数据，自然就能得到正确的视觉效果。

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