SHOEISHA iD

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

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

JavaScriptとWebGLによるはじめての3Dプログラミング

「three.js」でつくるお手軽3Dマンガ作成ソフト - 後編

JavaScriptとWebGLによるはじめての3Dプログラミング(3)

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード sample.zip (335.2 KB)

グループ内の部品を操作対象にする

 グループに格納した3Dオブジェクトは、「children」属性に配列として格納されています。グループ内のこれらのオブジェクトの「position」などの値を変更すれば、グループ内での位置や回転状態、拡縮状態が変更されます。

 この仕組みを利用することで、グループ全体を操作したり、グループ内の部品を操作したりすることができます。

 以下、箱人形の本体と各部品を、操作対象「d3.tgts」配列に格納する処理を抜き出します。

グループ内の部品を操作対象にする
// 箱人形キャラ
obj = crocro.bc.mkBoxChar();
d3.tgts.push(obj);    // 操作対象に追加
d3.tgts = d3.tgts.concat(obj.children);    // 子要素を操作対象に追加

腕や足の回転方法を変える

 立方体では、マウスを横方向に動かすと横に回転、縦方向に動かすと縦に回転させていました。しかし、腕は肩を基点に動き、足は腰を基点に動きます。これらは立方体のように回転するよりも、マウスに合わせて、棒を振るように動いて欲しいものです。

 サンプルでは、こういった「感覚に適合した動き方」をさせるために、操作対象によって回転操作を変更しています。この処理は、回転処理の関数を、操作対象によって差し替えることで実現しています。以下、その部分のコードを示します。

腕や足の回転方法を変える1
// 回転操作の変更
if (d3.rttTyp[tgtNo] == 0) {
    crocro.bc.changeRtt = crocro.bc.changeRttBasic;
} else {
    crocro.bc.changeRtt = crocro.bc.changeRttPole;
}
腕や足の回転方法を変える2
//== 基本の回転操作
crocro.bc.changeRttBasic = function(tgt, difX, difY) {
    tgt.rotation.y += difX / 100;
    tgt.rotation.x += difY / 100;
}

//== 棒状の物体の回転操作
crocro.bc.changeRttPole = function(tgt, difX, difY) {
    tgt.rotation.z += difX / 100;
    tgt.rotation.x += difY / 100;
}

おわりに

 今回の連載は以上で終了です。「three.js」を使えば、ブラウザで簡単に3Dプログラミングをできます。「3Dは敷居が高い」「開発環境の構築が面倒」という人も、ブラウザとテキストエディタさえあれば、手軽に3Dプログラミングを始めることができます。ぜひ「three.js」で、簡単3Dプログラミングにチャレンジしてみてください。

 実際に私も「three.js」を使い、「箱人形マンガ(Box Comic)」を作成しました。「three.js」を使うことによって、少ないコードで、こういったアプリを作ることが可能です。「箱人形マンガ(Box Comic)」は、ソースコードをすべて公開していますので、参考にしてみてください。

 また「箱人形マンガ(Box Comic)」を使い、少し複雑なコマを作成したものも掲載します。「three.js」を使えば、少ないコードで、このような表示を作成できます。

「箱人形マンガ(Box Comic)」作例1
「箱人形マンガ(Box Comic)」作例2
「箱人形マンガ(Box Comic)」作例3

参考資料

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
JavaScriptとWebGLによるはじめての3Dプログラミング連載記事一覧

もっと読む

この記事の著者

柳井 政和(ヤナイ マサカズ)

クロノス・クラウン合同会社 代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています(『裏切りのプログラム』他)。面白いことなら何でもOKのさすらいの企画屋です。 

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7210 2013/06/25 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング