JavaScript＋Canvasによるリアルタイム3Dアニメーション Kawa.netブログ（川崎有亮）/ウェブリブログ

JavaScript＋Canvasによるリアルタイム3Dアニメーション

<< 作成日時： 2008/03/17 02:07 >>

JavaScriptで、リアルタイムに 3Dアニメーション表示を行うのは原理的に難しいけど、
Canvasを使えば結構実用的に動いてくれた。⇒デモ
Firefox、Opera、IE で確認しています。（IE では、Google の excanvas.js を利用）

まだ完成していないけど、Canvas を使ってワイヤフレームの 3D を表示する
JavaScript ライブラリ wire3d.js を作成してみました。
http://svn.coderepos.org/share/lang/javascript/wire3d/trunk/wire3d.js
CodeRepos にアップしました。

以下のように使います。

<script type="text/javascript" src="wire3d.js"></script>
<script type="text/javascript">
    function init(){
        var cube = new Wire3D.Item.Cube();
        cube.setColor( 128, 64, 0 );
        cube.resize( 1.0, 1.0, 1.0 );
        cube.rotate( 0.0, 0.3, -0.5 );

        var space = new Wire3D.Space();
        space.append( cube );

        camera = new Wire3D.Camera( 'demo_here', space );
        camera.display();
    }
    window.onload = init;
</script>
<canvas id="demo_here" width="600" height="300"></canvas>

Wire3D.Item.Cube が立方体オブジェクトを作るクラス、
Wire3D.Space が複数のオブジェクトを格納する空間のクラス、
Wire3D.Camera が canvas 要素に表示するカメラのクラスです。

オブジェクトは X・Y・Z 軸方向それぞれに回転・移動・拡大縮小が可能。
平面図形は、直線（線分）・円・三角形・正方形（四角形）・十字キー、
立体図形は、球・正四面体（三角錐）・立方体を組み合わせられます。
円は、ベジェ曲線で再現しています。

Demo #1 - 平面図形のデモ
Demo #2 - 平面図形のデモ
Demo #3 - Wiiリモコンを回転させる

3D は全く詳しくないので、ガシガシ適当に作ってみました。
ヘンな点があったら、教えて下さい。
なんか、突然、オブジェクトが反転する場合がありそう。
どこかの演算が間違っているのかな。。

（制限事項）
カメラのアングル変更などは、まだできません。
Z 軸方向の奥行き処理（遠近感）がよく分からない。。。
その関係もあり、ワイヤフレームのみ対応で、塗りつぶせません。
ワイヤフレームの線の太さも変更できません。（色は変更可能）
あと、標準以外の図形も追加できるようにしたいですね。
（ちゃんと本とか読まないといけないな）