前回までに作成したコンテンツファイルを利用しながらコーディング方法を解説します。jThreeプレーヤーを使うとより少ない記述で機能豊富な3DCGコンテンツを作ることができるようになります。
はじめに
数あるHTML5の機能の中でも特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今一つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。three.jsの登場により大分実装のハードルが下がったものの、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。
今回紹介する「jThree（ジェイスリー）」はそんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら手軽にWebGLコンテンツを作ることができます。
本記事ではこのjThreeについて、主要なプラグインの機能とオーディオコントロールをコンパクトにまとめたjThreeプレーヤープラグインの使い方を紹介します。前回までに作ったサンプルと同じ構成のコンテンツをより手軽にコーディングできるようになります。
対象読者
- HTML、CSS、jQueryの基礎を理解している方
- 3DCG・WebGLコンテンツを手軽に作ってみたい方
- MMDモデルを自分のサイト上で3Dのまま躍らせてみたい方
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プレーヤーとはjThreeで作ったWebGLコンテンツにFlash PlayerのようなUIを提供するプラグインです。全画面表示やOculus Riftモード、カメラコントロール、オーディオ連携などの機能をわずかなコーディングで利用することができます。
jThreeプレーヤーは動的に生成した空のiframeのなかにWebGLやコントローラーを配置しています。なので1ページに複数のコンテンツを配置しても干渉し合うことがありません。今回は音楽に合わせてMMDのモデルを躍らせる場合のコーディング方法を解説していきます。
