Syntax Error.

[Sy] 【DEMO】canvasを使って3次元上の平面をスクリーンに描画する(透視投影変換)

2014/08/05

デモ概要

3次元座標系で表現された平面を、透視投影変換を使って2次元で表現します。

Download (Gist)

操作手順

  1. 左側の2次元座標系をクリックして、1つ目の頂点のx座標とy座標を決めます。
  2. z座標を入力するプロンプトが表示されるので、z座標を入力します。
  3. z座標が確定すると、右側の3次元座標系に頂点が描画されます。
  4. 1〜3を繰り返して頂点を増やし、多角形を描画していきます。
  5. 頂点を入力し終えたら、Enterキーを押して平面を確定させます。

その他の操作

  • 右側の3次元座標軸をドラッグすると、座標軸と平面を回転させることができます。
  • Enterキーで平面を確定した後、ESCキーで平面を解除することができます。(頂点を追加できる状態に戻ります)
  • 平面が確定していない状態でESCキーを押すと、平面をクリアすることができます。(確認メッセージあり)
  • 平面が確定していない状態でDeleteキーを押すと、最後に追加した頂点を一つ削除できます。