やりたいこと
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}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/17 15:32