three.js 親の回転を打ち消すために、子を逆回転させる方法。

Question

いままでオイラー角しか使ってこなかったのですが、「クオータニオン」を用いないと実現できないらしく、質問させてください。

AというグループにBというオブジェクトが存在します。

Aを回転させた際に、Bを元の位置に留めたいのです。

「帳消し」のためには逆回転が必要ですが、親のクォータニオンを打ち消すための”逆のクォータニオン”を取得する方法を教えていただけますでしょうか。

よろしくお願いいたします。

Answer 1

https://threejs.org/docs/#api/en/math/Quaternion.inverse

Quaternion.inverse というメソッドで取ることができますよ。

もし、「Ａが回転すると、回転先にＢが移動してしまう。このＢを移動も回転もせずに留めたい」のであれば、　Matrix.getInverse が必要になるかもしれません。

Comments

[firstbiz]

ありがとうございます。
たびたび聞くのですが「Matrix」とはどういうときに使用するのでしょうか？

[adrs2002]

3D座標は、原理は「頂点をどこに移動させるか」の変形を求める計算になりますが、これら３Ｄの座標の変形は、必ず`位置:Position`と`回転：rotation`、さらに`拡大:Scale`の３つの要素で表現されています。

この3要素は、最終的には「必ず」Matrixにまとめられます。Three.jsでは、matrix.element　で中の数字（ただの16個の配列です）を見ることができますが・・・きっと頭が痛くなるので、見なくていいです。

ともかく、 「Matrix を取れば、位置、回転、拡大が全部まとめて取れる」「Matrix も逆があっさり取得できる」、　っていう風に考えていいんではないでしょうか。

```
var mx_a = A.matrix.getInverse();

B.matrix = mx_a;
B.matrixAutoUpdate = false;

```

こんな感じでやって、AとBの位置関係がどうなるかを見てみてください。

[firstbiz]

なるほど。位置や姿勢、大きさなどのすべての情報が入っているのですね。
詳細はわからなくても、その情報に関連するメソッドを呼ぶことで、さまざまな操作ができるのですね。
よくわかりました。ありがとうございました。

[firstbiz]

matrix.getInverseを使って、子要素の位置や姿勢を変化させることはできました。
ありがとうございました。
しかし子要素のプロパティを確認してみると、matrixの適用前と適用後（B.matrix = mx_a）とで、たとえばpositionもrotationも変化がありませんでした。
これはそういうものなのでしょうか？つまり「matrixを更新しても、それ以外のプロパティには変化がない」ものなのでしょうか？
「matrixAutoUpdate = false;」が関係しているようにも思えました。

[adrs2002]

そうなんです。three.js の matrix　の更新として、

SceneのUpdate の中で、Position , rotation, scale の３つを計算して、Matrixに当てはめる

という流れになります。
matrixAutoUpdate = false;　を行った理由は、この「 Upudate　の中での、 Pos&Rot&Scl　を基に、Matrixを計算させない（だってもう計算済みの値を当てはめたから）」になります。　
matrixAutoUpdate = true のままですと、 Pos&Rot&Scl　を基に、Matrixが計算されるため、結局 getInverse をセットする前のMatrixに戻ってしまうんです。

matrixをセットすれば＆取得すれば、まとめて取れますよ～とは書きましたが、私らふつーのプログラマには、Matrixの値は正直分かりづらいです。ハイ。

いわゆる、よくある流れとして「Position & Rotation & Scale　の値のまま管理したい！」というのがあります。この場合は、

```
var mx_a = A.matrix.getInverse();

var pos = new THREE.Vector3().setFromMatrixPosition(mx_a );
var rol = new THREE.Quaternion()setFromRotationMatrix(mx_a).
var scl = new THREE.Vector3().setFromMatrixScale(mx_a );

B.matrix.compose (pos , rol, scl );

//B.matrixAutoUpdate = false;

```
とやると、 Bの　position　などが変化しながら、更新されると思います。

[firstbiz]

なるほど。いったんmatrixを、管理しやすいPos Rot Sclに変換し、それを別のオブジェクトに適用する場合には、また別の変換メソッドをはさんでから適用するわけですね。
よく理解できました。ありがとうございます。

Answer 2

ポリゴン
オブジェクトは何(ソフト)でお作りでしょうか?
回転を気にするなら、予め別ソフトで作った3Dデータを読み込むほうが早いのでは?

Comments

[firstbiz]

three.jsのMeshで作りました。

[hectopascal1013]

>three.jsのMeshで作りました。

もし、どうしてもフリーの3Dソフト操作を使いたくないという事で、three.jsだけで完結させたいと言うことでしたら、回転中心の三角形の重心に子要素でポイントを持ってくるのではなく、親要素そのものの面を重心で３つの三角形に分けて頂点をあえて平面上に作るということをしたら良いのではないでしょうか?

[firstbiz]

３Dソフトであれば、簡単に実現できそうなのでしょうか？
もしそうであれば、３Dソフトであってもまったく問題ありません。

[hectopascal1013]

親要素子要素というのが邪魔しているように見えたもので。。。
やってみないとわかりませんが、three.jsは読み込みもサポートしていたので、Blenderやメタセコイアなどのソフトで制作したものでも読み込み可能です。それでいて、ポリゴンはテンプレが内包されたソフトもありますので、単純なものでしたら、そちらのほうが早いかもしれません。やり方や発想次第かもしれませんが。

[firstbiz]

そうなのですね。勉強してみます。
ありがとうございました。