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

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

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

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

JavaScript

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

Q&A

1回答

1201閲覧

【three.js】lerp(線形補間)の移動が2回目に効かない

da_

総合スコア9

Three.js

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

JavaScript

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

0グッド

0クリップ

投稿2020/06/16 06:00

やりたいこと

Three.jsで3Dのインタラクティブなwebサイトをつくっています。
A, B, C, D, Eの5つの地点があり
矢印◀︎▶︎のUIを押すたびに【A→B】【B→C】などカメラが移動できるようにしたいと思っています。

できないこと

【A→B】【B→C】などの一連の挙動はできました。

ですが**【A→B】【B→A】【A→B】**など、同じ順路を2回目に辿るとき
線形補間lerpでカメラが移動してくれず到着地点に瞬間移動してしまいます。

どの点が問題なのでしょうか…?

該当箇所コード

Javascript

1 2function animate() { 3 requestAnimationFrame(animate); 4 camMovingController(); 5 render(); 6} 7 8function camMovingController() { 9 // 右移動 10 if (camMoving01) { 11 if (camMovingTime < maxTime) { 12 console.log("移動1"); 13 camMovingTime++; 14 movingCam = cam01.lerp(cam02, camMovingTime * 0.0001); 15 camera.position.copy(movingCam); 16 controls.target.set(-430, 3, 1000); 17 } else if (camMovingTime === maxTime) { 18 camMovingTime = 0; 19 camMoving01 = false; 20 } 21 } else if (camMoving02) { 22 if (camMovingTime < maxTime) { 23 console.log("移動2"); 24 camMovingTime++; 25 movingCam = cam02.lerp(cam03, camMovingTime * 0.0001); 26 camera.position.copy(movingCam); 27 controls.target.set(-200, 3, 1500); 28 } else if (camMovingTime === maxTime) { 29 camMovingTime = 0; 30 camMoving02 = false; 31 } 32 } else if (camMoving03) { 33 if (camMovingTime < maxTime) { 34 console.log("移動3"); 35 camMovingTime++; 36 movingCam = cam03.lerp(cam04, camMovingTime * 0.0001); 37 camera.position.copy(movingCam); 38 controls.target.set(300, 3, 1200); 39 } else if (camMovingTime === maxTime) { 40 camMovingTime = 0; 41 camMoving03 = false; 42 } 43 } else if (camMoving04) { 44 secTitle("Section5"); 45 if (camMovingTime < maxTime) { 46 console.log("移動4"); 47 camMovingTime++; 48 movingCam = cam04.lerp(cam05, camMovingTime * 0.0001); 49 camera.position.copy(movingCam); 50 controls.target.set(300, 3, 500); 51 } else if (camMovingTime === maxTime) { 52 camMovingTime = 0; 53 camMoving04 = false; 54 } 55 } 56 57 // 左移動 58 else if (camMoving05) { 59 if (camMovingTime < maxTime) { 60 console.log("移動5"); 61 camMovingTime++; 62 movingCam = cam02_.lerp(cam01_, camMovingTime * 0.0001); 63 camera.position.copy(movingCam); 64 controls.target.set(0, 3, 30); 65 } else if (camMovingTime === maxTime) { 66 camMovingTime = 0; 67 camMoving05 = false; 68 } 69 } else if (camMoving06) { 70 if (camMovingTime < maxTime) { 71 console.log("移動6"); 72 camMovingTime++; 73 movingCam = cam03_.lerp(cam02_, camMovingTime * 0.0001); 74 camera.position.copy(movingCam); 75 controls.target.set(-430, 3, 1000); 76 } else if (camMovingTime === maxTime) { 77 camMovingTime = 0; 78 camMoving06 = false; 79 } 80 } else if (camMoving07) { 81 if (camMovingTime < maxTime) { 82 console.log("移動7"); 83 camMovingTime++; 84 movingCam = cam04_.lerp(cam03_, camMovingTime * 0.0001); 85 camera.position.copy(movingCam); 86 controls.target.set(-200, 3, 1500); 87 } else if (camMovingTime === maxTime) { 88 camMovingTime = 0; 89 camMoving07 = false; 90 } 91 } else if (camMoving08) { 92 if (camMovingTime < maxTime) { 93 console.log("移動8"); 94 camMovingTime++; 95 movingCam = cam05_.lerp(cam04_, camMovingTime * 0.0001); 96 camera.position.copy(movingCam); 97 controls.target.set(300, 3, 1200); 98 } else if (camMovingTime === maxTime) { 99 camMovingTime = 0; 100 camMoving08 = false; 101 } 102 } 103}

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

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

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

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

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

guest

回答1

0

ソース全体がないので状況再現できないのでソース眺めた限りでいうと

・camMoving05がtrueのときにcamMoving01がtrueになったら挙動おかしくなりそう
・移動先情報を配列にしてインデックスで管理したほうがいいのでは

っていう感じですね。

投稿2020/06/16 06:50

rururu3

総合スコア5545

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

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

da_

2020/06/17 15:32

ご回答ありがとうございます!(全部のコードあげられなくて申し訳ございません…!) camMovingのbool値は一応コンフリクトしないようにしてあり、1巡目は全てうまく動くんですが 2回目同じ経路を辿るとおかしくなるんですよね… アドバイスいただいた通り、インデックスで管理してコードを整理して考えてみたいと思います。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問