利用齐次坐标进行二维坐标转换

Games 101 第0次作业可视化表示

作业要求：给定一个点 P=(2,1), 将该点绕原点先逆时针旋转 45°，再平移 (1,2), 计算出 变换后点的坐标（要求用齐次坐标进行计算）

了解齐次坐标表示矩阵的意义

使用 <code>threejs</code> 和 <code>tweenjs</code> 模拟坐标转换过程

创建矩阵进行运算

给定点 P =（2，1），先旋转，后平移，计算变换后的坐标

第一阶段：描述球绕原点旋转 45°

第二阶段：描述球移动 <code>(2, 1)</code>

在二维世界中，旋转和缩放都能使用二维矩阵表示，但平移变换不行 为了统一三种坐标变换，使用齐次坐标，利用 3*3 的矩阵进行运算 点的表示：(x, y, 1) 向量表示：(x, y, 0) 点+向量=向量 向量+向量=向量 点+点=两点中点

\[\left[ \begin{matrix} cos(θ) &amp; -sin(θ) &amp; 0\\ sin(θ) &amp; cos(θ) &amp; 0 \\ 0 &amp; 0 &amp; 1 \end{matrix} \right]

\\ 公式\:1

\]

推导过程

\[\left( \begin{matrix} x^` \\ y^` \\ 1 \end{matrix} \right) =

\left[ \begin{matrix} a &amp; b &amp; 0 \\ c &amp; d &amp; 0 \\ 0 &amp; 0 &amp; 1 \end{matrix} \right] *

\left( \begin{matrix} x \\ y \\ 1 \end{matrix} \right)

\\ 公式\:2

将点 (1, 0, 1) =&gt; (cos(θ), sin(θ), 1) 和点 (0, 1, 0) =&gt; (-sin(θ), cos(θ), 1) 到公式2，可得到

\[a=cos(θ)\\

b=-sin(θ)\\

c=sin(θ)\\

d=cos(θ)

注意点：旋转矩阵描述的是绕原点，逆时针旋转<code>θ</code>角度

\[\left[ \begin{matrix} 1 &amp; 0 &amp; t_{x} \\ 0 &amp; 1 &amp; t_{y} \\ 0 &amp; 0 &amp; 1 \end{matrix} \right]

\\ 公式\:3

平移变换比较简单，推导公式就不表述出来了

点 P(2, 1) 转换为齐次坐标 P(2, 1, 0)

构建逆时针旋转矩阵 MR，与 P 向量相乘 MR * P 得到旋转后的 P 坐标，P = MR * P

构建平移矩阵 MT, 与 P 向量相乘，P = MT * P

最终得到转换后的结果

设置点 P 的坐标

构建旋转矩阵

构建平移矩阵

矩阵运算

整个过程采用 tweenjs 进行动画处理

希望读者在看完后能提出意见, 点个赞, 鼓励一下, 我们一起进步. 加油 !!