カメラはスムーズにオブジェクトの位置にズームします。マウスのクリック

Question

私は複数のボックスとPerspectiveCameraのシーンを持っています。

特定のボックスをクリックするたびにこの効果を得たいと思います。カメラがスムーズボックスの位置を現在の位置から移行する

ボックスは、カメラがスムーズにズームボックスを中心に説明する
• カメラのビューポートの中心にある

この効果は100,000 Starsからインスピレーションを受けました。ユーザーが星をクリックするたびに、カメラは星にズームして中心に表示します。私はその効果を再現しようとしています。

私は現在、ボックスの位置をつかんで見ることができます。しかし、私はそれ以上のことをしたいと思うし、進める方法がわからない。

Answer 1

私はアニメーションが必要だと思う、anime.jsとtween.jsのような多くのアニメーションライブラリがあります。翻訳後にその位置を把握しているので、翻訳を円滑にするアニメーションを作成できます。 tween.jsのスニペットは次のとおりです。

var tween2 = new TWEEN.Tween(camera.position) 
       .to({ 
        x : target.position.x, 
        y : target.position.y, 
        z : target.position.z 
       } , 1000) 
       .easing(TWEEN.Easing.Linear.None) 
       .start(); 

カメラの中央にボックスを配置する場合は、ここをクリックしてください。カメラの回転を変更する必要もあります。ここでは、行列を使ってターゲットの回転を計算する方法を示します。

var rotation_matrix = new THREE.Matrix4(); 
    rotation_matrix.lookAt(target_position,target_box.position,camera.up); 
    var target_rotation = new THREE.Euler(0,0,0,"XYZ"); 
    target_rotation.setFromRotationMatrix(rotation_matrix); 
    //now, the target_rotation would be the rotation after translating. 

次に、同様に回転を変更するアニメーションを作成できます。

ところで、最終的に100000個の星がカメラを切り替えるようです。