目次Three.jsの3Dオブジェクトはまとめて管理できる機能があります。いわゆる「入れ子構造」として作ることも可能です。入れ子構造として設計することで、複数の3Dオブジェクトをまとめて移動させたり、回転させたりするのが便利になるでしょう。入れ子構造を作るにはTHREE.Object3DもしくはTHREE.Groupクラスのadd()メソッドを利用して追加します。逆に入れ子構造から削除したい場合は、remove()メソッドを使います。DOMやFlashの表示リストでは親子構造を持った場合、子は親のレイヤー順に依存して表示順が決められていました。3Dでの親子構造は座標の管理だけであり、表示のレイヤー順に関しては影響はありません。表示の影響はあくまでもカメラから見たZ深度の順番となります。3Dの親子構造を試すデモ3Dの親子構造を理解するために、次のサンプルを試してみてください。10個の平面を円周上に配置し、それらが原点を中心に時計回りとして移動するものです。サンプルを再生するサンプルのソースコードを確認するまずは親となるgroupインスタンスを作成します。この時点ではgroupインスタンスの中身は空っぽです。3D空間にグループを追加するscene.add(group);次にこのデモではfor文を使用して、10個の球体を作成しています。円周上に並んで配置されるように角度を求め、その角度に応じた位置へ配置しています。球体は入れ子構造として配置したいのでgroupインスタンスにadd()メソッドを使用して追加しています。group.add(mesh);}時間経過では親となるgroupインスタンスを回転させることで、子として配置した10個の球体が円周上を移動します。requestAnimationFrame(tick);}まとめ入れ子構造は3Dの管理が楽になります。グループに入れてしまうとローカル座標とワールド座標をわけて考える場面がでてきます。詳しくはワールド座標を参照ください。令和元年6月11日現在最新のリビジョン105を元に執筆しています。作例をみてThree.jsで実現可能な表現のインスピレーションを得ましょう。(英語)Three.jsの情報源わからないことがあれば、フォーラムや勉強会を調べてみましょう。