Javascript:360 度旋转和矩阵组合的问题

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;
};

当使用 360 度旋转(在任何轴上)组成矩阵时，CSSMatrix.rotate() 方法创建一个旋转矩阵，对于每个 Angular 值，我们得到 angle * Math。 PI/180 然后是其他正弦/余弦运算，但矩阵结果与常规 rotateX(360deg) 的计算变换不同。

在这里查看我的 fiddle ，其中相同的代码 doesn't work properly 360 度 Angular 和 working properly Angular 不同于 360°。

请问我该如何解决这个问题？

Answer 1

这里的问题是 CSSMatrix polyfill 代码支持的精度。它最多支持 6 位小数，并将任何较小的值(正数或负数) chop 为 0，即任何小于 0.000001 的值都将转换为 0。

在你的 fiddle 中，如果你只应用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位小数精度

我已在 this 中修复了该问题 fiddle 。

<小时/>

编辑:关于评论中关于沿两个轴应用旋转时生成不同矩阵的问题:这是因为 fiddle 中使用的compose函数同时沿所有轴应用旋转 -这相当于单个 rotate3d(x, y, z) 调用。

但是通过 fiddle 中的 CSS 应用的变换分别在 X 轴和 Z 轴上旋转，这相当于应用 rotate(x, 0, 0) 后跟 rotate(0, 0，z)。

这可以通过更改 fiddle 中的compose函数并比较由polyfill生成的matrix3d与浏览器生成的matrix3d来验证。