ITエンジニア/デザイナ向けにオープンソースを毎日紹介

3Dはとかく面倒なイメージがあります。2Dに比べると考えることが多く、行列やライトなど様々な計算を行った上で表現しなければなりません。それではなかなか手出ししづらいのではないでしょうか。

3D系ライブラリとして有名なThree.jsもそうです。表示するまでにやるべき面倒な(だいたい毎回同じ)ことを取り除いてくれるライブラリがThreePiece.jsです。

ThreePiece.jsの使い方

例えばボックスの表示はこれだけで済みます。
例えばボックスの表示はこれだけで済みます。

さらに角度や色を指定する場合。
さらに角度や色を指定する場合。

rotateを指定すると回転させられます。
rotateを指定すると回転させられます。

様々なオブジェクトを表現できます。
様々なオブジェクトを表現できます。

塗りつぶしだけでなくテクスチャも使えます。
塗りつぶしだけでなくテクスチャも使えます。

オブジェクトに名前をつけて操作(縦に移動)できます。
オブジェクトに名前をつけて操作(縦に移動)できます。

さらにオブジェクト同士をグルーピングしてまとめて操作します。
さらにオブジェクト同士をグルーピングしてまとめて操作します。

独自のオブジェクトを定義します。
独自のオブジェクトを定義します。

ThreePiece.jsはThree.jsのラッパーとして動作します。各種パラメータに対してデフォルト値をもっており、省略した場合は画面の見やすい場所に見やすい色で配置される仕組みです。3D表現が大幅にシンプルになりますね。

ThreePiece.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

ThreePiece.js

aike/ThreePiece.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2