オーディオタグとMMDアニメーションを連携させる
いよいよMMDモデルとカメラをアニメーションさせる方法を紹介します。音源に合わせてモデルを躍らせるケースが大半なのでオーディオタグとの連携を軸に解説します。
今回のサンプルではボーカロイド楽曲で有名な「メルト」のMP3ファイルを使用します。サンプルzipには同梱しておりませんのであらかじめ『初音ミク が オリジナル曲を歌ってくれたよ「メルト」』のページ上部説明文中の「mp3とか→」URLにアクセスしてダウンロードし、audioディレクトリ内に「melt.mp3」というファイル名でアップしてください。
それでは画面上にHTMLのaudio要素を設置します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jThreeサンプル</title>
<style>
body {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
audio {
width: 300px;
position: fixed;
bottom: 20px;
left: 50%;
margin-left: -150px;
}
</style>
<!-- jThreeの前に必ずjQueryを読み込んでください -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="script/jThree.js"></script>
<!--MMDを利用する場合はammo.jsの読み込みを必ず行ってください-->
<script src="script/ammo.js"></script>
<script src="script/jThree.MMD.js"></script>
<script src="script/jThree.Trackball.js"></script>
<script src="index.js"></script>
</head>
<body>
<!-- ココにcanvasタグが自動生成されます -->
<audio src="audio/melt.mp3" controls></audio>
</body>
</html>
MMD関連のアニメーションは、
jThree.MMD.play(); jThree.MMD.pause(); jThree.MMD.seek( time );
で一括管理できます。要素ごとの個別管理も可能ですが今回は解説しません。
function drawFloor( ctx ) {
var base = "#fff",
color = "#2ff";
//ctx = canvas2D context
ctx.fillStyle = base;
ctx.fillRect(0, 0, 32, 32);
ctx.fillStyle = color;
ctx.fillRect(0, 0, 16, 16);
ctx.fillStyle = base;
ctx.fillRect(8, 8, 8, 8);
ctx.fillStyle = color;
ctx.fillRect(16, 16, 16, 16);
ctx.fillStyle = base;
ctx.fillRect(24, 24, 8, 8);
}
jThree.goml( "index.goml", function( j3 ) {
j3.Trackball();
( function() {
j3( "mesh:first" ).animate( { rotateY: "-=3.14" }, 60000, "easeInOutCubic", arguments.callee );
} )();
var audio = $( "audio" );
audio.on( "play", jThree.MMD.play );
audio.on( "ended pause", jThree.MMD.pause );
audio.on( "seeked", function() {
jThree.MMD.seek( this.currentTime );//単位は秒です
} );
} );
ここまでできたらindex.htmlにアクセスしてみましょう。モデルが描画されていることを確認してからオーディオを再生してシークも試してみてください。実際の運用ではモデルの描画が完了した後でオーディオ要素を表示するようにすべきです。
jThreeのDOM構築待機関数はモデルやモーションの読み込み・描画完了を補足しておらず必ず先に呼ばれてしまいます。代わりに「model」「motion」「mmd」要素に必要なだけonLoad属性を指定して独自に読み込み完了処理を施してください。mmd要素のonLoad属性はmodelとmotionの両方（model属性のみ指定の場合はmodelのみ）が読み込まれ、描画が完了した時点で呼び出されます。
まとめ
今回まででjThreeの基礎は一通り終わりました。サンプルのファイルコーディング量はHTMLファイルからコメントまですべて合わせて3.66KBです。このように非常に少ない記述量でクオリティの高いWebGLコンテンツを作れるのがjThreeの魅力です。次の最終回ではjThreeプレイヤーの使い方を紹介します。
MMDデータのオーディオ要素連携から今回紹介したプラグインほぼすべての機能までほとんどコーディングなしで利用できるようになります。
