Hello.
There is no canvas.
【Control】
↑↓←→:Rotate
F:Fill ON/OFF
L:Line ON/OFF
SPACE:Spinning animation ON/OFF
SHIFT+↑↓←→:Move
Roll UP/DOWN:Zoom
HOME:Init.

SOFTWARE KEYBOARD
ROLL UP
ROTATE MOVE ROLL DOWN
HOME
F L SPACE COLOR LAY
OUT


この JavaScript はモデルのデータ以外は、単一のファイルで、その他ライブラリなどを参照していません。
WebGLも使っていません。

3DCG描画、陰面消去2種類(画家のアルゴリズムと法線ベクトル法)、陰影表現(ランバート反射)を行っています。
それらの実現のために使っている数学は、四則演算、三角関数、内積、外積です。

三角関数は方眼紙上で点を回転させる程度の計算で、
内積と外積は公式をそのまま使っているだけの計算でしかもその内容は四則演算です。
(その四則演算の意味を私は知らないので知らなくてもできるってことです)
三角関数の難しいやつとか行列とかもありません。
視推台はないし、プロジェクション変換とかアフィン変換といった言葉も出てきません。
3DCGの基本で難しいのは数学ではなく、3DCGプログラミングの流れとかノウハウとか3次元空間の理屈とかだと思います。

そのように理解したほうが3DCGプログラミングは習得しやすいのでは思います。
数学はそんなには必要ないのでトライしてみてはどうでしょうか。
(わからないことがあったらhomepage6047(近日web6047に変更)のabout this websiteのページから質問を送ってください)

あと今回たまたまFBXフォーマットというデータを使いましたがちょっと難解でした。
3DCGのデータは基本的には、頂点x,y,zがたくさんあって、どの頂点をつないで面にするかというデータがあるだけです。
それを確認するためには、このページを右クリックしてhtmlファイルを保存し、
htmlの最初のほうの //1:立方体、0:ドラゴン というコメントが付いたif文の 0 を 1 にしてブラウザで表示します。
(その際0を選んでドラゴンを表示するためには別途face.jsというデータファイルが必要です)
立方体を表示させたら、プログラムリストのそのコメント以降をちょっと読んでみてください。
立方体の3Dモデルデータが単純であることがわかります。
if文の0と1を切り替えると立方体とドラゴンのデータが切り替わるわけですが、どちらのデータも同じプログラムへ流れていき表示されます。
ドラゴンのデータ(face.js)が大きくて複雑に見えても、実はそのデータ構造は立方体と同じということです。

homepage6047(近日web6047に変更) 管理人より