JavaScriptとCSS3だけで疑似的に3D表現を行うことができるSprite3D.jsを、モックアップ作成ついでに触ったので投稿します。
このライブラリは、Tree.jsのように、WebGLをサポートした3D描画ライブラリとは違い、CSS3のtranslate3dを使って、画像にパースをかけて疑似的に3D表現を付与するライブラリです。そのため計算処理が少なく、処理が軽いことが特徴です。もちろん疑似的なD3表現のために出来ることが限られていますが、ブラウザゲームを作るといったこと以外では、これで十分ではないかと思われます。処理が軽いことでスマートフォンやタブレットで動かすことも現実的ですが、IE9以下ではperspectiveをサポートしていないために使用できません。
33~28行目 : ステージを作成して円状に配置する土台を配置します。
var stage = Sprite3D.stage(); // ステージを作成
var circle = Sprite3D.create(".circle"); // 円状に配置する土台となるオブジェクトを作成
circle.origin(0, 0); // 基準点を設定
circle.move(0, 0, -1000); // 奥に1000px移動
circle.update(); // 描画更新
stage.appendChild(circle); // 土台をステージに追加
40~50行目 : 各アイテムを作成して土台に円状に配置します。
var rot = 0;
var i = 0, max;
for (i = 0, max = 10; i < max; i = i + 1) {
var item = Sprite3D.create(".item");
item.origin(100, 125);
item.move(Math.sin(rot * Math.PI / 180) * 1000, 0, Math.cos(rot * Math.PI / 180) * 1000);
item.rotation(0, rot, 0);
item.update();
circle.appendChild(item);
rot += 36;
}
52~57行目 : 繰り返し描画を更新します。
setInterval(function () {
circle.rotationX(circle.rotationX() - 0.1);
circle.rotationY(circle.rotationY() - 0.1);
circle.rotationZ(circle.rotationZ() - 0.1);
circle.update();
}, 1000 / 30);
基本的にこれでおしまいです。
ちょっと嬉しいところは、Sprite3Dオブジェクトを入れ子に出来るところです。
このサンプルに出てくる以外のパブリックなメソッドに関しては、Sprite3Dクラスのメンバ関数や、ドキュメントを読んでいただければ、数も少ないのでだいたいわかると思います。