Javascript:CSS变换透视的矩阵操作

Question

我正在使用 this script声称实现 matrix3d 操作，如 the spec 中所述，但是脚本缺少矩阵透视操作，所以我“煮熟”了一些我不确定是准确还是正确的东西。

// the perspective matrix to multiply with
CSSMatrix.Perspective = function(x, y, z){
  var m = new CSSMatrix();
  m.m13 = x;
  m.m23 = y;
  m.m33 = z;
  return m;
};

以及使用这个矩阵的方法

// myMatrix.perspective(x,y,z); to apply a perspective matrix
CSSMatrix.prototype.perspective = function(x, y, z){
  if (y == null) y = 0;
  if (z == null) z = 0;
  return CSSMatrix.multiply(this, CSSMatrix.Perspective(x, y, z));
};

我的问题是，如果 y 和 z 是 undefined，应该使用什么值？它会像旋转，其中 x 用于所有其他轴，还是如上面代码中的 0(零)？

我也不确定 CSSMatrix.Perspective 矩阵是否按照规范中的描述正确编写并在 CSSMatrix 原型(prototype)中实现。

更新:我找到了透视函数的另一个实现(见下文)并创建了一个 fiddle以证明其效果不佳。

CSSMatrix.prototype.perspective = function(d){
  return CSSMatrix.multiply(this, CSSMatrix.Perspective(d));
};
CSSMatrix.Perspective = function(d){
  var m = new CSSMatrix(); 
  m.m43 = -1/d; 
  return m;
};

请问为什么这两个值不同？

感谢您的任何回复。

Answer 1

这里的问题似乎是 3d 矩阵在规范/文档中的表示方式(例如 Mozilla CDN docs )与它在 CSSMatrix polyfill 的 code 中的表示方式.该代码使用文档中表示的矩阵的转置版本。代码工作正常，但如果我们考虑规范/文档中使用的 maxtrix，则代码所指的矩阵位置 [3,4] 实际上是位置 [4,3]。

关于计算透视的公式:根据 MDN 文档 here ，应使用/乘以以下矩阵来应用透视(d 是透视值):

a1 a2 a3 a4    1 0  0   0
b1 b2 b3 b4 =  0 1  0   0
c1 c2 c3 c4    0 0  1   0
d1 d2 d3 d4    0 0 −1/d 1 

所以您走的路是正确的，但是由于 polyfill 代码在内部引用矩阵的方式，您构建的透视矩阵不正确。代替 m.m43 = -1/d;，使用 m.m34 = -1/d;

我已经用固定代码更新了 fiddle here .