[Sy] 【DEMO】canvasを使って3次元上の平面をスクリーンに描画する(透視投影変換)
2014/08/05
デモ概要
3次元座標系で表現された平面を、透視投影変換を使って2次元で表現します。
See the Pen canvasを使って3次元上の平面をスクリーンに描画する(透視投影変換) by Mitsuo Utano (@utano320) on CodePen.
操作手順
- 左側の2次元座標系をクリックして、1つ目の頂点のx座標とy座標を決めます。
- z座標を入力するプロンプトが表示されるので、z座標を入力します。
- z座標が確定すると、右側の3次元座標系に頂点が描画されます。
- 1〜3を繰り返して頂点を増やし、多角形を描画していきます。
- 頂点を入力し終えたら、Enterキーを押して平面を確定させます。
その他の操作
- 右側の3次元座標軸をドラッグすると、座標軸と平面を回転させることができます。
- Enterキーで平面を確定した後、ESCキーで平面を解除することができます。(頂点を追加できる状態に戻ります)
- 平面が確定していない状態でESCキーを押すと、平面をクリアすることができます。(確認メッセージあり)
- 平面が確定していない状態でDeleteキーを押すと、最後に追加した頂点を一つ削除できます。