Large Display Size Middle Display Size Small Display Size
印刷用 概要 キーワード 著者

スムーズ回転迷路のしくみ


▲スムーズ回転迷路。クリックすると実行します。

左プレイヤーの移動ボタン
(タッチ操作可)


右プレイヤーの移動ボタン
(タッチ操作可)


このスムーズ回転迷路の基本的な考え方について説明します。

(回転アニメなど、具体的なプログラム方法については触れていません)

どうやって実現するのか

「ごく簡単な3DCGプログラムの例」をまず最初に見る

スムーズ回転迷路のしくみを説明するためには、順序立てて説明する必要があります。

まずは、いつもこのホームページで説明している「ごく簡単な3DCGプログラムの例」から始まります。

なお、説明中の「カメラ」とは仮想的なもので、実際はプログラムの中で特別に存在しているわけではありません。kameraKaitenHというような変数名の一部では使われています。


▲「ごく簡単な3DCGプログラム」でやろうとしていることは、1つの正六面体を正面に表示することです。カメラの座標は0,0,0で、正六面体の座標は0,0,300といった具合でZ座標を遠ざけているだけです。

▲実際のJavaScriptの結果。
クリックすると実行します。
キー入力はありません。
ソースコードを表示


「ごく簡単な3DCGプログラム」を視点回転させる例

そして上記の「ごく簡単な3DCGプログラム」を視点回転に対応させます。


▲視点回転でやろうとしていることは、カメラを回転させること(図の青矢印)ですが、実際は正六面体を反対方向へ回転(赤矢印)させることでカメラの回転を表現します。カメラの座標x,zを0,0の原点として、正六面体の各頂点の座標x,zを三角関数で回転させます。高さは変化しないのでy座標は関係なく、x,z座標系だけ(2次元)で回転を考えます。

▲実際のJavaScriptの結果。
クリックすると実行します。
←→キーで左右に回転します。
(回転が90度に近づくと画面が少し乱れます)
ソースコードを表示

▲表示に関する各値を、スムーズ回転迷路と同じ値にしました。実際のスムーズ回転迷路と同じ様子で回転するので理解しやすいと思います。
ソースコードを表示



スムーズ回転迷路ではそれと同じことを行っています。

そしてスムーズ回転迷路ではそれと同じことを行っています。

正六面体をマップデータに合わせて3D空間上に複数並べます。

そして上記で回転したのと同じように、すべての正六面体のすべての頂点を回転させます。








上段の図は上から見下ろした図であり、カメラは赤いです。正六面体は複数あります。

下段の図は実際のスムーズ回転迷路の画面です。

右回転のボタンを押して右に回転されていく様子を順に表しています。

迷路の壁が回転しているように見えるのは、実は多くの正六面体が一度に回転している姿です。


以上の考え方を基本としてスムーズ回転迷路のプログラムは作られています。

※ただ、難しいのは、1回のキー入力で、90度まできれいに回転するアニメーションや、1歩前進・後退するアニメーションではないかと思います。回転の途中で反対方向のキーが押された場合にどのようにプログラムで対応するのかなど、その辺がやや難しいと思います。

プログラミングは面白いですが、夜更かしすると身体に悪いし、明日の学校や仕事にさしつかえるので、ほどほどにしておきましょう。学校や仕事のない方も夜更かししないで早起きすることがまともな人生の第一歩ではないかと思います。私もその辺のバランスを取りたいです。


ページ制作 homepage6047


ページの上端へ (もくじ開く)