Three.jsで子オブジェクトに配置したビルボードをカメラに正対させたいです。

Question

お世話になります。Three.jsについて勉強しておりますが、
ビルボードについて分からないことがあり質問させていただきます。

現在、Three.jsでビルボードを使用したいと思っています。
ビルボードをカメラに正対させているのは、以下の１行です。

billboard.rotation.setFromRotationMatrix( camera.matrix );

これですと、ビルボードがシーンに配置（add）されている場合は、
正常にカメラの方を向きますが、例えばキャラクタに追従するパーティクル等
シーン内にあるオブジェクトに配置する（ビルボードが子オブジェクトになる）
場合、カメラに正対してくれません。

どの様にすれば良いかご存じの方がいらっしゃいましたら、
ご教授下さい。よろしくお願いします。

Answer 1

これが正しいかどうかはわかりませんが、一応考え方としては、親オブジェクトの回転の逆の回転をさせて回転を帳消しにして、カメラの回転を与えた回転を子オブジェクトに与えるカメラに正対させることができました。

var q = parentObj.quaternion.clone().inverse().multiply(camera.quaternion.clone());
for (var i = 0; i < meshCnt; i++) {
    parentObj.children[i].quaternion.copy(q);
}

デモページ

Comments

[essex]

turbgraphics200様、いつもご教授ありがとうございます。
サンプルまで作成していただいたおかげで、
やりたかったことが実現できました。

数学が苦手な私には難解ですが、
親オブジェクトとカメラの逆行列のかけ算は、
逆回転させて回転を帳消しにする…という処理なのですね。

試しに孫オブジェクトを作ってみましたが、
var q = mesh.quaternion.clone().inverse().multiply(camera.quaternion.clone());
　　q = mesh1.quaternion.clone().inverse().multiply(q.clone());
こんな風に２段階で逆行列をかけてやると、孫オブジェクトがカメラに正対するのですね。
勉強になります。

クオータニオンを頑張って勉強します。
ありがとうございました。

[edom18]

ちょっと重箱のすみをつつく感じになっちゃって申し訳ないですが、クォータニオンと行列は別物です。
なので「逆行列」というとちょっと意味が違ってきてしまいます。（ここでは逆クォータニオン）

例えばY軸で45度回転するクォータニオンの逆クォータニオンはY軸に対して-45度回転、という感じです。
そしてクォータニオンは掛け算することで回転を表すため、結果として逆クォータニオンを掛けるとプラスマイナスゼロになる、ということですね。

クォータニオンについてこんな記事があったので参考までに貼っておきます。
http://qiita.com/kenjihiranabe/items/945232fbde58fab45681#quaternion-%E3%81%AE%E6%80%A7%E8%B3%AA