相機在鼠標上平滑地放大到對象位置單擊

因此，我有一個包含多個框和PerspectiveCamera的場景。相機在鼠標上平滑地放大到對象位置單擊

無論何時點擊特定框，我都想達到這個效果。

相機將平滑地從它的當前位置到所述框的位置轉換
箱子被在照相機視口的中心
相機將順利放大並專注於框

這種效果受100,000 Stars的啓發。無論何時用戶點擊一個星號，攝像機都會放大並顯示在星號中。我試圖複製這種效果。

我目前能夠抓住盒子的位置並觀察它。但我想做的比這更多，我不確定如何繼續。

2017-04-07 Tony

我認爲你需要的是一個動畫，有很多動畫庫，如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顆星最後切換相機。

來源

2017-04-08 04:24:08

相機在鼠標上平滑地放大到對象位置單擊

回答

相關問題