Model Weightの操作方法

three.jsモデルのWeight/Indexを修正するツールの使い方を説明します。

Weight Toolタブ

最初から選択されている、画面左上のタブです。

基本

通常右側に、ボーンとワイヤーフレームで描画された頂点が表示されています。ここで、頂点を選択して調整したりします。

左側には、調整後のボーンを元にしたキャラクターが表示されます。

アニメーションがあれば、動きます。

マウスとコントローラータブ

基本となるマウス操作および、右上のコントローラーパネルのタブ以外の操作を説明します。

マウス操作

マウスホイール-カメラをズーム　イン/アウト
左ボタン・マウスドラッグ - ワイヤーフレームボーンの角度を変更
左ボタン・マウスドラッグ + ALTキー　- ワイヤーフレームボーンの移動
中央ボタン・マウスドラッグ　- キャラクターの角度を変更
マウスクリック - ボーン又は、頂点が選択されます。
マウスダブルクリック - 無選択になります。

注意事項は、キャラクターの移動はModel Positionタブからのみ可能です。

タブ以外のコントローラーパネル

Pause/Play SkinnedMesh ボタンキャラクターのアニメーションの開始・停止を切り替えれます。その下のレンジバーで、フレームを変更できます。

showWireFrameチェックで、vertexの表示と非表示を切り替えれます。

ボーンの構造だけ見たい時に使います。

Model Position & Rotation タブ

rotationが角度、positionが位置で、XYZ座標にたいして、左側のキャラクターの角度・位置を変更できます。

Resetボタンで、値は0に変更できます。

Bone & Weightコントローラータブ

Bone Selection下のリストからボーンを選択できます。(ボーンは画面から直接マウスでクリックしても選択できます)

Prevボタンで前の頂点へ、Nextボタンで次の頂点へ移動します。選択が難しい場合とかに使います。

頂点を選択すると、頂点番号と、割り当てられてるIndex1とIndex2の番号、それとWeight1とWeight2が表示されます。

変更する場合、リストとレンジで変更して、下のボタンを押します。

Update Both - ボーンインデックス番号とウエイト値の両方修正されます。
Update Weight - ウエイト値のみ更新されます。
Update Index - ボーンインデックス番号のみ更新されます。

Re Auto Weight欄より自動でindexとWeightを割り当てられます。

Exec Weightボタンで実行します。

from Geometry - 読み込んだデータに最初からある値に戻します。
Makehuman * - Makehumanのボーン用です。

Load Datasコントローラータブ

データーを読み込むのに使います。

Charactor

three.jsモデルデーターを読み込みます。ボーンは無くてもかまいません。

(3.0及び3.1フォーマットのみサポート)

use bone insideのチェックがあると含んでいるボーンデーターも読み込みます。

Another Bone

BVHファイルを読み込みます。ボーンを含まないモデルにボーンを設定したり、アニメーションを合わせたりするのに使います。

ただし、ボーンの位置はモデルと同じでないと正常にアニメーションしません。

Texture

PNG又は、JPEG画像を読み込みます。キャラクターのテクスチャーとして使います。

Weight & Indices

これは、すでに出力したモデルのweight/indexデーターを再利用する場合に使います。

ただし、頂点の数はまったく同じでないといけません。

用途としては、Model Weightで修正したが、再びBlenderでUVやVertexの位置を微調整した場合に使います。

Export Datasコントローラータブ

出力するのに使います。

Nameの所にファイル名を入れて、Export as Jsonボタンを押すとダウンロード用のリンクが作成されます。クリックしてダウンロードします。

+Animationのチェックを入れていると、ボーンにAnimationがある場合は、それも含めることができます。

Infoタブ

読み込んでいるボーンの情報を表示します。

BVH(Bone) - BVH形式で表示
BVH(A-Bone) - three.jsのAnimationBone形式で表示
Geometry(A-Bone) - Geometry内のAnimationBone形式を表示

Copyタブ

srcで元となる、weight/indexのモデルデータ、destに複製先のモデルデーターを選択します。そしてcopyボタンを押します。

Load Datasから、Weight & Indicesを選択して、exportするのと同じ処理をします。

Mergeタブ

２つのモデルを結合します。

UVPackと内容は近いです。

Convertタブ

three.js 3.0モデルのフォーマットを3.1に変更します。

UVPackタブ

複数のthree.jsモデルを結合することができます。 Mergeと違って、UVが重複しないよう指定することができます。

UVPackコントローラ

UV-Lineサイズ - UVラインの太さ。縮小される場合、実用的には細いのを選んだ方がいいです。単に表示だけなら太いのを選んでも大丈夫です。
UVカラー - UVの線色
image-size - 画像サイズ - 大きくするとTextureだけで4MBとかになります。
image-type - 画像種類 PNG以外、透明は扱えません。
preset -結合するモデルの結合位置データーのプリセットを呼び出します。

データー一覧

New - 新しく作成します。
Add - 追加します。
Update - 現在の選択を更新します
Remove - 現在の選択を削除します

データー編集/追加

Model - 結合するthree.jsモデルjsonデータ
Texture - 結合するUV画像データー
split - 分割数
X - X位置
Y - Y位置
Comment - コメント

例えば、４つのモデルを結合して、UVをかぶらないようにする場合は splitはすべて４で X:Yは、それぞれ、0:0、0:1と1.0と1:1になります。

元のテクスチャーサイズは、image-sizeに合わせて縮小されますので、画質を保ち害場合は、image-sizeを大きくします。例えば、サイズ512の場合、1024にする必要があります。