jThreeプレーヤープラグインの使い方

jQueryの記法でWebGLを操作できるライブラリ「jThree」の活用　第6回

共通で使うスクリプトを設定する

　1ページ上にいくつも生成できるjThreeプレーヤーはすべて独立したiframe内で動作します。当然スクリプトもプレーヤーごとに動作しますが、共通して使うライブラリやプラグインは1回設定するだけで済みます。

　jThree.PlayerのsetScriptメソッドにスクリプト名とURLを連想配列で渡します。jQueryとjThreeが必須項目でMMDを使う場合はammoとMMDをさらに設定します。それ以外にプラグインなどを使う場合はotherに配列でURLを渡すと順番に読み込まれます。

コーディング例：

jThree.Player.setScript( {
    jQuery: "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js",
    jThree: "script/jThree.min.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プレーヤーを生成する

　共通のスクリプトを設定したらjThree.Playerメソッドを呼び出してプレーヤーを生成します。1回呼ぶごとに1つのプレーヤーがページ上に現れます。以下でjThree.Playerメソッドの引数に渡すパラメータを解説します。

id：プレーヤーを生成する場所を指定する

　まずHTMLファイルのプレーヤーを生成したい位置にid属性を指定したa要素を配置します。このa要素のテキスト部分がプレーヤーでタイトルとして表示されます。

<a id="jThree-player">ここにタイトルを記述</a>

　パラメータに指定したidを持つa要素がプレーヤーのiframeと置き換わります。プレーヤーのサイズはこのa要素の親要素と同じサイズになります。

jThree.Player( {
    id: "jThree-player",
    ・・・
} );

　デフォルト値が上記と同じに設定されているのでa要素のidが"jThree-player"の場合、idの指定を省略できます。

goml：GOMLファイルを指定する

　WebGLコンテンツの内容はGOMLファイルに記述します。

　パラメータにGOMLファイルの絶対URLか、HTMLファイルから見た相対URLを指定します。

jThree.Player( {
    goml: "index.goml",
    ・・・
} );

　デフォルト値が上記と同じに設定されているのでGOMLファイルの相対位置とファイル名が同じ場合、gomlの指定を省略できます。

img：サムネイル画像を指定する

　ページが表示されてから再生ボタンを押されるまでプレーヤーはWebGLコンテンツを描画しません。よってそれまでの間コンテンツの内容を表すサムネイル画像が必要です。

　プレーヤーに対して横幅100%、高さ自動で表示されることを考慮して画像サイズを調整してください。

　パラメータにサムネイル画像の絶対URLかHTMLファイルから見た相対URLを指定します。

jThree.Player( {
    img: "img/thumbnail.jpg",
    ・・・
} );

　デフォルト値はありません。

audio：音源を指定する

　パラメータに音源を指定するとプレーヤーにオーディオコントロールが表示されます。MMDコンテンツを作る場合にモーションとの同期も自動で行われます。

　1つのプレーヤーに付き設定できるのは1曲だけですが各ブラウザに対応するために複数のコーデックを用意することができます。

　ユーザーの環境で再生できるコーデックをプレーヤーが自動判別します。

jThree.Player( {
    audio: {
"audio/mp3": "audio/melt.mp3",
"audio/ogg": "audio/melt.ogg"
    },
    ・・・
} );

onLoad：読み込み完了時に呼び出す関数を指定する

　iframe内のHTML・GOMLともにDOMの構築が完了し、テクスチャ画像やモデルなど読み込みが必要なデータもすべて揃った時点で呼び出される関数を指定できます。

　toStringメソッドでテキスト化した後にiframe内で関数に戻すため、クロージャなどは使えません。

jThree.Player( { 
    onLoad: function() {
        jThree( "mesh:first" ).animate( { rotateY: "-=1.57" }, 30000, "easeInOutCubic", arguments.callee );
    },
    ・・・
} );

credits：クレジット（著作者表示）を指定する

　音源やMMDデータなどのクレジットをプレーヤーに表記することができます。

jThree.Player( { 
    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: "(メ＿メ)"
        }
    ],
    ・・・
} );

　type、url、nameは自由に設定できます。