本文已参与「新人创作礼」活动，一起开启掘金创作之路。

3D变换矩阵的分解公式

#向量1个

#平移1个

#矩阵1个

#缩放1个

#旋转2个

3D变换矩阵：平移、缩放、旋转

\

3D变换矩阵是一个4x4的矩阵，即由16个实数组成的二维数组，在三维空间中，任何的线性变换都可以用一个变换矩阵来表示。本文介绍从变换矩阵中提取出平移、缩放、旋转向量的方法，提取公式的复杂程度为“平移 < 缩放 < 旋转”，文章同时给出数学公式和JavaScript代码（使用了浏览器的数学库），首先给定一个行主序的4x4的变换矩阵：

\

\

// 变换矩阵（a～l为任意实数）

const transform = [

    [a, b, c, d],

    [e, f, g, h],

    [i, j, k, l],

    [0, 0, 0, 1],

];

\

最后一列就是平移向量：

\

\

// 平移向量

const translate = [

    transform[0][3], 

    transform[1][3], 

    transform[2][3]

];

\

前三列向量的长度就是缩放向量：

\

\

// 缩放向量

const scale = [

    Math.hypot(transform[0][0], transform[1][0], transform[2][0]),

    Math.hypot(transform[0][1], transform[1][1], transform[2][1]),

    Math.hypot(transform[0][2], transform[1][2], transform[2][2]),

]

\

旋转向量有若干种不同的表现形式，包括Euler角、四元数、轴-角，但旋转矩阵是统一的，将前三列分别除以缩放向量，就得到3x3的旋转矩阵：

\

\

// 旋转矩阵

const scale = [

    [

        transform[0][0] / scale[0],

        transform[0][1] / scale[1],

        transform[0][2] / scale[2]

    ], [

        transform[1][0] / scale[0],

        transform[1][1] / scale[1],

        transform[1][2] / scale[2]

    ], [

        transform[2][0] / scale[0],

        transform[2][1] / scale[1],

        transform[2][2] / scale[2]

    ],

]

\

下面这张图可以直观地看到，平移、缩放、旋转在变换矩阵中的位置关系：

\