Blender Three.js エクスポート その5(目のボーンとウェイトペイントとか)
前回亀の歩くアニメーションが、手足のボーンしか動かしてないのに、目や甲羅の部分まで連動してしまったので、ウェイトペイントで治そうと思います。
前回記事:Blender Three.js エクスポート その4( モーフアニメーション)
Blender ウェイトペイント
アーマチュアを選択して、ポーズモードにします。
その状態で亀を選択して、編集モードをウェイトペイントにします。
右クリックでそれぞれのボーンを選択すると、カレントのボーンが水色になり、そのボーンとウェイト連動している箇所程赤色、してない程青色になっています。
ツール・シェルフのツールタブ、ブラシを Subtract にして、連動させたくないところを青に塗っていきます。
それを手足、頭、尻尾とやっていきます。
(ツール・シェルフのオプションタブ、Xミラーにチェックして、アクティブかすべてボタンを押すと片側だけの編集で済みます。)
DEMO を見る
気持ち悪いのはなくなりました。
Blenderで目をキョロキョロさせたい
目はキョロキョロさせたくて、ちょっと苦労したので細かくメモしておこうと思います。
2つ思い通りに動いた方法があります。
一つ目は、編集モードで、Pキー→選択物 って感じで、目を完全に一回切り離して、オブジェクトで回転アニメーションを作った後に、目以外の部分→左目→右目→アーマチュアと選択して、ペアレントで自動のウェイトで連動させる。
これでも大丈夫ですが、目以外の部分と、目をひとつひとつJSONファイルでエクスポートして、Three.js の方で複数読み込んで表示させたので、あんまりスマートじゃない感じでした。
やっぱり目にもボーンを付けてやった方がThree.jsの方で読み込みがスマートなので、そのやり方をメモしておきます。
Blenderで目のボーンをつける
オブジェクトモードでアーマチュアを選択して、編集モード(とソリッド)にします。
テンキー1で視点を前にして、頭(Head)のボーンのTipを選択します。
Shift + E → X で目のボーンを作ります(目の半径より少し大きめ)。
左右と出来た一つ一つのボーンを順番に選択して、プロパティーエディターの親:接続のチェックを外します。
亀を選択、編集モードで(Aキーで全選択解除した状態で)目の辺りにカーソルを合わせて、2回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 を見る
関連記事
-
-
Blender Three.js エクスポート その3( テクスチャなどがエクスポート出来ない場合)
Blender ではちゃんと表示しているのに、Three.js でエクスポートしたら、オブジェクトや
-
-
Blender Three.js ガラス その1(Cyclesレンダー)
Blenderでガラスの靴をモデリングしてみました。 最終的にはthree.jsで表示しようと思い
-
-
Blender Three.js 地球 その2(ノード)
前回はNASAの地球のテクスチャを1つだけ使って、球へのテクスチャの貼り方を2パターンやってみました
-
-
Blender Three.js エキスポート その2(3DのテキストのアニメーションやってみるⅡ)
今回は、Three.js を使って、前回Blenderから書き出した JSONファイル を表示したり
-
-
Blender Three.js 地球 その3(ベイクと星)
今回はベイクを試してみようと思います。 あと、参考サイトの英語の動画解説では、blenderの
-
-
WordPress で VR させて、360°のパノラマ画像を表示する
WordPress.com内ショートコードで VR させる WordPress.com内で、VR(
-
-
Blender Three.js ガラス その2(環境マップ)
前回Cyclesレンダーを試してみました。 Cyclesレンダーはノードを使用しているので、ガ
-
-
Blender Three.js エクスポート その4( モーフアニメーション)
前回作った亀に歩くモーフアニメーションを付けて、それを Three.js で表示するまでをやってみよ
-
-
Blender Three.js エキスポート その1(3DのテキストのアニメーションやってみるⅠ)
Blender インストール 3Dを作るのに、Blender(ブレンダー)という、ソフトを使ってみ
-
-
Three.jsで360°パノラマ画像を VR させる
Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR