Javascript：360deg旋轉和矩陣組合出現問題

Question

我之前詢問過關於正確的function for perspective（計算和組成矩陣），現在我面臨的是一個老問題，我不希望這會成爲一個問題仍然。

基本上360deg/720deg只是零，我不知道如何破解以下功能來解決這個問題。

CSSMatrix.Rotate = function(rx, ry, rz){ 
rx *= Math.PI/180; 
ry *= Math.PI/180; 
rz *= Math.PI/180; 

// minus sin() because of right-handed system 
var cosx = Math.cos(rx), sinx = - Math.sin(rx); 
var cosy = Math.cos(ry), siny = - Math.sin(ry); 
var cosz = Math.cos(rz), sinz = - Math.sin(rz); 
var m = new CSSMatrix(); 

m.m11 = m.a = cosy * cosz; 
m.m12 = m.b = -cosy * sinz; 
m.m13 = siny; 

m.m21 = m.c = sinx * siny * cosz + cosx * sinz; 
m.m22 = m.d = cosx * cosz - sinx * siny * sinz; 
m.m23 = - sinx * cosy; 

m.m31 = sinx * sinz - cosx * siny * cosz; 
m.m32 = sinx * cosz + cosx * siny * sinz; 
m.m33 = cosx * cosy; 

return m; 
}; 

當使用360deg旋轉（在任何軸上）組成的矩陣，所述CSSMatrix.rotate()方法是創建一個旋轉矩陣和每個角度值，我們得到angle * Math.PI/180然後其他竇/餘弦操作，但矩陣的結果是不同的從經常計算的變換rotateX(360deg)。

看到我的小提琴在這裏相同的代碼doesn't work properly 360deg角度和working properly角度不同於360deg。

我該如何解決這個問題？

Answer 1

這裏的問題是由CSSMatrix polyfill代碼支持的精度。它支持最多6位小數，並將任何較小值（正值或負值）截斷爲0，即小於0.000001的任何值都將轉換爲0.

在您的小提琴中，如果您只是應用rotateX(360deg)轉換，它將轉換爲此matrix3d：

的Matrix3D（1，0，0，0，0，1，-2.44929e-16，0，0，2.44929e-16，1，0，0，0，0，1）

該polyfill將-2.44929e-16和2.44929e-16轉換爲0，從而生成此矩陣3d：

的Matrix3D（1，0，0，0，0，1，0，0，0，0，1，0，0，0，0，1）

增加在小數精度polyfill的代碼修復了這個問題。從更改line 35： CSSMatrix.SMALL_NUMBER = 1e-6;

到

CSSMatrix.SMALL_NUMBER = 1e-20; // 20 decimal point precision

我已經修復了this小提琴。

---

編輯：施加沿着2軸旋轉時產生關於在約不同的矩陣註釋的問題：這是因爲在小提琴使用的compose函數沿同時所有軸施加旋轉 - 這將是相當於撥打一個單獨的rotate3d(x, y, z)。

但是，通過CSS在小提琴中應用的變換分別在X軸和Z軸上旋轉，這相當於應用rotate(x, 0, 0)後跟rotate(0, 0, z)。

這可以通過更改小提琴中的compose函數並比較polyfill生成的matrix3d與瀏覽器生成的matrix3d來驗證。