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

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 にアップしました。

以下のように使います。
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<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 軸方向の奥行き処理(遠近感)がよく分からない。。。
その関係もあり、ワイヤフレームのみ対応で、塗りつぶせません。
ワイヤフレームの線の太さも変更できません。(色は変更可能)
あと、標準以外の図形も追加できるようにしたいですね。
(ちゃんと本とか読まないといけないな)

この記事へのコメント

この記事へのトラックバック