[Sy] 【デモ】Canvasを使って3次元空間の平面をスクリーンで表示する

2014/08/05

久々にデモページを更新しました。約1年ぶり・・・

その分今回はそこそこ力作です。3DCGの基礎ですね。

デモページ

デモページはこちらです。

今回作ったのは、3次元上で表現された（各頂点がx, y, zの座標を持つ）平面をつくっていき、それをスクリーン上（2次元）で表現する というデモです。

透視投影変換（3次元の物体を2次元のスクリーンに投影することで2次元で表現する）という手法を用いて、JavaScriptで実装してます。

何言ってんだ？という方は、下の方にデモの操作の様子をgifアニメにしてますので、見てみてください。

素のJavaScriptのみで動くコードをデモページからDownloadできるので、良かったらどうぞ。

コメントは細かく書いてるので何してるのかはわかるかと思います。

数学的な要素が強いので、計算の説明などは今後エントリーを書いていきます。・・・たぶん。（需要ありそうなら煽ってくれればやる気出ます）

デモページのREADMEに操作方法は書いてありますが、ざっくりこんな感じになります。

（※クリックで拡大します）

操作は単純で、左側に頂点をどんどん入力していくと、それが右側の方に3次元座標系として表示されます。マウスでドラッグすると回転します。

まぁ今更こんなの自分で書かなくてもライブラリとか使えば一発なんですが、こういう基礎的なことを理解しておくのも大事かと。