Blender Three.js エクスポート その5(目のボーンとウェイトペイントとか)

公開日: : brender, Three.js, WebGL

Blender Three.js 海 物理演算

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

前回記事:Blender Three.js エクスポート その4( モーフアニメーション)

Blender ウェイトペイント

アーマチュアを選択して、ポーズモードにします。
その状態で亀を選択して、編集モードをウェイトペイントにします。
Blender ウェイトペイント
右クリックでそれぞれのボーンを選択すると、カレントのボーンが水色になり、そのボーンとウェイト連動している箇所程赤色、してない程青色になっています。
Blender ウェイトペイント
ツール・シェルフのツールタブ、ブラシを Subtract にして、連動させたくないところを青に塗っていきます。
Blender ウェイトペイント
それを手足、頭、尻尾とやっていきます。

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

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

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

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

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

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

Blenderで目のボーンをつける

オブジェクトモードでアーマチュアを選択して、編集モード(とソリッド)にします。
テンキー1で視点を前にして、頭(Head)のボーンのTipを選択します。
blender 目のボーン
Shift + E → X で目のボーンを作ります(目の半径より少し大きめ)。

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

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

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

左目のボーンを選択し、R → Z → -90 で回転させます。
Shift + S で、選択物→3Dカーソルにします。
Blender 目のボーン
そうすると、丁度目の中心にボーンが移動出来ます。

オブジェクト亀を選択、編集モードにします。
左目選択、G → X → 1
右目選択、G → X → -1
頭選択、G → Z → 1
とかブラシを塗りやすいように適当に移動しておきます。
(この時、他の頂点とか一緒に選択しないように気を付ける。)
Blender 目のボーン
ウェイトペイントにします。
Blender 目のボーン
ツール・シェルフのブラシの強さを1にして、頭のボーンを選択すると、目の色も変わると思うので、Subtractで完全に青にします。

目以外のボーンも順番に選択して、もし目の色が青以外になったら、青に塗りつぶします。
Blender 目のボーン
以下の画像では、右手を選択した時に目が連動しています。こういうところがないようにします。
Blender 目のボーン おかしい
そうして、目以外のボーンが目とまったく連動しないようになると、球の変形もなくなり丸くなります。

ブラシを Subtract から Draw にして、右目のボーンを選択した時は右目を赤に、左目のボーンを選択した時は左目を赤に塗ります。
Blender 目のボーン 完全に球で回転
目のボーンを試しにRで回転させると、目の球が完全に独立して、綺麗な球の形で、回転できる状態になります。

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

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

Blender Three.js 海洋やってみた

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

関連記事

blender 環境テクスチャ

Blender Three.js ガラス その1(Cyclesレンダー)

Blenderでガラスの靴をモデリングしてみました。 最終的にはthree.jsで表示しようと思い

記事を読む

Blender と Three.js で3Dのテキストのアニメーションやってみる

Blender Three.js エキスポート その1(3DのテキストのアニメーションやってみるⅠ)

Blender インストール 3Dを作るのに、Blender(ブレンダー)という、ソフトを使ってみ

記事を読む

blender 球 テクスチャ

Blender Three.js 地球 その1(テクスチャ)

Blender 地球 テクスチャ Blenderで地球を作ってみようと思います。 最終的にはエク

記事を読む

Blender と Three.js UVのマテリアル複数 エクスポート

Blender Three.js エクスポート その3( テクスチャなどがエクスポート出来ない場合)

Blender ではちゃんと表示しているのに、Three.js でエクスポートしたら、オブジェクトや

記事を読む

Blender と Three.js で3Dのテキストのアニメーションやってみる その2

Blender Three.js エキスポート その2(3DのテキストのアニメーションやってみるⅡ)

今回は、Three.js を使って、前回Blenderから書き出した JSONファイル を表示したり

記事を読む

Blender ボーンの追加

Blender Three.js エクスポート その4( モーフアニメーション)

前回作った亀に歩くモーフアニメーションを付けて、それを Three.js で表示するまでをやってみよ

記事を読む

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR

記事を読む

three.js 環境マッピング

Blender Three.js ガラス その2(環境マップ)

前回Cyclesレンダーを試してみました。 Cyclesレンダーはノードを使用しているので、ガ

記事を読む

blender 地球

Blender Three.js 地球 その2(ノード)

前回はNASAの地球のテクスチャを1つだけ使って、球へのテクスチャの貼り方を2パターンやってみました

記事を読む

Wordpress VR Test

WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる WordPress.com内で、VR(

記事を読む

brender Three.js WebGL

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

マウスドラッグ
マウスドラッグ で ボール投げたい

アイキャッチ画像がマウスドラッグを描いたつもりが、子供の好きなあのボー

Three.jsで360°パノラマ画像を VR させる
Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るの

Wordpress VR Test
WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる Word

画像加工 cropbox.js
写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる

Git Hub の cropbox 写真をアップロードしてカット出来

画像の拡大・縮小 タッチイベント
画像の拡大縮小を javascript の touch イベントでやってみる

画像の幅と高さを取得 まずは、neko.jpg という画像を用意して

→もっと見る

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村 FC2 Blog Ranking
PAGE TOP ↑