javascript - 将 3D 矩阵转换为可读格式

标签 javascript css matrix

由于我对矩阵的了解几乎为零,所以我一直在寻找一种辅助方法,它可以将矩阵数组转换为可读格式。

我的意思是可读格式:

{
    translate : 
    {
        x : 0,
        y : 0,
        z : 0
    },

    rotation :
    {
        x : 0,
        y : 90,
        z : 0
    },

    skew :
    {
        x : 0,
        y : 0
    },

    scale :
    {
        x : 0,
        y : 0,
        z : 0
    }
}

对于矩阵格式,我的意思是:matrix3d(0.00000000000000006123233995736766, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0.00000000000000006123233995736766, 0, 0, 0, 0, 1) .

我一直在通过谷歌寻找这样的方法,但似乎找不到。

是否有这样的方法,或者我如何解密/计算每个可用轴上的每个转换类型?

更新:我的一个 friend 偶然发现了http://web.iitd.ac.in/~hegde/cad/lecture/L6_3dtrans.pdf ,将对此进行调查以尝试至少检索一些东西。

最佳答案

将矩阵分解回原始变换并不是一件容易的事。我设法分解了 scale*rotate*translate 矩阵。

function extract(m) { // supports only scale*rotate*translate matrix
    var radians = Math.PI / 180

    var sX = Math.sqrt(m[0]*m[0] + m[1]*m[1] + m[2]*m[2]),
        sY = Math.sqrt(m[4]*m[4] + m[5]*m[5] + m[6]*m[6]),
        sZ = Math.sqrt(m[8]*m[8] + m[9]*m[9] + m[10]*m[10])

    var rX = Math.atan2(-m[9]/sZ, m[10]/sZ) / radians,
        rY = Math.asin(m[8]/sZ) / radians,
        rZ = Math.atan2(-m[4]/sY, m[0]/sX) / radians

    if (m[4] === 1 || m[4] === -1) {
      rX = 0
      rY = m[4] * -Math.PI/2
      rZ = m[4] * Math.atan2(m[6]/sY, m[5]/sY) / radians
    }

    var tX = m[12]/sX,
        tY = m[13]/sX,
        tZ = m[14]/sX

    return {
      translate: [tX, tY, tZ],
      rotate: [rX, rY, rZ],
      scale: [sX, sY, sZ]
    }
}

但对于任何其他转换顺序,它将失败。

关于javascript - 将 3D 矩阵转换为可读格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15024828/

相关文章:

javascript - onchange 函数由于某种原因未运行

javascript - 单击 HTML 站点中的导航栏元素外部时如何关闭打开的折叠导航栏?

python - 显示矩阵值和颜色图

python - 多边算法

R-如何从距离矩阵中获取匹配元素的行和列下标

javascript - 如何在按下/按住按钮期间发送值

javascript - JQuery:在页面之间滑动

html - 无法将 Bootstrap 图片库居中

html - CSS悬停在特定位置显示文本

javascript - 我怎样才能 .toggle ("flip") 只有父元素?