質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.32%

  • Three.js

    131questions

    Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 921

essex

score 14

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

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

billboard.rotation.setFromRotationMatrix( camera.matrix );

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

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


デモページ

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/25 17:47

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

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

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

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

    キャンセル

  • 2017/01/26 13:41 編集

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

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

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

    キャンセル

同じタグがついた質問を見る

  • Three.js

    131questions

    Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。