システムブログ

MakeHuman(nightly)からThree.jsへ

システム部の稲葉です。
MakeHumanでサクッとモデルを作成してThree.jsで利用するなんて事がよくあると思うんですが、今のnightly buildはそのままだと髪、眉、まつ毛に変な白いポリゴンが何か所かに表示されて、悲しかったりします。

手順としては、
1.MakeHuman nightly buildで頑張る
2.Colladaで出力する
(3.Blenderでimportした際にテクスチャが反映できない場合、出力されたColladaのテクスチャのパスを修正する(file://を削除))
4.Blenderにimportする
5.各種パラメータを変更※1、ポリゴン数の削減、服の破れている箇所の修正、ボーンの埋め込み、モーション作成
6.Colladaで出力する
7.textureサイズを画像編集ソフトで小さくする
8.three.jsのColladaLoaderで読み込む※2
※1,※2で工夫しないと今のNightly Buildでは髪、眉、まつ毛で白いポリゴンが表示されてがっかりな事になります

※1:髪、眉毛、まつ毛をプロパティエディタで以下変更します
マテリアル-Transparencyにチェックを入れてalpha,specを0にする
テクスチャ-Inflのalphaにチェック
オブジェクト-DisplayのTransparentにチェックを入れる

※2:ColladaLoaderのloadメソッドのコールバック内でmaterialのtransparentをtrueにします

collada.scene.traverse( function ( child ) {
  if ( child instanceof THREE.SkinnedMesh ) {
    child.castShadow = true;
    var animation = new THREE.Animation( child, child.geometry.animation );
    animation.play();
  }
  if ( child instanceof THREE.Mesh ) {
    child.castShadow = true;
    child.needsUpdate = true;
  }

  // 自力でテクスチャのアルファ値を有効にする
  console.log(child.name);
  if (child.name == 'test_human4-ponytail01') {
    child.children[0].material.transparent = true;
  }
  if (child.name == 'test_human4-eyelashes01') {
    child.children[0].material.transparent = true;
  }
  if (child.name == 'test_human4-eyebrow001') {
    child.children[0].material.transparent = true;
  }
});