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 を見る

関連記事

Wordpress VR Test

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

blender 地球

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

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

記事を読む

Blender ボーンの追加

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

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

記事を読む

blender three.js 地球

Blender Three.js 地球 その3(ベイクと星)

今回はベイクを試してみようと思います。 あと、参考サイトの英語の動画解説では、blenderの

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

three.js 環境マッピング

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

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

記事を読む

blender 環境テクスチャ

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

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

記事を読む

brender Three.js WebGL

Message

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

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラーの状態 WordPress 管理画面のテキ

wordpress タイトルの変更
WordPress タイトルの変更

テンプレートタグ the_title(); get_the_title

All-in-One WP Migration で サーバ移動
「All-in-One WP Migration」プラグインで 簡単に WordPress のサーバー移行する手順メモ

1.移行元サイトでのデータエクスポート 「All-in-One WP

DNSサーバーとは
ドメインとは?DNSサーバーとは?

ドメインとは? ドメインとは? ドメインとは、インターネット上のネ

javascriptで複数同じ名前のformの値を取得する
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHT

→もっと見る

    • 202403
      Mon Tue Wed Thu Fri Sat Sun
      123
      45678910
      11121314151617
      18192021222324
      25262728293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑