システム部の稲葉です。
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にします
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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; } }); |