SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

イベントを設定する

 現時点でイベントはjThree本体の機能で生成された3Dオブジェクト要素にのみ設定できます(次回解説するMMDプラグインで生成したモデルなどは未対応です)。

 設定の仕方はもちろんjQueryと同じで「click dblclick contextmenu mousedown mouseup mousewheel」の各イベントに対応しています。

jThreeオブジェクトをthree.jsオブジェクトに変換する

 GOMLのほとんどの要素には対応するthree.js(WebGLライブラリ)オブジェクトが存在します。jThreeにない機能でもthree.jsオブジェクトを取り出して操作することでWebGLで実現できることが大きく増えます。jThreeを読み込むとthree.jsのグローバルオブジェクト「THREE」も有効になるのでthree.js向けに公開されているプラグインを使うこともできます。

 jThreeオブジェクトをthree.jsオブジェクトに変換するにはthreeメソッドを使います。引数が空だとthree.jsオブジェクトが配列で、数字を渡すとそのインデックスのthree.jsオブジェクトが返ってきます。この動作はjQueryのgetメソッドを模しています。

var mesh = jThree( "mesh" ).three( 0 ); //変数meshにはTHREE.Meshのインスタンスが代入されます

実際に3Dオブジェクトを動かす

 前回までに作成したサンプルを使って3Dオブジェクトを簡単に操作してみます。青空(スカイドーム)をゆっくりと回転させ続けるアニメーションを実装します。

index.jsサンプル
function drawFloor( ctx ) {
    省略
}
jThree.goml( "index.goml", function( j3 ) {
    j3.Trackball();//jThree.Trackball.jsを読み込むとこれだけでカメラコントロールが有効になります。
    ( function() {
        j3( "mesh:first" ).animate( { rotateY: "-=3.14" }, 60000, "linear", arguments.callee );
    } )();
} );

 上記のサンプルでは青空(mesh要素の1個目)を縦軸(Y軸)中心に60秒ごとに3.14ラジアン(約180°)だけ時計回りに回転させています。easingオプションに"linear"が指定されているので一定の速度で回り続けます。

 せっかくなのでjQueryのeasingプラグインを使ってみましょう。index.htmlのjQueryを読み込むスクリプトタグの次に以下のタグを設置しておきます。

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

 easingオプションを" easeInOutCubic"に変えてブラウザに表示してみましょう。5秒ほど待つと緩急を付けながら動き始めるようになったはずです。

まとめ

 今回はjThreeがjQueryの記法によって3Dオブジェクトを自在に操作できることを確認しました。jQueryを使い慣れた人にとっては新たに覚えることがそう多くはなかったはずです。次回はWebGLの世界をさらに拡げるjThreeプラグインを紹介します。MMD(MikuMikuDance)のモデルを表示する方法も解説して実際に躍らせるサンプルも作ります。

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
jQueryの記法でWebGLを操作できるライブラリ「jThree」の活用連載記事一覧

もっと読む

この記事の著者

松田 光秀(jThree合同会社)(マツダ ミツヒデ)

jQueryの記法で操作できるWebGLライブラリ「jThree」の開発者でjThree合同会社の代表。JavaScriptのスキルのみで平成26年2月に1人で起業する。平成元年生まれの24歳で現役高校生(平成26年5月時点)。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/7825 2014/06/23 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー