やりたいこと

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}

行動規範の内容に同意します

回答1件

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

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

っていう感じですね。

投稿2020/06/16 06:50

rururu3

総合スコア5545

da_

2020/06/17 15:32

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

行動規範の内容に同意します