Three.js：回転の起点となる軸を変えたい場合はグループを使おう

こんにちは、タクゾウです。
今回は、three.jsでの回転の概念と、グループ化ついて説明したいと思います。
Three.jsの勉強を始めた人の参考になれれば幸いです。

3Dプログラミングでは、回転が先か、移動が先かが重要になる！

3Dの世界に限らないのですが、回転が先に起こるか、それとも移動が先に起こるか、この違いは非常に重要です。
three.js の場合は、世界全体を回転させる処理を各オブジェクトごとに細切れに実行しています。言い換えると、Object3D クラスのインスタンスのひとつに対して、個別に回転される処理を行なってます。
また、three.js の世界では「常に」回転が先に起こることを頭に入れて記述しましょう。

下記のコード上は「移動」 → 「回転」の順だが、実際は、回転が先に実装される。(これはthree.jsの決まりごとなので変更できません。)

if(isDown === true){
  box.position.set(2.0, 0.0, 2.0);
}else{
  box.position.set(0.0, 0.0, 0.0);
}
box.rotation.y += 0.01;

three.js の内部では、移動と回転を行う処理を実行すると以下のような流れで処理が行われています。

時計のようなものを作る時はどうやって実現するか？

three.js には Group と呼ばれるクラスがあります。
これはグループという名前からもわかるとおりオブジェクトをグループ化してひとつの Object3D のインスタンスとして扱うことができる特殊なクラスです。
これも利用することにより、回転の起点となる軸を操作することができます！

手順はこのようになります

実際にthree.jsでアナログ時計を作った実装を別記事にまとめたので参考にしてください。

Three.js：グループ化を用いて3D空間でアナログ時計を作る。

回転という処理の原則