3D の回転と回転体

第3章 No.2 ／ x, y, z 軸まわりの回転を組み合わせる

つぎに 3 次元の座標で考えよう。3 次元の回転は、2 次元の座標平面を x 軸まわり (y-z 平面)、y 軸まわり (z-x 平面)、z 軸まわり (x-y 平面) に分けて考えればよい。

x 軸まわり (α ラジアン)

x₂ = x₁
y₂ = y₁ cos α − z₁ sin α
z₂ = y₁ sin α + z₁ cos α

y 軸まわり (β ラジアン)

x₃ = x₂ cos β + z₂ sin β
y₃ = y₂
z₃ = −x₂ sin β + z₂ cos β

z 軸まわり (γ ラジアン)

x₄ = x₃ cos γ − y₃ sin γ
y₄ = x₃ sin γ + y₃ cos γ
z₄ = z₃

このように回転した点を、例えば平面 z = 0 に 平行投影 した図形を画面に表示させればよい (画面は 2 次元である)。平行投影では、無限遠のかなたから人間がみていると考えれば、その図形に歪みはなく簡単に考えることができる。つまり、単に z 座標を忘れて、x, y 座標だけを使って画面に描けばよい。

これで準備が整った！

そして、表示するものを 「回転体」 としよう。回転体も同じように、これらの概念を使ってデータを計算することができる。例えば、z-x 平面に書かれた点の座標を使って z 軸に回転した回転体を考える。これを x-y 平面に平行投影して表示してみると：

さらに、x-z 平面に平行投影して表示してみると、以下のようになる。

この回転体がひっくりかえって見えるのは、数学で示す座標が下から上に向かって増加するのに対して、プログラムで表す座標が上から下に向かって増加するためである。もちろん、プログラムを修正することによりそれらを同じにすることができるが、ここではあえて素直にプログラミングしてみた。

ソースコードは samples.js の SoR 部分にまとまっている。