3DCG (3) : 視点変更に対応した3D表示JavaScript

タブ→ アプリ画面 ソースコード デバッグ画面

アプリ画面
Firefox, Internet Explorer ok
debug2
キー操作 (デモ終了後)
←→左に移動、右に移動
↑↓奥に移動、手前に移動
RollUP,DOWN上に移動、下に移動
4,6X軸で回転
8,2Y軸で回転
9,1Z軸で回転
(ctrlmode: object時のみ)
SPACEオブジェクト操作、視点操作
切り替え
rリセット
zワイヤフレーム、塗りつぶし
切り替え
+,-オブジェクトの拡大縮小
(ctrlmode: object時のみ)
※回転とか動きがちょっと変です
※操作はキーボードが必要です。
ソースコード
クリックするとソースコードを表示します
default.htmlこのページ
main.jsプログラム本体
ThreeD.js空間のクラス
Model.js1つの形状のクラス
Camera.jsカメラのクラス
other.jsその他関数群
index.cssページのCSS
key100.jsキー入力スクリプト
すべて自作となっています。
あまりまとまっていないので参考にしづらいかもしれません。
使っていない関数もそのまま残っています。

難しそうに見えると思いますが、中学高校生にもできる内容のプログラムではないかと思います。
ただし、そのままでは中高生には難しく、丁寧に教えれば理解できる内容ということです。

回転しまくっていますが、三角関数は脇役になっています。
座標を回転させたり奥行き方向に移動したりは「行列」を使っていて難しそうですが、
ここで使っている行列は、「複数の掛け算を一度に行うそういう機能的な式」であって、
ちょっとの行列のルールを覚えれば、特に難しいこともないと思いました。
もちろんインターネットのサイトで3DCGの行列計算や陰面処理の方法を教えてくれている方がいたから難しいものを感じずに済んだ、ということを忘れてはいけません。

ベクトルや、その内積、外積というものも出てきますが、内積、外積は、ここではただの公式であって
変数を当てはめれば必要な答えが得られるので、特に意味を理解することもないです。
ベクトルは「ベクトル」という言葉が難しいと思います。
ここではただのx,y,zの一組の座標をベクトルと呼んでいる、他の3次元の座標と変わらないけど、特別にベクトルと呼んでいる、
という印象がありました。ベクトルと言ってもここではただの座標です。
(ちょっと乱暴かな)

ここまでプログラムするのは大変ではあったんですが、手が届かないほど難しい、というものはなかったです。


まだ課題がある状態です。
●視点を変更できるようになって、計算もだいたい正しいとは思うんですが、人間の操作に対して回転の動きがちょっとおかしいです。
意図した方向と違う方向に動くことがあります。
デモはまともに動く動作だけを選んで行っています。
●三角ポリゴンを使うのが普通ではないかと思いますが、ここでのプログラムは四角ポリゴンになっています。
三角ポリゴンでやりたい人にはもしかしたら残念に思うかもしれません。(プログラムの変更箇所は少ないと思います)
●陰面処理が不完全です。でもこれで満足するしかないかな。。

参考に読ませてもらったページはこちらです。

3Dプログラミング http://tech-sketch.jp/2011/10/3d1.html
陰線処理の手法 http://www.myu.ac.jp/~makanae/CG/cg1_14.htm

3Dプログラミングのページで一部誤記があって、長い時間悩みました。
アスペクト比について、
http://tech-sketch.jp/2011/12/3d4.html
のページの中で、「ディスプレイの高さ÷幅でアスペクト比を求めて指定します。」とあるので、
私は最初 height / width で計算していましたが、画像がどうしてもゆがみます。
同じページの下のほうで、「アスペクト比はwidth / heightで求められる為、…」とも記載されていて、
width / height で計算しなおしたら、きれいに表示されました。
アスペクト比は、どちらで計算してもアスペクト比として通用しますが、自分で使うものとしてどちらかに決める必要があるそうです。
どちらも間違いではないので、誤記につながったのかなと思います。
デバッグ画面

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