[Three.js] THREE.Quaternion.slerp()をcameraに適用するが、うまく機能しない

Question

環境

Chrome 78.0.3904.97 (newest version 18/11/2019)
three.js (https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js)

実現したいこと

地球の東京を中心としたカメラポジションから、他の年(上海)を中心としたポジションに移動させる
(カメラは衛星のように動く)

コード

▼ 動きがわかりやすい様にCodpenに実装しました
(codepen内では地球ではなく、SphereGeometryを使用しております)
CODEPENはこちら

▼重要コード抜粋
下記lookAtを入れて、常にカメラを地球の方向に向けたいが、lookAt()を入れると画面が全く動かない

const moveCity = (() => {
  angle += .01;
  THREE.Quaternion.slerp(currentCamQ, nextCityCamQ, camera.quaternion, angle);
  
  //**** I wanna add it, but it doesnt work (doesnt move at all) ****
  //camera.lookAt(earth.position);
  
  if(angle < 1) {
     requestAnimationFrame(moveCity);
  }
});

codepen内ではカメラが全く関係無い方向に向いてしまいますが、衛星のようにカメラが動き tokyoからshanghaiが画面の中心に動くようにすることができず止まっています。
よろしくお願いいたします

また他に良い方法があれば、そちらの記載もしていただければ幸いです。

Answer 1

camera.quaternion は、「カメラの向き」をセットするものです。
そして、 camera.lookAt(earth.position) も、「カメラの向き」をセットするものです。

そのため、カメラは最初の位置から動いていません！
正解としては、こんな感じでどうでしょう。

//116行目に追加しています
let posv = new THREE.Vector3(0, 0, 40);
posv.applyQuaternion(camera.quaternion); 
 
 //**** I wanna add it, but it doesnt work (doesnt move at all) ****
 camera.position.set(posv.x, posv.y, posv.z);

Comments

[kazoogon]

回答ありがとうございます！

THREE.Quaternion.slerp(currentCamQ, this.nextCityCamQ, this.camera.quaternion, this.angle);
第３引数のobjectが円形状に移動すると思ってましたが、そのobject自信が回転するだけなんですねこれ汗

カメラが球体の周りを地球を見ながら回る事はできました:)
東京から南米にいってしまっていますが汗

ps. chrome拡張機能three.js editorが「renderer」とだけ表示されて全く機能してません、こちら何かわかったらのご返答で大丈夫なのですが、ご存知でしたらご回答お願い致します。

[adrs2002]

＞chrome拡張機能three.js editor
それってもしかして、コレですか？↓
https://chrome.google.com/webstore/detail/threejs-editor-extension/fbgbekpggeldiacgjkacbkkcbjhmakea

更新が2015年で止まっていますから、おそらく今のthree.jsには対応していないんじゃないでしょうかね…

[kazoogon]

https://chrome.google.com/webstore/detail/threejs-inspector/dnhjfclbfhcbcdfpjaeacomhbdfjbebi
これも使えないんですが、adrs2002さんはどうdebugとっていますでしょうか？？

[adrs2002]

普通に chrome で、F12のDevToolsを使ってデバッグしています…。
ブレークポイントを置いたり、console.logで値を出したりといった、古典的な方法です。

また、three.jsでは、描画するタイミング ( `renderrer.render` ) でthree.jsのエンジン側でプロパティを精査し反映させるので、今回のように値を入れ込んでも、 `renderrer.render`の前と後で強制的に値が変えられていることがあります。そのため、「セットしたタイミング」と「renderrer.renderの直後」で値を見比べてみるということも必要になったりします。
そのような場合、three.jsのどこで書き換わるか（どの値が最終的に反映されるか）を見るため、three.jsのソース内をさまよう必要もあります。

CODEPENでも、three.jsの元バージョン（ min がないもの）がリンクとして使えますので、基本的には最終出力までは　three.min.js ではなく、　three.js を使った方がよいと思います。

[kazoogon]

> ブレークポイントを置いたり、console.logで値を出したりといった、古典的な方法です。
なるほどです

> また、three.jsでは、描画するタイミング ( `renderrer.render` ) でthree.jsのエンジン側でプロパティを精査し反映させるので
こういう情報をどう手に入れているのか不思議ですが、とりあえずご回答ありがとうございました、助かりました！