【three.js】スクロール検知で関数発火→カメラを目的地までゆっくり動かしたい

Question

###実装したい事
three.jsで、canvas上でスクロールという挙動があったときに、カメラを目的地までゆっくり移動させるというものです。

###試したこと・考えたこと
・rendererで、常に動いているように見せることは可能ですが、
"ある挙動があった場合に"という条件で、カメラが目的地にたどり着くまでずっと関数を発動させ続けるには？
という部分が、分からずにいます。

・JavaScriptでそういった関数が作れないか調べてみたところ、
mousewheeleventでスクロールを検知させることはできました。
ただ、これでは、スクロールをやめた途端に、カメラが止まってしまうので、目的地までなめらかに移動させることができません。

何か良い方法はありませんでしょうか。
すみませんが、ご教示お願い致します。

Answer 1

mousewheelevent を、「カメラを移動させるための関数」とするのではなく、「カメラの移動状態を開始する」関数ととらえれば、できそうですね。

window.camMoving = false;
window.camMoviingTime = 0;

window.CamFirst = new THREE.Vector3(0,0,0);  //開始位置
window.CamEnd = new THREE.Vector3(0,0,100);  //終了位置


function mousewheeleventSample(){
 // カメラが移動状態でなければ、カメラ移動状態にする
 if(!window.camMoving){
     window.camMoving = true;
     window.camMoviingTime = 0;
 }
}


renderer() {
   if(window.camMoving){

      //すごく単純に、50フレーム（1秒弱）でカメラが移動しきる感じにしてあります。      
  　　if(window.camMoviingTime < 50){
          window.camMoviingTime++;  //経過フレーム数

          //中間地点の入れ物を作ります。
          const movingCam = window.CamFirst.lerp(window.CamEnd , window.camMoviingTime * 0.02 )

          camera.position.copy(movingCam);
      
      }
   }

   renderer.render();
}

Vector3.lerp( 目標地点, 目標地点までの係数) 　で、開始位置と終了位置の中間の位置を求めることができます。係数は　0で初期位置、1.0で目標位置　となります。　 window.camMoviingTimeに0.02をかけているのは、50のときに1.0になるようにするため、です。