はじめに
数あるHTML5の機能の中でも、特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今一つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。
three.jsの登場により、実装のハードルはだいぶ下がりました。しかし、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。
今回紹介する「jThree（ジェイスリー）」は、そんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら、手軽にWebGLコンテンツを作ることができます。
本記事ではこのjThreeについて、MMDプラグインを含めた機能の紹介とjQuery記法で操作するためのちょっと独特なコーディング手順を説明します。
そのあと、Canvasを自動生成しマウスで動かせる立方体を描画してみます。
対象読者
- HTML、CSS、jQueryの基礎を理解している方
- 3DCG・WebGLコンテンツを手軽に作ってみたい方
- MMDモデルを自分のサイト上で3Dのまま躍らせてみたい方
jThreeが提供する機能
jQueryとjThreeをWebページに読み込むことで、WebGLの手軽な操作が可能です。また、プラグインを使うと、最近話題のデバイス「Oculus Rift（オキュラス リフト）」にも簡単に対応するようにもなります。
1）jThree本体が提供する機能
- WebGL（three.js）をjQueryの記法で操作できるようになります。
- コードの記述量がthree.jsに比べて4分の1程度に削減されます。
- カメラのアスペクト比の計算や、ウィンドウリサイズへの対応が不要になります。
- オブジェクトのクリックやスクロールイベントを、jQueryと同様に取得できるようになります。
- もちろん、three.jsの機能にもアクセスできます。
2）jThreeの公式プラグイン群が提供する機能
-
jThree.MMD.js（＋ammo.js）
MMD（MikuMikuDance）のモデルデータを表示し、モーションデータを再生できるようになります。
-
jThree.Oculus.js
作ったコンテンツをヘッドマウントディスプレイ「Oculus」に対応させられます。
-
jThree.FlyView.js
空間を鳥のように飛び回るカメラコントロールを実現します。
-
jThree.Trackball.js
対象物を鑑賞するのに適したカメラコントロールを実現します。
-
jThree.Stats.js
フレームレートのメーターを表示できます。
jThreeがサポートする環境
jThreeを利用するには、jQueryの2.0.0または1.10.0以降の読み込みが必須です。
OSはWindows 7でのみでテストしましたが、ブラウザの要件を満たしているとMAC OS XやLinux、Androidでも動作するようです。
ブラウザは動作テストを行ったもののみ以下に記述しますが、それ以外にもSleipnirやAndroid 4.4標準ブラウザでも動作する可能性があります。
- Internet Explorer：11.0.7以上
- Google Chrome：最新版（執筆時点、以下同）
- Firefox：最新版
- Opera：最新版
なお、後述するサンプルはWindows 7（64bit）、Google Chrome最新版で動作確認しています。
jThreeのライセンス体系
jThreeと公式プラグイン群はすべてMITライセンスで公開されており、商用利用・配布・改変何でも自由です。いわゆるオープンソースソフトウェアであり何をするのも無料です。
ソースコード内の著作権表記の取り扱いについては、MITライセンスの規約に従ってください。
jThree開発の環境を整えよう
jThree開発を行うには、WebGLのセキュリティ上、オンラインサーバーかローカルサーバーが必要になります。
開発途中でファイルを更新するたびにオンラインサーバーにアップロードして動作確認するのは大変なので、ローカルサーバーを立てるか、Dropboxのパブリックフォルダを利用するのがお勧めです。
ローカルサーバーを立てる場合
XAMPPを導入するのが良いでしょう。
上記のサイトに導入方法の詳細が丁寧に紹介されています。筆者も利用しています。
Dropboxのパブリックフォルダを利用する場合
パブリックフォルダの詳細は、以下をご覧ください。
XAMPPより導入設定が楽だと思います。ただし、URLを知らないとアクセスできないものの、開発中の作品がネット上に公開される点に注意が必要です。
