はじめに
数あるHTML5の機能の中でも特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今1つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。
three.jsの登場により、実装のハードルはだいぶ下がりました。しかし、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。
今回紹介する「jThree（ジェイスリー）」は、そんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら手軽にWebGLコンテンツを作ることができます。
本記事では、jThreeで最も重要な仕様であるGOMLのうち、head要素について紹介します。前回作ったサンプルと合わせて、実際にブラウザ上に描画するところまで行います。
対象読者
- 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最新版で動作確認しています。
head要素の役割
前回紹介したbody要素は、HTMLのbody要素と共通する部分が多くありましたが、head要素は少々性質が違います。
head要素には3Dオブジェクト以外のものすべてを記述するのですが、3Dオブジェクトを構成する形状・材質などの素材データが主になります。
HTMLのように、メタタグや外部ファイル読み込み機能はありません。それぞれのオブジェクトがどんな見た目で描画されるのかを管理するのがheadタグです。
形状を表すgmt要素の記述
gmt要素は、平面・球体・立方体などの形状データを保持します。type属性によって形状の種類を指定し、param属性でディティールを設定します。複数の3Dオブジェクト要素からgmt属性で参照できます。
以下で、主要な形状を紹介します。
|
type 属性の値 |
形状 | param属性の値 | param属性のデフォルト値 |
|---|---|---|---|
| Plane | 長方形 | 幅 高さ 横分割数 縦分割数 | null null 1 1 |
| Circle | 円 | 半径 分割数 開始角度 中心角 | 50 8 0 約6.14(360°) |
| Cube | 直方体 | 幅 高さ 奥行 横分割数 縦分割数 奥行分割数 | null null null 1 1 1 |
| Sphere | 球体 | 半径 経度分割数 緯度分割数 | 50 8 6 |
| Cylinder | 円錐台 |
上底の半径 下底の半径 高さ 円周分割数 縦分割 底抜き （パイプ状）にするかどうか |
20 20 100 8 1 false |
<gmt type=”Cube” param=”2 2 2” />
