1
由於應用了順序旋轉會影響旋轉矩陣的形式，我不確定這是否可行。但我想從CSS矩陣3d變換中獲得歐拉角。我發現缺乏有關matrix3d格式的文檔以及如何應用轉換。這是我的代碼到目前爲止：將CSS Matrix3d轉換爲歐拉角
getRotation: function (el) {
var matrix = Esprit.getTransform(el);
// 2d matrix
if (matrix.length === 6) {
return {
x: 0,
y: 0,
z: Math.round(Math.atan2(matrix[1], matrix[0]) * (180/Math.PI))
};
}
// 3d matrix
else {
// incorrect calculations
// only work for a single rotation
// return {
// x: Math.round(Math.atan2(matrix[6], matrix[5]) * (180/Math.PI)),
// y: Math.round(Math.atan2(-matrix[2], matrix[0]) * (180/Math.PI)),
// z: Math.round(Math.atan2(matrix[1], matrix[0]) * (180/Math.PI))
// };
// convert from string to number
// for (var i = 0, len = matrix.length; i < len; i++) {
// matrix[i] = Number(matrix[i]);
// }
// gimball lock for positive 90 degrees
if (matrix[2] === 1) {
return {
x: Esprit.toDegrees(Math.atan2(matrix[0], matrix[1])),
y: Esprit.toDegrees(Math.PI/2),
z: 0
}
}
// gimball lock for negative 90 degrees
else if (matrix[2] === -1) {
return {
x: Esprit.toDegrees(-Math.atan2(matrix[0], matrix[1])),
y: Esprit.toDegrees(-Math.PI/2),
z: 0
}
}
// no gimball lock
else {
return {
x: Esprit.toDegrees(Math.atan2(matrix[6], matrix[10])),
y: Esprit.toDegrees(Math.asin(matrix[2])),
z: Esprit.toDegrees(Math.atan2(-matrix[1], matrix[0]))
}
}
}
},
getTransform: function (el) {
var transform = getComputedStyle(el).webkitTransform;
return transform !== 'none' ? transform.split('(')[1].split(')')[0].split(',') : Esprit.create3dMatrix();
},
toDegrees: function (radians) {
return Math.round(radians * 180/Math.PI);
}
任何幫助或想法將不勝感激。謝謝！