相機單擊鼠標即可平滑放大到對象位置

Question

因此，我有一個包含多個框和一個PerspectiveCamera的場景。

我想在每次單擊特定框時都達到這種效果。

• 攝像機將從當前位置平穩過渡到盒子的位置
• 該框位於相機視口的中心
• 相機將平穩放大並對焦在盒子上

這種效果的靈感來自100,000星 。 每當用戶單擊星標時，相機就會放大該星標並將其顯示在中央。 我正在嘗試復制這種效果。

目前，我可以抓住盒子的位置並查看它。 但是我想做的還不止於此，我不確定該如何進行。

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星中他們最終切換了相機。