Sprite3D | KnockKnock

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クラスのメンバ関数や、ドキュメントを読んでいただければ、数も少ないのでだいたいわかると思います。

タグ別アーカイブ: Sprite3D

CSS3で疑似3D表現を実現するSprite3D.jsを触ってみた

関連記事