グループ内の部品を操作対象にする
グループに格納した3Dオブジェクトは、「children」属性に配列として格納されています。グループ内のこれらのオブジェクトの「position」などの値を変更すれば、グループ内での位置や回転状態、拡縮状態が変更されます。
この仕組みを利用することで、グループ全体を操作したり、グループ内の部品を操作したりすることができます。
以下、箱人形の本体と各部品を、操作対象「d3.tgts」配列に格納する処理を抜き出します。
// 箱人形キャラ obj = crocro.bc.mkBoxChar(); d3.tgts.push(obj); // 操作対象に追加 d3.tgts = d3.tgts.concat(obj.children); // 子要素を操作対象に追加
腕や足の回転方法を変える
立方体では、マウスを横方向に動かすと横に回転、縦方向に動かすと縦に回転させていました。しかし、腕は肩を基点に動き、足は腰を基点に動きます。これらは立方体のように回転するよりも、マウスに合わせて、棒を振るように動いて欲しいものです。
サンプルでは、こういった「感覚に適合した動き方」をさせるために、操作対象によって回転操作を変更しています。この処理は、回転処理の関数を、操作対象によって差し替えることで実現しています。以下、その部分のコードを示します。
// 回転操作の変更 if (d3.rttTyp[tgtNo] == 0) { crocro.bc.changeRtt = crocro.bc.changeRttBasic; } else { crocro.bc.changeRtt = crocro.bc.changeRttPole; }
//== 基本の回転操作 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」を使えば、少ないコードで、このような表示を作成できます。