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

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

Blender ボーンの追加

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

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

前回までのblenderファイルをフリー素材に置いておきます。
亀 blender 実験用 素材(モーフアニメーション)>>フリー素材

(今回もBlender のアーマチュアや、アニメーションを作るところは、適当で説明もかなりざっくりしています。)

Blender オブジェクトを中心に持ってくる

歩くアニメーションを作るには、アーマチュアというボーンを付けます。

ボーンを付けていく前に、X軸に平行にした方がいろいろ編集しやすいので、亀の向きを直します。

オブジェクトモードにして、右クリックで亀を選択してR → Z → -90 で Z軸に90度回転させます。
Blender オブジェクトを中心にする
亀が中心からズレてしまいました。その場合は、

Shift + C カーソルを原点にします。
Ctr + Shift + Alt + C ジオメトリを原点へ移動を選択します。
Blender オブジェクトを中心にする
これで真ん中に来ました。

Blenderでボーンの作成

Ctr+ 7 で視点を下にします。

Shift + C でカーソルを中心にした状態で(Aで全選択解除して)、Shift + A でアーマチュア→単一のボーンを選択します。
Blender ボーンの追加
R → X → 90 で X軸に90度回転させます。

G → Y(Y軸移動)とかS(拡大縮小)とかで、こんな風にします。
Blender アーマチュア ボーンの編集
編集モードで、プロパティーエディターのアーマチュア名前をturtleとかにします。

表示:レントゲンとかにもチェックを入れとくと、ボーンが隠れなくて編集しやすいので、チェックを。
左のツール・シェルフのプロパティータブで、Xミラーにもチェックを入れます。

ボーンの上の丸の部分:Tip
ボーンの下の丸の部分:Root

といいます。

ボーンの Tip 選択して、E → Y するとY軸に沿って新しいボーンが出来ます。
プロパティーエディターをボーンにして、名前をHead。

また、はじめに作ったボーンのTip選択して、今度はShit + Eを押します。

Xミラーにチェックを入れたことで、左右対称に2つ出来ます。
これが肩で、名前をShoulder_lとかShoulder_rとか。

そんな感じでボーンを作っていって、こんな感じに。
Blender アーマチュア ボーンの編集
(その他のボーン作成については省きますので、フリー素材にボーン付きのデータを置いておきます。)

Blender ペアレントでボーンの連動

頭、手、足、尻尾のボーンが出来たら、オブジェクトとボーンを連動させます。

オブジェクトモードでShiftを押しながら、亀→アーマチュアという順番に選択して、Ctr + P → 自動のウェイトでを選択します。
Blender アーマチュア ペアレント
そうすると、選択した順番で親子関係になり、オブジェクトとボーンが連動するようになります。

Blenderで歩くアニメーション

アーマチュアを選択して、ポーズモードにします。
下のフレームの終了を180くらいに。

ポーズモードで、左手と左足 R → X → 30
右手と右足 R → X → -30

と、それぞれ回転させます。

1フレーム目でAキーでボーンを全選択、ボーンの辺りにカーソル、I(アイ)キー → 位置/回転 でキーフレームを挿入します。
すると、黄色い線でキーフレームが作られます。

1フレーム目でAキーでボーンを全選択、 Ctr + C で コピーします。

40フレームに緑の再生バーを移動。
アーマチュアの辺りにカーソルを合わせ、Ctr + Shit + V すると、X軸で反転したアーマチュアがペーストされます。

Iキー → 位置/回転 でキーフレームを挿入します。
Blender アニメーション キーフレームの作成
80フレームに緑の再生バーを移動。
アーマチュアの辺りにカーソルを合わせ、Ctr + Shit + V をし、今度は左のツール・シェルフのX軸で反転のチェックをはずします。

Iキー → 位置/回転 でキーフレームを挿入します。

これを繰り返します。

120フレーム(X軸で反転のチェックをはずさない)
160フレーム(X軸で反転のチェックをはずす)

再生すると、なんとなく歩いてる感じになりました。

Blender で モーフアニメーション を Three.js 形式にエクスポート

エクスポートの設定は、(アーマチュアでなく、亀を選択して、)

  • Shading:Face Materials
  • Animation:Morph animation
  • SETTINGS:テクスチャ

の3つにチェックを入れて、エクスポートします。
Blender Three.js でエクスポート設定 アニメーション
このとき、アーマチュアを選択していると、Error Messageで、「Armature is not vallid mesh object」が出ますので気を付けてください。

エクスポートするときは、亀を選択してください。

Blenderでモーフアニメーション

Three.js で Blender のモーフアニメーションを表示するのには、以下のようなソースにしました。

// アニメーションの設定
var total_frame = 180;//トータルフレーム
var last_frame = null;
var current_frame = 1;

//Blenderのオブジェクトを読み込む
loader = new THREE.JSONLoader();
loader.load( 'turtle_animation.json', function ( geometry, materials ) { //第1引数はジオメトリー、第2引数はマテリアルが自動的に取得)
	
	//全てのマテリアルのモーフターゲットの値をtrueにする
	for (var i = 0, l = materials.length; i < l; i++) {
         materials[i].morphTargets = true;
    }
	//モーフアニメーションメッシュ生成
    mesh = new THREE.MorphAnimMesh(geometry, new THREE.MeshFaceMaterial(materials));

    mesh.position.set( 0,0,0);
    mesh.scale.set( 100, 100, 100 );
    scene.add( mesh );

	//アニメーション
	( function renderLoop () {
    	requestAnimationFrame( renderLoop );
		
	//トータルフレームに来たらカレントフレームを0にする
	last_frame = current_frame;
        current_frame ++;	
        if (total_frame <= current_frame) {
          current_frame = 0;
        }
        mesh.morphTargetInfluences[last_frame] = 0;
        mesh.morphTargetInfluences[current_frame] = 1;

		// 表示する
		renderer.render( scene, camera );

	} )();	
} );

DEMO を見る
動いてますが、なんか気持ち悪いですね。
長くなったので、次回ウェイトペイントで治そうと思います。

関連記事

three.js 環境マッピング

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

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

記事を読む

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

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

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

記事を読む

blender three.js 地球

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

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

記事を読む

blender 環境テクスチャ

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

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

記事を読む

blender 球 テクスチャ

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

blender 地球

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

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

記事を読む

Blender Three.js 海 物理演算

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

前回亀の歩くアニメーションが、手足のボーンしか動かしてないのに、目や甲羅の部分まで連動してしまったの

記事を読む

Wordpress VR Test

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

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

記事を読む

brender Three.js WebGL

Message

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

Wordpress 自作フォーム 2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)
WordPress 自作フォーム その2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

前回(WordPress 自作フォーム 1)のつづきです。 今回は細

Wordpress 自作フォーム
WordPress 自作フォーム その1(サンプルと設置)

Wordpress でプラグインを使わずにフォームをやってみます。

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応
Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分か

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

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

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

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

→もっと見る

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