Question

我实际上正在编写一个脚本domvertices来计算任何DOM元素的4个顶点3d坐标：http://bl.ocks.org/abernier/97a5fb8c1bebacd1958e

var el = document.getElementById('foo');
var vertices = domvertices(el);
console.log(vertices);

输出：

{
  a: {x: , y: , z: },
  b: {x: , y: , z: },
  c: {x: , y: , z: },
  d: {x: , y: , z: }
}

为了实现这一目标，我将dom向上走，并为每个元素存储器应用矩阵（参见¹）。

最后，我以相反的顺序将矩阵应用回目标元素。

-

实际上效果很好！

我唯一的问题是关于透视......现在，在计算元素的矩阵¹时，我不会考虑perspective或perspective-origin。

因此，不考虑透视变形（作为绘制顶点时的解决方法，我将它们附加到受透视的元素中，以便正确定位）。

我想在计算元素矩阵时使用perspective和perspective-origin。

我可以轻松制作一个可能的矩阵，我的问题是何时将perspective和perspectiveOrigin矩阵应用于¹？

嵌套多视角怎么样？

¹：元素的矩阵按照以下方式组成（从右向左阅读）：

transformOrigin^-1 * transform * transformOrigin * relativePosition * Identity

任何帮助表示感谢。

Answer 1

您的透视矩阵必须等同于应用矩阵序列中最左侧的矩阵。

e.g。从几乎所有WebGL片段着色器中获取

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

投影矩阵位于左侧。

Answer 2

你可以在github上找到一个TypeScript库，它支持透视转换和一些常见的转换方法，如 globalToLocal ， localToGlobal 和 localToLocal ： jsidea核心库。您可以在jsidea.geom.Transform.extractMatrix函数中找到矩阵提取。它看起来像是：

//subtract transform-origin
matrix.appendPosition(-originX, -originY, -originZ);
//append transform-matrix
matrix.appendCSS(style.transform);
//add transform-origin
matrix.appendPosition(originX, originY, originZ);
//add local position 
//Difficult to calc the local position, 
//because the offsetParent, offsetLeft and offsetTop are not reliable.
matrix.appendPosition(position.x, position.y, 0);
//subtract the perspective-origin
matrix.appendPosition(-perspectiveOriginX, -perspectiveOriginY, 0);
//apply the perspective (aka focalLength)
matrix.appendPerspective(perspective);
//add perspective-origin
matrix.appendPosition(perspectiveOriginX, perspectiveOriginY, 0);

在某些情况下，库会为一个元素使用多个矩阵。如果元素位于嵌套透视上下文中，而父元素不保留3d（transform-style：flat）。您可以查看at this code。

应用透视矩阵顺序

2 个答案: