実際にjThreeプレーヤーを使ってみる
前回までに作ったサンプルと同じ構成のコンテンツをjThreeプレーヤー上で動かしてみましょう。
今回もボーカロイド楽曲で有名な「メルト」の音源ファイルを使用します。サンプルzipには同梱しておりませんのであらかじめ『初音ミク が オリジナル曲を歌ってくれたよ「メルト」』のページ上部説明文中の「mp3とか→」URLにアクセスしてダウンロードし、audioディレクトリ内に「melt.mp3」というファイル名でアップしてください。
また、オンラインオーディオコンバーターでmp3データをoggに変換することができます。
index.htmlサンプル：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jThree - demo</title>
<style>
body {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<a id="jThree-player" href="http://jthree.jp/">メルト</a>
<!--プレーヤーの前にjQueryを読み込んでください。-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="script/jThree.Player.js"></script>
<script src="index.js"></script>
</body>
</html>
index.gomlサンプル：
<?xml version="1.0" encoding="UTF-8"?>
<goml>
<head>
<txr id="blueSky" src="img/sky.png" />
<!--misc.drawFloor関数はプレーヤーが定義しているものですがバージョンアップでなくなる予定です。2つ目の引数に床の基本色、3つ目の引数に模様の色を指定します。-->
<txr type="canvas" id="floorTxr" param="width: 32; height: 32; repeat: 10; wrap: 0;" draw="misc.drawFloor(a, '#fff', '#2ff');" />
<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>
index.jsサンプル：
jThree.Player.setScript( {
jQuery: "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js",
jThree: "script/jThree.js",
ammo: "script/ammo.js",
MMD: "script/jThree.MMD.js",
other: [ "//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" ]
} );
jThree.Player( {
id: "jThree-player",
goml: "index.goml",
img: "img/thumbnail.jpg",
audio: {
"audio/mp3": "audio/melt.mp3",
"audio/ogg": "audio/melt.ogg"
},
onLoad: function() {
jThree( "mesh:first" ).animate( { rotateY: "-=1.57" }, 30000, "easeInOutCubic", arguments.callee );
},
credits: [
{
type: "楽曲",
url: "http://supercell.sc/melt/",
name: "supercell"
},
{
type: "モデルデザイン",
url: "https://twitter.com/animasasa",
name: "あにまさ"
},
{
type: "モデル・カメラモーション",
url: "http://www.nicovideo.jp/watch/sm22045369",
name: "pokky"
},
{
type: "スカイドームテクスチャ",
url: "http://seiga.nicovideo.jp/user/illust/11592603",
name: "(メ＿メ)"
}
]
} );
ブラウザでindex.htmlにアクセスして、以下の画面になれば成功です。
まとめ
今回はjThreeについて、主要なプラグインの機能とオーディオコントロールをコンパクトにまとめたjThreeプレーヤープラグインの使い方を解説しました。これまでに紹介できなかった機能もたくさんありますが、全6回の連載を通してWebGLコンテンツを手軽に作れるようになったことがお分かりいただけたのではないかと思います。
誰もがWebGLで作る楽しさを享受できる世界になることを目指して、今後もjThreeは進化を続けていきます。
