Three.jsを使ってマネキンに任意のポーズで表現できるスクリプト・「mannequin.js」

Ads

mannequin.js


mannequin.jsはThree.jsを使って3Dマネキンに任意のポーズで表現できるスクリプトです。

上サンプルは公式にあったサンプルに少し手を加えて男性の頭を大きくしてなんだかハッピーな状態にしたものです。

Three.jsを使い慣れていない当方でも割と手軽に操作できましたので技術力のある開発者さんならすぐに使いこなせるんじゃないかなと思います。

Ads
<script src="three.min.js"></script>
<script src="mannequin.min.js"></script>

Three.jsとmannequin.jsを読み込みます

createScene();
 var man = new Male();

初期化します。

man.position.set(20, 3.5, 0);
man.turn(-120);
man.head.bend(-30);
man.head.turn(30, RIGHT);

man.l_leg.straddle(50);
man.l_ankle.turn(20);

ジョイント(関節)を操作してポーズを作れば完成です。

var woman = new Female();
woman.position.set(-20, 2, 0);
woman.turn(-60);

var kid = new Child();
kid.position.y = -8;
kid.turn(-90);

女性と子供のマネキンも用意されています。各ジョイントの名称は本スクリプトのサイトで確認できます。

他にも物を持たせたり動的に動かしたりも可能です。

手軽で良いですね。ライセンスはGPLとの事です。

mannequin.jsOn Github