WebGLライブラリ「jThree」を使ってjQueryの記法で3Dオブジェクトを操作する

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

　本連載では、jQuery+three.jsを実現したWebGLライブラリ「jThree（ジェイスリー）」について、MMDプラグインを利用したコンテンツのコーディング例を紹介します。連載4回目となる今回はJavaScriptコーディング編としてjQueryの記法によって3Dオブジェクトを自在に操作する方法を紹介します。前回までに作成したGOMLファイルをベースに3Dオブジェクトが動くサンプルと共に解説します。jQueryの基礎があれば難しくないので最後までお付き合いください。

はじめに

　数あるHTML5の機能の中でも特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今一つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。three.jsの登場により大分実装のハードルが下がったものの、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。

　今回紹介する「jThree（ジェイスリー）」はそんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら手軽にWebGLコンテンツを作ることができます。

　本記事ではこのjThreeについて、jQueryの記法で3Dオブジェクトを操作する方法を紹介します。前回作ったサンプルを使って実際に青空のオブジェクトを動かすところまで行います。

対象読者

• HTML、CSS、jQueryの基礎を理解している方
• 3DCG・WebGLコンテンツを手軽に作ってみたい方
• MMDモデルを自分のサイト上で3Dのまま躍らせてみたい方

jThreeがサポートする環境

　jThreeを利用するには、jQueryの2.0.0または1.10.0以降の読み込みが必須です。

　OSはWindows 7でのみテストしましたが、ブラウザの要件を満たしているとOS XやLinux、Androidでも動作するようです。ブラウザは動作テストを行ったもののみ以下に記述しますが、それ以外にもSleipnirやAndroid 4.4標準ブラウザでも動作する可能性があります。

• Internet Explorer：11.0.7以上
• Google Chrome：最新版
• Firefox：最新版
• Opera：最新版

　なお、後述するサンプルはWindows 7（64bit）、Google Chrome最新版で動作確認しています。

GOMLのDOM構築待機

　jThreeでjQuery由来の機能を正確に機能させるには、GOMLのDOM構築待機が必要になります。jQueryの場合はWebページ上にHTMLの要素ツリー構築が完了することを待ちますが、jThreeの場合は「HTMLのDOM構築完了」→「GOMLファイル読み込み・DOM構築完了」→「3Dオブジェクト変換とCanvasタグ（WebGL）生成完了」までをDOM構築完了とし、その間DOMの操作を待機する必要があります。

　jQueryは$に関数を渡すだけでDOM構築待機ができますが、jThreeではgomlメソッドにGOMLファイルのURLと関数を一緒に渡す必要があります。

jThreeのDOM構築待機サンプル

jThree.goml( "index.goml", function( j3 ) {
    //第1引数でグローバルオブジェクト「jThree」受け取れるので短い変数名に置き換えると楽です。
} );

　GOMLファイル内に記述された外部リソース（画像やモデルデータなど）の読み込み完了は、onLoad属性でそれぞれ捕捉する必要があります。

例

<txr src="sumple.png" onLoad=" alert( '画像読み込み完了！' ); " />