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

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

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

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

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

JavaScript
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 の内部では、移動と回転を行う処理を実行すると以下のような流れで処理が行われています。

  1. Object3D に属するオブジェクトを世界に ひとつだけ 配置する
  2. 原点を中心に世界全体を回転させる(常に回転が先)
  3. オブジェクトを移動させる(回転したあと移動)
  4. 次のオブジェクトを世界に ひとつだけ 配置する
  5. 原点を中心に世界全体を回転させる……(以下繰り返し)

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

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

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

  1. オブジェクトを動かす
  2. グループを作り、そこに移動させたオブジェクトを食わせる。
  3. グループを回転させる。

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

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

回転という処理の原則

  • 回転とは、世界全体を回転させること
  • つまり言い換えると 回転は常に世界の中心(原点)で行われる
  • 移動してから回転するのと、回転してから移動するのは意味がまったく違う
  • 3D では一般に、回転を先に行うことが多い
  • three.js でも、やはり回転が先に処理される

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Translate »