利用齊次坐标進行二維坐标轉換

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 進行動畫處理

希望讀者在看完後能提出意見, 點個贊, 鼓勵一下, 我們一起進步. 加油 !!