javascript - 单击鼠标时相机可平滑放大对象位置

Question

所以我有一个包含多个盒子和一个 PerspectiveCamera 的场景。

我希望每当单击特定框时都能实现这种效果。

• 相机将从当前位置平滑过渡到盒子位置
• 该框位于相机视口(viewport)的中心
• 相机将平滑地放大并聚焦在盒子上

此效果的灵感来自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 颗星中他们最终换了相机。