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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Three.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2776閲覧

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

kazoogon

総合スコア281

Three.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/11/17 23:32

編集2019/11/18 23:41

環境

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が画面の中心に動くようにすることができず止まっています。
よろしくお願いいたします

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

js

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

投稿2019/11/20 05:01

adrs2002

総合スコア203

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kazoogon

2019/11/21 15:17

回答ありがとうございます! THREE.Quaternion.slerp(currentCamQ, this.nextCityCamQ, this.camera.quaternion, this.angle); 第3引数のobjectが円形状に移動すると思ってましたが、そのobject自信が回転するだけなんですねこれ汗 カメラが球体の周りを地球を見ながら回る事はできました:) 東京から南米にいってしまっていますが汗 ps. chrome拡張機能three.js editorが「renderer」とだけ表示されて全く機能してません、こちら何かわかったらのご返答で大丈夫なのですが、ご存知でしたらご回答お願い致します。
adrs2002

2019/11/25 04:08

普通に 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

2019/11/25 09:48

> ブレークポイントを置いたり、console.logで値を出したりといった、古典的な方法です。 なるほどです > また、three.jsでは、描画するタイミング ( `renderrer.render` ) でthree.jsのエンジン側でプロパティを精査し反映させるので こういう情報をどう手に入れているのか不思議ですが、とりあえずご回答ありがとうございました、助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問