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タブ
2つのモデルを結合します。
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 - コメント
例えば、4つのモデルを結合して、UVをかぶらないようにする場合は splitはすべて4で X:Yは、それぞれ、0:0、0:1と1.0と1:1になります。
元のテクスチャーサイズは、image-sizeに合わせて縮小されますので、画質を保ち害場合は、image-sizeを大きくします。例えば、サイズ512の場合、1024にする必要があります。