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


タブ→ アプリ画面 ソースコード デバッグ画面
アプリ画面
キー操作 (デモ終了後)
4,6X軸で回転
8,2Y軸で回転
9,1Z軸で回転
(object操作時のみ)
SPACEオブジェクト操作、視点操作
切り替え
←→左に移動、右に移動
(object操作時のみ)
↑↓奥に移動、手前に移動
RollUP,DOWN上に移動、下に移動
(object操作時のみ)
p塗りつぶしon/off
wワイヤフレームon/off
lライティングon/off
aライティング直接光のみ/直接光+環境光
切り替え
+,-オブジェクトの拡大縮小
(ctrlmode: object時のみ)
※Firefox,InternetExplorer,Android4.4ブラウザ等で見られます。
※3D酔いする方のためにデモは一定間隔で止まる
&スピードダウンをしています。
※操作はキーボードが必要です。
※陰面処理は完璧ではありません。(たまに変)
※画面外のクリッピング処理をしていません。(たまに乱れる)
※core i5 2.3GHzで動作確認
debug
test
Firefox, Internet Explorer ok
debug2
debug3
ソースコード
左のリンクをクリックするとソースコードを表示します
default.htmlこのページDownload
main.jsプログラム本体Download
ThreeD.js空間のクラスDownload
Model.js1つの形状のクラスDownload
Camera.jsカメラのクラスDownload
Lighting.js光源のクラスDownload
other.jsその他関数群Download
index.cssページのCSSDownload
key100.jsキー入力スクリプトDownload
ダウンロードの方法: すべて同じフォルダにダウンロード(Downloadを右クリック、名前を付けてリンク先を保存)して、default.htmlを開けば、動作するはずです。

全部JavaScriptで作った3DCGのプログラムです。
ある程度汎用性を持たせたつもりで、応用しやすいです、と言いたいところですが、自分にしかわからないコードかもしれません。
このプログラムの先に想定しているものは、
「3Dダンジョンゲーム」、「シンプル化してNintendo3DSのプチコン3(BASIC)に移植する」、「シンプル化してページに飾れるような3Dオブジェを作る」、「3D計算を知りたがっている中高生諸君に教えてあげる」
などです。

tech-sketch様の3Dプログラミング http://tech-sketch.jp/2011/10/3d1.html のページに合わせてソースコード中にコメントを入れてあります。
ページの説明がソースコードのどこに当たるのかわかるように対応させてあります。(main.jsの最初に対応を記述)

中高生にもわかる…、と思っていたんですが、やっぱり難しいかなと思いました。
数学とか一部ちょっとだけ難しいし、全体の流れも結構難しい。全体の流れの把握が難しいです。
うまく動かない時に、上手にデバッグを進められれば、スムーズに進んで良いと思いました。
たとえば、数値の中を面倒なく、自由に見られるといいです。
「3Dの理解は挫折する人が多い」とどこかのページで語られていました。

とりあえずはmain.jsを開いて、3Dプログラミング http://tech-sketch.jp/2011/10/3d1.html のページとの対応を確認してみてください。
あまり見やすくはないんですが。。
なるべく説明のページで使われている用語と同じ用語をプログラムの中で使うようにしています。
変数もわかりやすいように同じような変数名にしているのでヒモ解きやすいと思います。
main.jsはページを動かすためのキー入力などが主なのでそんなに重要ではないです。
3Dのキモ部分はmain.jsには書かれていません。

main.jsの次に見るのは、Model.jsかな。その次はCamera.js。この2つがプログラムの中心、キモ部分です。
ThreeD.jsは小さいスクリプトなので時々見ればいい感じ。
other.jsはユーティリティです。other.jsは変なものがちょこちょこ入ってますが、その中でもmatrixProduct()という関数は中心的とはいかないですが、よく使う関数です。
matrixProduct()は行列の計算を行う関数です。
行列は使わなくても3Dの計算はできると思いますが、使ったほうが近道です。使わないと過酷な計算の嵐になりそうです。
Lighting.jsは即席で作ったような粗雑で簡単な内容です。
でも3Dプログラミングの説明のページで説明されている通りの部分(getColor関数)もあるので参考になると思います。
モデルに簡単に光の加減を与えます。

本当はもっと丁寧に説明をしたかったんですが、2015年2月のホームページ更新のネタにこれを使いたいので、この状態でアップロードします。

まだ課題がある状態です。
●三角ポリゴンを使うのが普通ではないかと思いますが、ここでのプログラムは四角ポリゴンになっています。
三角ポリゴンでやりたい人にはもしかしたら残念に思うかもしれません。(でもプログラムの変更箇所は少ないと思います)
●陰面処理が不完全です。でもこれで満足するしかないかな。。

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

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

デバッグ画面 現在未使用中。

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