Blender Three.js エクスポート その５（目のボーンとウェイトペイントとか）

前回亀の歩くアニメーションが、手足のボーンしか動かしてないのに、目や甲羅の部分まで連動してしまったので、ウェイトペイントで治そうと思います。

前回記事：Blender Three.js エクスポート その４（ モーフアニメーション）

Blender ウェイトペイント

アーマチュアを選択して、ポーズモードにします。
その状態で亀を選択して、編集モードをウェイトペイントにします。

右クリックでそれぞれのボーンを選択すると、カレントのボーンが水色になり、そのボーンとウェイト連動している箇所程赤色、してない程青色になっています。

ツール・シェルフのツールタブ、ブラシを Subtract にして、連動させたくないところを青に塗っていきます。

それを手足、頭、尻尾とやっていきます。

（ツール・シェルフのオプションタブ、Xミラーにチェックして、アクティブかすべてボタンを押すと片側だけの編集で済みます。）
DEMO を見る
気持ち悪いのはなくなりました。

Blenderで目をキョロキョロさせたい

目はキョロキョロさせたくて、ちょっと苦労したので細かくメモしておこうと思います。
２つ思い通りに動いた方法があります。

一つ目は、編集モードで、Pキー→選択物 って感じで、目を完全に一回切り離して、オブジェクトで回転アニメーションを作った後に、目以外の部分→左目→右目→アーマチュアと選択して、ペアレントで自動のウェイトで連動させる。

これでも大丈夫ですが、目以外の部分と、目をひとつひとつJSONファイルでエクスポートして、Three.js の方で複数読み込んで表示させたので、あんまりスマートじゃない感じでした。

やっぱり目にもボーンを付けてやった方がThree.jsの方で読み込みがスマートなので、そのやり方をメモしておきます。

Blenderで目のボーンをつける

オブジェクトモードでアーマチュアを選択して、編集モード（とソリッド）にします。
テンキー1で視点を前にして、頭（Head）のボーンのTipを選択します。

Shift ＋ E → X で目のボーンを作ります（目の半径より少し大きめ）。

左右と出来た一つ一つのボーンを順番に選択して、プロパティーエディターの親：接続のチェックを外します。

亀を選択、編集モードで（Ａキーで全選択解除した状態で）目の辺りにカーソルを合わせて、２回Lキーで目玉だけ選択します。
Shift + S でカーソルを選択物にします。

再びオブジェクトモードで今度はアーマチュアを選択して、編集モードにします。

左目のボーンを選択し、R → Z → -90 で回転させます。
Shift + S で、選択物→3Dカーソルにします。

そうすると、丁度目の中心にボーンが移動出来ます。

オブジェクト亀を選択、編集モードにします。
左目選択、G → X → 1
右目選択、G → X → -1
頭選択、G → Z → 1
とかブラシを塗りやすいように適当に移動しておきます。
（この時、他の頂点とか一緒に選択しないように気を付ける。）

ウェイトペイントにします。

ツール・シェルフのブラシの強さを1にして、頭のボーンを選択すると、目の色も変わると思うので、Subtractで完全に青にします。

目以外のボーンも順番に選択して、もし目の色が青以外になったら、青に塗りつぶします。

以下の画像では、右手を選択した時に目が連動しています。こういうところがないようにします。

そうして、目以外のボーンが目とまったく連動しないようになると、球の変形もなくなり丸くなります。

ブラシを Subtract から Draw にして、右目のボーンを選択した時は右目を赤に、左目のボーンを選択した時は左目を赤に塗ります。

目のボーンを試しにRで回転させると、目の球が完全に独立して、綺麗な球の形で、回転できる状態になります。

最後に編集モードで、
左目選択、G → X → -1
右目選択、G → X → 1
頭選択、G → Z → -1

と逆をやって、目と頭の位置を戻します。

（他にもっといいやり方もあるかもしれませんが、）
目がボーンを中心に、キョロキョロと回転出来るようになりました。
頭と尻尾のアニメーションも付けてみました。
DEMO を見る

Blender Three.js 海洋やってみた

せっかくなので、物理演算の海洋を使って、荒波を泳がせてみました。
パーティクルとは違って、海洋は意外とエクスポート出来た。
DEMO を見る