Hello.
There is no canvas.

↑↓←→キー:回転、SHIFT+↑↓←→キー:移動、RollUP/DOWN:ズーム、HOME:もどす、SPACE:回転アニメONOFF


この 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というデータファイルが必要です)

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