GOMLファイルを読み込んで画面上に表示する
まずは箱庭（スカイドーム）に貼り付ける青空の画像を、imgディレクトリ内にsky.pngとして設置しておきます。記事に添付されているサンプルファイルにあらかじめ同梱されています。
次に、前回作ったサンプルGOMLファイルのheadタグに要素を記述します。
GOMLファイルのサンプル
<?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;" />
</head>
<body>
<scene>
<!--スカイドームを設置-->
<mesh gmt="#skyGmt" mtr="#skyMtr" />
<!--床を設置-->
<mesh gmt="#floorGmt" mtr="#floorMtr" />
<!--環境光を設置-->
<light type="Amb" />
<!--太陽光を画面左上手前に設置-->
<light type="Dir" style="light-color: #9f9f9f; position: -14 28 24.5;" />
<!--カメラを画面手前上部に設置-->
<camera style="position: 0 10 30; lookAtY: 10;" />
</scene>
</body>
</goml>
HTMLとJSのファイルは、第1回の記事で使用したものを流用します。HTMLはそのまま、JSファイルには床用のtxr要素が参照する関数を追記します。
JSファイルのサンプル
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();//jThree.Trackball.jsを読み込むとこれだけでカメラコントロールが有効になります。
//GOMLの内容を表示するだけならこのコールバック関数は不要です。
//第一引数にjThreeオブジェクトが渡されるので手間を省くためにj3に置き換えてます。
//MMDプラグインと共に使うammo.jsと競合するためグローバル空間では変数名に「j3」を使わないでください。
//今回は解説しませんがjThreeオブジェクトをjQueryのように使ってGOMLファイル内の要素にアクセスできます。
} );
ここまでできたら、index.htmlにアクセスしてみましょう。以下のような画面になるはずです。
これでは床が立っている状態なので、CSSで水平になるよう調整します。床のmeshタグに「style="rotate:1.57 0 -0.785;"」を追記してください。
まとめ
前回と今回で、jThreeで最も重要な仕様であるGOMLについて解説しました。jThreeを実際に使うと、コンテンツ制作作業の大半がマークアップであり、スクリプトが最小限で済むことをご理解いただけたことと思います。
MMDモデルは第5回の記事で解説します。次回はいよいよjQueryの記法で、このGOMLファイルを操作します。
素材提供
- テクスチャ用青空画像：(メ＿メ) 様
