http://jthree.jp/
なんだこれすごすぎる。
JavaScriptだけでこんなことができるとか全く意味がわかりません。
とりあえず動かしてみることにします。
公式サイトからjThreeをダウンロード。
バージョンはv1.5.1でした。
適当なところに展開する。
デモ一式が入っているので、後は音源のMP3を配置するだけで動作します。
http://www.nicovideo.jp/watch/sm1715919
からMP3をダウンロードし、MP3をdata/audio/melt.mp3に配置します。
とreadmeではなってますが別に適当なMP3でも問題ないようです。
あとはindex.htmlを開くだけでメルトを歌うミクさんが。
http://nurseangel.sakura.ne.jp/js/jthree/
※MP3は著作権の関係上適当なものに差し替えています。
あっさりできました。
どうなってんだこれ。
さっぱりわからないので中身を見ていくことにします。
以下は上記のソースを見ながら見てください。
<html>
<head>
<style>
#player {
position: fixed;
width: 100%; height: 100%;
top: 0; left: 0; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="player">
<a id="jThree-player" href="http://jthree.jp/">jThreeデモ</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="plugin/jThree.Player.min.js"></script>
<script src="index.js"></script>
</div>
</body>
</html>
プレイヤーの大きさを指定し、必要なライブラリとindex.jsを読み込んでいるだけです。
公式のサンプルはbodyタグに直接出力しているので、適当にdivで括っておいたほうが使い勝手がいいでしょう。
$( function() {
jThree.Player.setScript( {
jQuery: "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js",
jThree: "script/jThree.min.js",
ammo: "plugin/ammo.js",
MMD: "plugin/jThree.MMD.js",
other: [ "//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" ]
} );
jThree.Player( {
img: "data/img/test.jpg",
goml: "index.goml",
audio: {
"audio/mp3": "data/audio/melt.mp3",
"audio/ogg": "data/audio/melt.ogg"
},
credits: [
{type: "楽曲",url: "http://supercell.sc/melt/",name: "supercell"},
{type: "モデリングソフト",url: "http://www.geocities.jp/higuchuu4/",name: "樋口優"},
{type: "モデルデータ仕様",url: "http://kkhk22.seesaa.net/",name: "極北P"},
{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: "(メ＿メ)"}
],
onLoad: function() {
jThree( "mesh:first" ).animate( { rotateY: "-=1.57" }, 30000, "linear", arguments.callee );
}
} );
} );
jThree.Player.setScript()で必要なライブラリを指定します。
jQuery自体はindex.htmlでも読み込んでいるのだけど、何故かこちらでも記載が必要みたいです。
jquery.easingは動作エフェクトを追加するjQueryプラグインのようです。
jThree.Player()でMP3やMMD、クレジット等を指定。
このあたりは規定通りに指定するだけで、あとはjThreeがよしなに計らってくれます。
『MMDプラグインの貢献者katwat氏に特別な感謝を。』はjThree.Playerに最初から埋め込まれてるみたい。
onLoadは#domeGeoの傾きを指定しているみたいですが、あってもなくても動きが変わらないっぽいんだけどなんだろう。
<?xml version="1.0" encoding="UTF-8"?>
<goml>
<head>
<model id="mikuPmx" src="data/pmx/miku.pmx" />
<motion id="mainVmd" src="data/vmd/model.vmd" />
<motion id="camVmd" src="data/vmd/camera.vmd" />
<txr id="blueSky" src="data/img/sky.png" />
<txr type="canvas" id="floorTxr" param="width: 32; height: 32; repeat: 10; wrap: 0;" draw="misc.drawFloor(a, '#fff', '#2ff')" />
<gmt type="Plane" id="floorGmt" param="60 60 15 15" />
<gmt type="Sphere" id="domeGeo" param="450 32 16" />
<mtr type="MeshPhong" id="skyMat" param="side:1;ambient: #fff; map:#blueSky;"/>
<mtr type="MeshPhong" id="floorMtr" param="side:2; map: #floorTxr;" />
<rdr param="antialias: true;"/>
</head>
<body>
<scene>
<mesh gmt="#domeGeo" mtr="#skyMat" />
<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;" />
<camera motion="#camVmd" style="position: 0 10 30; lookAt:0 10 0;" />
<mmd model="#mikuPmx" motion="#mainVmd" />
</scene>
</body>
</goml>
MMDのモデルやモーションを設定するXMLみたい。
MMD方面の知識が全くないので、いったい何が書かれているのか全くわかりません。
gomlのリファレンスみたいなものはないのだろうか。
ここまでが自分で記載する必要がある部分。
以下はjThreeとライブラリです。
script/jThree.js
jThreeの本体。
もちろん中に何が書かれているのか全く理解できません。
plugin/jThree.Player.js
呼び出すだけでYoutubeっぽいインターフェイスが自動的に追加されるというjThreeのプラグイン。
なんだこりゃ凄すぎる。
あと、こちらの解説記事ではファイルが分かれているjThree.Trackball.jsやjThree.Oculus.jsあたりは統合されたようで、一緒に中に入っていました。
plugin/jThree.MMD.js
MMDファイルを読み込んで、JavaScriptから扱えるようにする機能みたい。
なんでこんなものが作れるんだ。
plugin/ammo.js
物理演算エンジンです。
有名な物理エンジンBulletを移植したもので、物理演算が簡単に行えるのだそうです。
後はこれらを適当に組み合わせて呼び出すだけで、いとも簡単にミクさんが踊ってくれます。
…あかん、中を見ても全然わからん。
何をどうすればいいのかさっぱりだ。