MMDのモデルとモーションデータを読み込む
jThree.MMD.jsを読み込むとMMDのモデルデータ（PMX形式）とモーションデータ（VMD形式）をWebGLで利用できるようになります。
MMD（MikuMikuDance）とは樋口優氏が個人で作成したフリーの3DCGムービー制作ツールです。
無償ながら初心者でも扱いやすく低スペックなPCでも動作するほど軽快なため、個人ユーザーを中心に絶大な支持を得ているソフトです。VPVPでダウンロードできます。
MMDのデータをjThreeで扱うにはjThree本体→物理エンジンライブラリammo.js→jThree.MMD.jsの順でスクリプトファイルを読み込む必要があります。GOMLファイル内で「model」「motion」「mmd」要素が有効になり、「mmd」「camera」「light」要素にmotion属性を指定できるようになります。
model要素
head要素内でのみ有効なモデルデータを保持する要素です。src属性でファイルのURLを指定します。現時点ではPMX形式のファイルにのみ対応しています。
<model src="model/miku.pmx" />
motion要素
head要素内でのみ有効なモーションデータを保持する要素です。src属性でファイルのURLを指定します。現時点ではVMD形式のファイルにのみ対応しています。モデル用VMDファイルの他、カメラ・ライト用VMDファイルも読み込めます。
<motion id="model_motion" src="motion/model_motion.vmd" /> <motion id="camera_motion" src="motion/camera_motion.vmd" />
mmd要素
scene要素内でのみ有効なMMDモデルを表示するための3Dオブジェクト要素です。model属性に表示したいmodel要素のCSSセレクタを指定します。同時にmotion属性にモデル用VMDファイルを保持したmotion要素のCSSセレクタを指定するとモデルにモーションが適用されます。
<mmd model="model" motion="#model_motion" />
motion属性
mmd要素だけでなくcameraとlight要素にもmotion属性でモーションを適用することができます。カメラ・ライト用VMDファイルのデータを保持したmotion要素のCSSセレクタを指定します。
<camera motion="#camera_motion" />
実際にモデルやカメラを動かす方法は次の章で解説します。まずは前回までのサンプルファイルに追記して画面上にモデルを表示させてみましょう。あらかじめプラグインのファイル（ammo.js、jThree.MMD.js）とモデルデータとモーションデータのファイルをサーバーにアップしておく必要があります。
<!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;
}
</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タグが自動生成されます -->
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<goml>
<head>
<txr id="blueSky" src="img/sky.png" />
<!--canvasコンテキスト（変数a）を操作するdrawFloor関数はJSファイルで定義します-->
<txr type="canvas" id="floorTxr" param="width: 32; height: 32; repeat: 10; wrap: 0;" draw="drawFloor( a );" />
<gmt type="Sphere" id="skyGmt" param="450 32 16" />
<gmt type="Plane" id="floorGmt" param="60 60" />
<!--箱庭（スカイドーム）は内側（裏面）から見るためsideプロパティを1に設定します-->
<mtr type="MeshPhong" id="skyMtr" param="side:1;ambient: #fff; map:#blueSky;"/>
<!--床は両面描画するためsideプロパティを2に設定します-->
<mtr type="MeshPhong" id="floorMtr" param="side:2; map: #floorTxr;" />
<!--HTMLのbody要素をフレームにするのでframe属性を省略します-->
<rdr param="antialias: true;" />
<!--MMDのモデルデータを取得します-->
<model src="model/miku.pmx" />
<!--MMDのモーションデータを取得します-->
<motion id="model_motion" src="motion/model_motion.vmd" />
<motion id="camera_motion" src="motion/camera_motion.vmd" />
</head>
<body>
<scene>
<!--スカイドームを設置-->
<mesh gmt="#skyGmt" mtr="#skyMtr" />
<!--床を設置-->
<mesh gmt="#floorGmt" mtr="#floorMtr" style="rotate:1.57 0 -0.785;"/>
<!--環境光を設置-->
<light type="Amb" />
<!--太陽光を画面左上手前に設置-->
<light type="Dir" style="light-color: #9f9f9f; position: -14 28 24.5;" />
<!--カメラを画面手前上部に設置してMMDのモーションを適用-->
<camera motion="#camera_motion" style="position: 0 10 30; lookAtY: 10;" />
<!--MMDのモデルを表示-->
<mmd model="model" motion="#model_motion" />
</scene>
</body>
</goml>
